メサイア・ワークス

HTML5とCSS3で、頑張ってヘッダ・フッタ・ナビバー・サイドバーを作ってみた。縦方向・横方向の両方に伸ばすのがややこしい!

HTML5とCSS3で、頑張ってヘッダ・フッタ・ナビバー・サイドバーを作ってみた。縦方向・横方向の両方に伸ばすのがややこしい!

ゴールは、こんな感じ。配色のせいかスーファミ感ある(苦笑)

HTMLは元々XMLみたいにデータ構造だけ表して、見た目はCSSで定義すべき!って話だったけど、ブラウザが良い加減に表示してくれるのでHTML4時代は適当に書いても、それなりに表示してくれた。
HTML5になって、もっと構造化しようよ!ってので出てきたタグがこちら

うん、データ構造を表すだけ!というだけあって、ブラウザで見てみると、ただ文字列が表示されるのみ(ブロック要素なので、改行はしてくれる)
昔はiframeで、頑張ってサイドバーとか作ってたな(遠い目)

とりあえずCSSで、ぱっと見で区別できるように、適当な配色をしてみる。レインボーカラーっぽい。

ヘッダ・ナビバー・フッタは、わりとこのままで良いけど、サイドバーとメイン部分は横並びにしないとな〜。
display:flex; してみたら、全部横並びになった。違う、そうじゃない

横並びにしたいのと、そうじゃないのを分けないとな…。
asideとmainをcontainerクラスで囲む

asideとmainだけを、横並びに出来た!
でも、mainの横幅が短い・・・。

サイドバーの横幅は固定のままにして、mainだけ余白の分だけ横幅を伸ばそう。

ヘッダ・フッタ・ナビバーは固定縦幅で良いけど、サイドバーとメインの部分は、ウィンドウのサイズに合わせて伸びて欲しいな。

なんか一気にややこしくなったけど、display:flexの設定は、すぐ上の親要素の指定が、子要素に対して効果ある。そのため、
1, bodyのflex-direction:columnは、子要素のheader,nav,container(flex:1で余った余白の分が伸び縮みする),footerを縦並びにする
2, containerのdisplay:flexは、子要素のasideとmainは、横並びにする(flex-directionは、rowがデフォ値なので指定しなくてもOK)
3, mainのflex:1は、親要素のcontainerのdisplay:flexに従い、横方向の余白を埋める形で伸び縮みする。

要するに
1, 全体は縦方向に伸ばす
2, 縦方向に伸ばす部分は、サイドバー&メインとなる部分
3, メイン部分は、横にも伸ばす

という二重構造になっている。

後は、ヘッダ・フッタ・ナビバーの縦幅とサイドバーの横幅を、適当に指定すればOK!

完成形のCSSは、こちら

あと、各パーツの色を変えなくても、枠線を引いた方が記述が簡単だった

モバイルバージョンを終了