６ステップでマスターする 「最新標準」HTML CSSデザイン 2日目

今日は　６ステップでマスターする　「最新標準」HTML CSSデザイン　の第3章を学習しました。

今日の学習内容は一昨日作ったトップページのヘッダー部分とフッター部分です。

この本でこれまでに使われてるコードはどれも簡単なものばかりだけど、ものすごく効果的に使われてるように感じました。例えばフッター部分のフレックスボックスでのレイアウトとか。

ヘッダー部分はフレックスボックスをメディアクエリと絡めながら入れ子にして使うという、今まで使ってた参考書よりも高度な使い方をしていて最初は理解が追いつきませんでした(笑)

機能も書いたのですがこの本ではスマホファーストな書き方なのですが、この書き方の方が直感的に理解しやすいのが良いところだと思います。

あと他の参考書と違うなと感じた点は作例のサイトがトータル的に設計されていてより実際のサイトに近い作りにデザインされてるなと感じました。

だから使いまわせるコードは使いまわす書き方とか color: inherit; や currentColor; といった値を使って効率的に書いていく手法が学べたのは嬉しいです。

あとハンバーガーメニューが登場したました。

jQueryを利用しての実装だったのですが、Javascript や jQuery はまだ学習していないのでコピペで済ませました。

今日の学習時間は2時間半で第3章を学習しました。

今日の学習結果