読者です 読者をやめる 読者になる 読者になる

今日学んだこと

読書感想文とか、勉強した内容とか

今更聞けないWebサイト構築〜脱テーブルレイアウト〜【中編】

CSS

前回の続きです。

続いて、メニューを作ってみます。

※※ 注意!! ※※

今回の説明は、いわゆるダメな例です。CSS素人が、どう失敗するかが本エントリーで、次の章で立て直す予定です・・・。こういうことやるとハマるよ?と、悪い例として見てもらえれば。

自分の勉強メモとして、試行錯誤の経緯も重要な資産となるかなと思って残してます。

メニューの作成

テーブルだと

<table><tr><td>menu1</td><td>menu2</td><td>menu3</td></tr></table> 

とするところを、li(リストアイテム)タグで作っていきます。また、HTML5からnav(ナビゲーション)というタグが追加されたので、こちらも使っていきます。

メニュー(HTML)

f:id:nakazye:20140921214119p:plain

メニュー(CSS:レイアウト)

f:id:nakazye:20140921214222p:plain

ポイントは、nav#nav_main liでfloat:leftを指定しているところ。これで、通常縦に並ぶリストが横に並ぶことになります。

なお、list-style-type: noneを指定することで、通常・(ぽっち)がつくのを消しています。

メニュー(CSS:装飾)

f:id:nakazye:20140921214510p:plain

区切りを入れたかったので、border-left: solid 1pxを指定してますが、このままだとこの1pxのおかげで、レイアウトで指定した25%を飛び出してしまい、レイアウトが崩れてしまいます。そのため、margin: -1pxとマイナス1してあげることで辻褄を合わせます。

そうすることで、以下のような感じになりました。

f:id:nakazye:20140921214703p:plain

左右のサイドバーの作成

続いて左右のサイドバーです。

こちらもナビゲーション的な要素が多いと思うので、navタグで領域を作っていきます。

サイドバー(HTML)

f:id:nakazye:20140921215525p:plain

このままだと表示がこんな感じになってしまうので、CSSで整えます。

f:id:nakazye:20140921215601p:plain

サイドバー(CSS:レイアウト)

f:id:nakazye:20140921222503p:plain左と右で、それぞれleft:0、right:0として位置を指定しています。

と、ここまで位置の絶対値指定できて、メインコンテンツ部を綺麗に伸び縮みさせられるのか心配になってきました・・・

サイドバー(CSS:装飾)

f:id:nakazye:20140921222923p:plain

境界線として、点線を指定してみました。出来上がったのがこちら。

f:id:nakazye:20140921223014p:plain

なんとなーくそれっぽくなってきました。続いてメインコンテンツ部です。

メインコンテンツ

メインコンテンツ(HTML)f:id:nakazye:20140921224338p:plain

CSSを設定せずにブラウザ表示をすると、ひどいことになります。

f:id:nakazye:20140921224714p:plain

今までのコンテンツを全てfixedで作ってきたので、そこからの相対にはならないんですね。つまり、真ん中も位置固定で、サイズ固定で作らないといけない。

しかも、左右のサイドバーはピクセル固定にしているので、メインコンテンツ部もピクセル固定で作らないといけない。

・・・ウィンドウサイズに応じて、記事の幅が変わらないページの出来上がりです。

デザインとして狙っていればいいんだけど、今回やりたかったことはそうじゃない。

ということで、後編としてfloatを用いたレイアウトに修正を施していきます・・・。

>>後編書きました