前回の続きです。
後編なのにイントロダクション
狙ってやってる訳ではないですが、前回の中編はグダグダ感満載でした。「僕の知ってるすごいことを発表する場」としてこのBlogを使っているわけではなく、「僕の知らなかった今日学んだことを書き残す場」として使っているので当然といえば当然なんですが・・・
何が言いたいかというと、パブリックな場所にアウトプットを残すのって、ハードル下げてもいいよね と。
書き手としては、人に見られることを意識するから、できるだけ曖昧な部分を排除する様になったり、アウトプットを残すことが一種のモチベーションになったり(今日は何を勉強してまとめようか とか)、メリットが大きいと思うのですよ。
そして、その情報を価値あると思ってくれる読者もいれば、僕もやってみようかと思ってくれる読者もいる。
そんな訳で、システム勉強している人や、システムで食べてる人とかでも、もっと情報発信する人が増えたらいいなと思った次第です。
ハードルは、そんなに高くないですよ?(罵倒されると凹むけど、今の所そういうのはないです)
絶対座標で指定していたレイアウトを相対指定に変更する
前回の設定で、全て場所を絶対座標(上から何ピクセル、右から何ピクセル)にしていたので、これを変更します。まず、前回の絶対座標指定を全て削除(画像中はわかりやすいようにコメントアウトにしてます)
すると、表示はこのような感じに
見事に崩れましたが、ここから立て直していきます。
トップの白い余白をどうにかする
body全体に効いている、余白設定(margin、padding)が原因です。これをCSSで0に設定します。
するとこんな感じ
サイドバーをちゃんとサイドバーにする
続いて、サイドバーをちゃんとサイドバーにしてあげます。
それぞれにfloat属性を付けてあげます。
すると
近い感じになってきます。
サイドバーを下まで伸ばす
サイドバーにheight:100%を指定してみます。
しかし変わらず・・・調べると、htmlとbody要素に対してもheight:100%を指定しなければならないとのこと(親要素に対する100%となるので、親であるhtmlとbodyに対しても100%を指定する必要がある)
すると・・・
今度こそそれっぽくなりました!あとは、メインコンテンツ部が詰まっているので、適度に間を空けてあげます。
メインコンテンツ部は、以下の絵の様に回り込みによって描画されているので
サイドバーの部分に余白をもたせてあげます。
すると適度に間が空きました!
開発者ツールで見ても、サイドバーのmarginが効いているのがわかります。
フッターの存在を忘れてましたが、なんとなく掴みはわかってきたのでこれでよしとします。
なんだかんだでここまで作るだけでも、だいぶ時間を使いました・・・学習あるのみですね。