りりこのWeb学習記録

htmlcssを実際に打ち込んでみよう。

こんにちは
本日の学習はドットインストールという学習サイトを使っての打ち込み練習を行いました!
とにかく実践あるのみ、ということでひたすら同じ動画を見ながら体で覚えるという勉強法です。
体で覚える打ち込みですが疑問点もちらほら出てきます。
まだまだweb初心者の私にとって恐ろしいのが、2カラムレイアウトをなどを作成している時のfooterの回り込み‥。
楽しくfloatで左右に分けているのに、回り込んでくる恐るべきfooter!!どうにかしたい。
floatの解除(Normalize.cssとリセットCSS)
と、初心者なので大げさに騒いでしまいましたが、
すぐに解決できました、
このような事態にならないよう、floatを解除するためのプロパティの名前が「clear」です。
回り込ませたくないfloatを効かせた部分セレクタに「clear:both;」と記載することで、
回り込みが回避されちゃんと下に表示されるようになりました。
clear用のセレクタを用意しておくのも一つの方法のようですね。
これで一件落着です。
もう一つ本日の学習で印象に残ったのがNormalize.css と リセットCSS。
この二つの印象は、「よくわからないけど、初期設定?」
だったのですが、
必要最低限の調整だけを行なっているのがNormalize.css.
完全にcssをすべてリセットしてしまうのがリセットcss.のようです。
わざわざCSSを指定しなくても、hタグやpタグでマークアップすると、タグの意味に合ったデフォルトスタイルシートが効いてmarginだったりテキストが太字になったりします。
Normalize.css は、ブラウザ間の誤差をなくして補正(ノーマライズ)してくれるだけですので、デフォルトスタイルシートはそのまま適用されます。
リセット.css はその名の通り余白が一切なくなる、まさに 壁に文字がぴったりくっついている、という感じになります。
動画を見ながらひたすら打ち込む!という勉強法では なかなか理屈で覚えられない、と考えてしまいましたが、
体で覚える=頭にも伝わると本日実感できました。
明日も頑張ります!

関連記事

コメント

この記事へのトラックバックはありません。