Posts Tagged ‘ markup ’

4
25
Mar

design→markup

共感できるというか、わからなくないエントリーがあったので。

Webデザインのタネ | また延期になるプロジェクト。
http://oshare.jugem.cc/?eid=667

どこも似たような感じなのかなぁと思いながらも、回数こなしながらうまくやれるようになりたいかなと。
あ、ちなみにわはマークアップ側ですよ。

どこが見出し要素か本気で迷った
~~~ 中略 ~~~
HTMLでIDやクラス付けをしようとすると、半端なく難しい。1ページ1ページごとにh1に該当するような見出しがあったり、なかったり、見出しだと思われる箇所のビジュアルは規則性がなく、CSSでやるのには苦労のするものでした。

Webデザインのタネ | また延期になるプロジェクト。

こういうのは結構あるよなぁ。
見出しなんだろうとおもってサイト全体で構造を考えてつくってたら、追っかけで来たデザインにはないページがあったり。あらあら、ってかんじで困ったりもするんですが。
ま、仕方ないということで。
h1のデザイン、h2のデザイン、h3のデザインというよりも、
.patternAのデザイン、.patternBのデザイン、.patternCのデザイン
といった感じで考えておいた方がいいことも結構あるのかも?ってきがしてますね。

これらをそれぞれpatternAとかのクラスにすると、なんとなく気持ちが悪ければ、
わかるようにcssの方にかいておいて、それぞれに意味からidなりclassを振っていくっていう方法になるんだろうな。
無駄にclassとかつけてしまうのがなんかいやなんだけど。

ビジュアルの規則性とかもあげられてるんですが、そういう規則性はあったほうがこちらとしては嬉しいきがするし、
多分、ユーザーも分かりやすいと思うんですよね。
最初見た時点である程度サイトの構造を学習するでしょうから。

明確な理由があってビジュアルが違うのかどうかがわからない時が一番難しいですが、
最近はまぁ、違うならちがうで仕方ないかぁと思ったりしますね。
同じ位置づけなんだろうことはわかっても、微妙に場所がずれてるのは丸めてしまっていいのか?とか。
pxでみてるのはマークアップする人間だけど、ビジュアル作る人間は全体の中で見てるだろうし。
pxでそろってるのがそろってると考えてないのかも?とおもったりしてますしねぇ。

そういうのを考える時は大体時間との勝負だったりもしてますが、
制作する側のエゴかも?
そうならないようにしないとなぁ
って気をつけながら色々やってるつもりです。

個人的に気になってるのは、マークアップの作業の見積もりを設計仕様書、UI設計からいかにしてやるか?
というところが最近のテーマですね。
デザインまでできてれば色がついていないようなUIがなくても、ある程度想定できますが、
UIから見積もるとなると、どんなデザインがあがるかがわからないだけに、作業時間の見積もりが難しいよなぁと。
UI設計書からビジュアル担当者とマークアップ側と同時に見積もりを出さないときとか。
(ビジュアルとマークアップが別会社という前提ですが)
UI設計書から見積もるという経験値が圧倒的に足りないのが一番いけないですがね。

そこをどうやって見積もるか、というのを最近考えてるところですね。
そういう意味では今はそこを考えずにやらせてもらえてる、というのはある意味幸せなんだなぁと。

毎回作業しながら、次回の反省というか、次はこうならないように、ってのをメモったり考えたりしてるけど、
それを確実に生かせてるか?というと疑問符なところもあるので、
制作が終わった時点でまとめて一度振り返る必要があるのかもなぁ。

あぁ、意味不明な文章になってしまった。
なんかこのあたり考えてることはあるんだけど、うまく文章にできてないな。
文章力も原因だろうけど、もうすこししっかり考えないといけませんね。

0
25
Oct

divかdlか

グラデーション角丸+リキッドレイアウトをCSSでコーディングする時の考え方 | Blog hamashun.com

泣かせてくれるデザインはあるわけですが。
とはいえ、そのデザインは否定してはいけないわけですし。
そこをいかにきれいにできるかが重要なんだろうな。
自己満足な部分も多いんだけれども。

誰かがきっと見てるはず!

いつだかdivをつかうかdlを使うかをふと考えたことがあって、
divだと一つしか指定できないけど、
dl使うとdlとddがつかえんじゃ~ん、と1人感動したことがあったな。
使える状況であればというのが当然の前提だけど。

そういやあのときちゃんと仕様書読んでなかったな。
仕様書よんでこよ。

0
4
Aug

その水平線はなんなのか?

ずらずらあるテキスト。
読みやすくするために改行したりするわけですが。

そのうえで意味に分けて段落をきると。
若干余白多めになったりするわけですが。

まぁ、段落ですよ、という意味で水平線的な画像とかが入ってもいいような気がするけど。
マークアップをどうするかいつも悩むわけです。

pのbackground-bottomに線の画像をいれてもいいけど、pを使うのはそこだけじゃないし。
だったらそういう線があるとこだけclass=”section”とかあたえたdivでくくって線を表示させるとか。

んで意味としてもうちょい大きそうなものはhrをつかうとか?
hrは画像でうまく表示できない?
backgroundとか使って。
なんかIEだとうまくいかなかった。
もうちょい試行錯誤が必要なのかも。

とりあえずそこで挫折してしまったので、意味的にdivとわけるために単純にimgタグでマークアップしといた。
なんとなくすっきりしないわけです。

0
11
Jul

h1云々のお話とかをとりあえずメモっとく

仕事でサイト作るときは注文ないかぎりは基本的にサイト名がh1かなぁ。
titleにページの見出し的なモノは入るし。
でも色々な考え方があるんですね。
もうちょっと普段から考える癖をつけないといけませんね。

参考サイト
見出し要素に関する議論 – 徒委記
http://www.akatsukinishisu.net/wiki.cgi?%B8%AB%BD%D0%A4%B7%CD%D7%C1%C7%A4%CB%B4%D8%A4%B9%A4%EB%B5%C4%CF%C0
→ここにリンクはまとまってるからここ見ればとりあえず全体はつかめるかな。

カラクリエイト:何をもって「重要」とするか
http://www.extype.com/karakuri/archives/2007/07/post_106.html
securecat’s exblog : Re: 見出し要素に関する議論
http://securecat.exblog.jp/5768813
我的春秋: HTML の見出しをめぐる議論
http://my-chunqiu.cocolog-nifty.com/blog/2007/07/html_64a8.html

h1をはじめ、見出し要素に関する議論が盛んになっている件::::::STOPN’ LISTEN::::::to the silence:::::::
http://stopnlisten.no.land.to/2007/07/h1.html
→マークアップの事を考え出すと、日本語に行き着くのは同じなんだなぁ。国語の勉強が必要そうだ。。

0
5
Jul

formをテーブル使わずdivとfieldsetでつくるあれ

webcreatorsの8月号に載ってた方法ですが。
labelの部分と入力エリアの部分divでくくってそれが並ぶといった感じ。
自分でform作るときはやったこと無かったから新鮮と言えば新鮮なんだけど、なんか気持ち悪いと言えば気持ち悪い。

どの方法が正解というわけではないだろうからあれだけれども。
とりあえず候補に入れておきつつ、フォームのマークアップ例と言うことで作っておこうかな。