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

この本での学習も今日で4日目となり第5章を学習しました。

今日はインスタグラムっぽいタイル型に写真がレイアウトされたページの作り方を学習しました。

 flexboxを利用して実現するのですが、flexプロパティを使用して孫要素の高さを揃えるというのがこうすれば揃うよとしか解説がなくて理解できませんでした。

ググると答えが。

Flexboxにはデフォルトでalign-items: stretchが設定されているからだそうです。

ふむー。

あとはstyle属性というのを初めて知りました。

最初見たときはなんでhtmlタグの中にスタイルシートが書かれてるの？って頭が混乱しました。

解説を読まなかったので。

あとはタイル型のレイアウトですがメディアクエリを使用しないでFlexboxだけで画面サイズによってレイアウトを変える手法を学習しました。

どんどん内容が高度になってきますね。

今日学んだところですがもうすでに頭の中から零れ落ちています。

そういえば、このタイル型のレイアウトは 1冊ですべて身につくHTML&CSSとWebデザイン入門講座 では gridプロパティをつかって実装したんですよね。

おなじデザインを実現するのにもいろいろな手法があるんですね。

今日の学習時間は2時間でした。

今日の学習結果