webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

企業サイト再構築 vol.3 css sprite

  • グローバルナビゲーションをcss spriteで制作する。
  • 横並びのナビゲーションは、横幅640pxまで使用する。
  • <li>は合計6個あるので、一つあたり横幅106pxで作る。
  • 横幅の最小値で設計するので、横幅が大きいときはフォントサイズが小さくなってしまうことを考慮に入れる。枠に収まるぎりぎりのサイズで文字を入力しておく。
  • 縦長に作る理由。←レスポンシブにしてサイズが大きくなったときに、項目を横並びにしてしまうと、隣の項目が見えてしまうから。
  • ガイドラインを引いて、正確に作っていく。☟こんな感じ。

f:id:ohta-felica:20160901130001p:plain

  • できあがった画像は、globalNavの背景としてコーディングする。