der Gegenwart

どうでもいい雑記その589

いかにスマートなソースで背景をCSSで設定して…なんてことはやってられない。ここは上の背景用のdivだ!ここに内容のdivだ!下の背景用のdivだ!divdivdiv!って感じだ。理想と現実の違いを味わった。何が違うって、まず時間の制約がある。ここにdiv使わなくても、ここで一緒にすればまとまってすっきりするよ!なんてことを考えてる暇があったら、その分手を動かさなければならない。

そうでもないよ。

最初にページ構成をしっかり考えておかないと、メンテナンス効率が悪くなるし。きちんと考えてマークアップしていく作業は重要だと思う。むやみやたらにdiv要素を入れ子にするのはあんまり良くないんじゃないかな。

  1. デザインカンプ*1のテキスト部分だけ*2をコピペしまくってとりあえずdiv要素なしでマークアップ
  2. サイトタイトルのロゴとかバナーとかを書き出しておいた画像ファイル使ってimg要素に置き換え
  3. class=”header”なdiv要素等々でグループ分け
  4. デザインカンプに合わせた表示になるようCSSを記述する
  5. CSSを書いていく中で背景画像の設定可能数が足りなくなったら何とかする(謎)

実際にはカンプをスライスして画像を書き出す時点で、背景画像をどうするのかとかを予め考えておくんだけどね。ただ、実際に作業を進めていくと、クロスブラウザの絡みとかで「あれ? うまくいかなくね?」みたいなところがでてくるから、その辺はアドリブで何とか。

って何かいてるのか自分でよく分かんなくなってきた。

  1. と、うちの会社では呼んでるけど、あんま一般的じゃない? モックアップとか言うの?
  2. サイトタイトルとか見出しとか本文とかナビゲーションの文字列とか。