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

今日学んだこと

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

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

CSS

前回の続きです。

後編なのにイントロダクション

狙ってやってる訳ではないですが、前回の中編はグダグダ感満載でした。「僕の知ってるすごいことを発表する場」としてこのBlogを使っているわけではなく、「僕の知らなかった今日学んだことを書き残す場」として使っているので当然といえば当然なんですが・・・

何が言いたいかというと、パブリックな場所にアウトプットを残すのって、ハードル下げてもいいよね と。

書き手としては、人に見られることを意識するから、できるだけ曖昧な部分を排除する様になったり、アウトプットを残すことが一種のモチベーションになったり(今日は何を勉強してまとめようか とか)、メリットが大きいと思うのですよ。

そして、その情報を価値あると思ってくれる読者もいれば、僕もやってみようかと思ってくれる読者もいる。

そんな訳で、システム勉強している人や、システムで食べてる人とかでも、もっと情報発信する人が増えたらいいなと思った次第です。

ハードルは、そんなに高くないですよ?(罵倒されると凹むけど、今の所そういうのはないです)

絶対座標で指定していたレイアウトを相対指定に変更する

 前回の設定で、全て場所を絶対座標(上から何ピクセル、右から何ピクセル)にしていたので、これを変更します。まず、前回の絶対座標指定を全て削除(画像中はわかりやすいようにコメントアウトにしてます)

f:id:nakazye:20140921232717p:plain

すると、表示はこのような感じに

f:id:nakazye:20140921232808p:plain

見事に崩れましたが、ここから立て直していきます。

トップの白い余白をどうにかする

body全体に効いている、余白設定(margin、padding)が原因です。これをCSSで0に設定します。

f:id:nakazye:20140921233904p:plain

するとこんな感じ

f:id:nakazye:20140921233933p:plain

サイドバーをちゃんとサイドバーにする

続いて、サイドバーをちゃんとサイドバーにしてあげます。

それぞれにfloat属性を付けてあげます。

f:id:nakazye:20140921234306p:plain

すると

f:id:nakazye:20140921234341p:plain

近い感じになってきます。

サイドバーを下まで伸ばす

サイドバーにheight:100%を指定してみます。

f:id:nakazye:20140922000453p:plain

しかし変わらず・・・調べると、htmlとbody要素に対してもheight:100%を指定しなければならないとのこと(親要素に対する100%となるので、親であるhtmlとbodyに対しても100%を指定する必要がある)

f:id:nakazye:20140922000754p:plain

すると・・・

f:id:nakazye:20140922000826p:plain

今度こそそれっぽくなりました!あとは、メインコンテンツ部が詰まっているので、適度に間を空けてあげます。

メインコンテンツ部は、以下の絵の様に回り込みによって描画されているので

f:id:nakazye:20140922002437p:plain

サイドバーの部分に余白をもたせてあげます。

f:id:nakazye:20140922002538p:plain

すると適度に間が空きました!

f:id:nakazye:20140922002609p:plain

開発者ツールで見ても、サイドバーのmarginが効いているのがわかります。

f:id:nakazye:20140922002705p:plain

フッターの存在を忘れてましたが、なんとなく掴みはわかってきたのでこれでよしとします。

なんだかんだでここまで作るだけでも、だいぶ時間を使いました・・・学習あるのみですね。