前回の続きです。
続いて、メニューを作ってみます。
※※ 注意！！ ※※
今回の説明は、いわゆるダメな例です。CSS素人が、どう失敗するかが本エントリーで、次の章で立て直す予定です・・・。こういうことやるとハマるよ？と、悪い例として見てもらえれば。
自分の勉強メモとして、試行錯誤の経緯も重要な資産となるかなと思って残してます。
メニューの作成
テーブルだと
<table><tr><td>menu1</td><td>menu2</td><td>menu3</td></tr></table>
とするところを、li(リストアイテム)タグで作っていきます。また、HTML5からnav(ナビゲーション)というタグが追加されたので、こちらも使っていきます。
メニュー(HTML)
メニュー(CSS:レイアウト)
ポイントは、nav#nav_main liでfloat:leftを指定しているところ。これで、通常縦に並ぶリストが横に並ぶことになります。
なお、list-style-type: noneを指定することで、通常・（ぽっち）がつくのを消しています。
メニュー(CSS:装飾)
区切りを入れたかったので、border-left: solid 1pxを指定してますが、このままだとこの1pxのおかげで、レイアウトで指定した25%を飛び出してしまい、レイアウトが崩れてしまいます。そのため、margin: -1pxとマイナス1してあげることで辻褄を合わせます。
そうすることで、以下のような感じになりました。
左右のサイドバーの作成
続いて左右のサイドバーです。
こちらもナビゲーション的な要素が多いと思うので、navタグで領域を作っていきます。
サイドバー(HTML)
このままだと表示がこんな感じになってしまうので、CSSで整えます。
サイドバー(CSS:レイアウト)
左と右で、それぞれleft:0、right:0として位置を指定しています。
と、ここまで位置の絶対値指定できて、メインコンテンツ部を綺麗に伸び縮みさせられるのか心配になってきました・・・
サイドバー(CSS:装飾)
境界線として、点線を指定してみました。出来上がったのがこちら。
なんとなーくそれっぽくなってきました。続いてメインコンテンツ部です。
メインコンテンツ
メインコンテンツ(HTML)
CSSを設定せずにブラウザ表示をすると、ひどいことになります。
今までのコンテンツを全てfixedで作ってきたので、そこからの相対にはならないんですね。つまり、真ん中も位置固定で、サイズ固定で作らないといけない。
しかも、左右のサイドバーはピクセル固定にしているので、メインコンテンツ部もピクセル固定で作らないといけない。
・・・ウィンドウサイズに応じて、記事の幅が変わらないページの出来上がりです。
デザインとして狙っていればいいんだけど、今回やりたかったことはそうじゃない。
ということで、後編としてfloatを用いたレイアウトに修正を施していきます・・・。
>>後編書きました
