レッスンお疲れさまでした。
本日は、HTML、CSSに関して行いました。
フロートを使った横並びのレイアウトに関して
いきなり細かな部分も含めて作っていくのではなく、まずは大まかな枠組みを作ってから、細分化していきましょう。
大まかな枠組みを作ってから細分化していくことで、フロートの解除タイミングが明確になり、clearfixのテクニックを使った親要素でクリアする方法が使えることがわかってくるはずです。
フロートの解除がうまくいかないと全体のレイアウトが崩れてしまい、無理に直すと収拾がつかなくなってしまいます。
HTMLとCSSに関して
・HTMLは、文章構造を表すもの。
・CSSは、見た目のデザインを表すもの。
です。
HTMLを制作する時は文章構造を基にタグを使いましょう。
articleタグは完結した記事なので、
「野菜を切ります」
「野菜を炒めます」
「お皿に盛りつけます」
の3つは、野菜炒めの作り方を示したというひとつの完結した記事として考えることができるので、切る、炒める、盛りつけるをarticleタグで囲ってあげるのが良いでしょう。
それに対し、
「野菜炒めの作り方」
「バケツプリンの作り方」
「おいしいカレーの作り方」
の3つは、それぞれ別の料理の作り方なので、この3つをひとつのarticleタグで囲うのはあまり良いとは言えないでしょう。
住所と地図があった場合、住所と地図はセットになるのでsectionタグで囲ってあげるのが良いでしょう。
関連性のあるもののひとかたまりはsectionタグ、特に関連性はないがデザイン上ひとかたまりにしたい時はdivタグとすれば良いでしょう。
なお、sectionタグには見出しをつけます。
マウスカーソルが重なった時は、hoverという擬似要素を使います。
a:hover{ color: red; }
とすれば、aタグ部分にマウスカーソルが重なった時に、文字の色が赤くなります。
画像を使ったボタンの場合、通常時のボタン画像とカーソルが重なった時のボタン画像の2つを用意して切り替えてあげる方法もありますが、2つの画像を上下に並べてひとつの画像として、カーソルが重なった時に画像の表示位置を上下にずらしてあげることで、画像が切り替わったように見せる方法もあります。