模写コーディング1-2

1-1のレスポンシブ版

左：元サイト　右：模写

header

・タイトルロゴとナビが縦に並んでいるので、flex-direction: column; で縦並びに

・PCサイズでheightを指定していたため、height: auto; をつけることで縦の高さを自動的に合わせる

・インスタの画像のwidthを指定

・元サイトでは　最初のli要素を左詰め・余白なし、それ以外のli要素は左に余白を指定してた

mainvisual

・PC版とレスポンシブで画像を切り分ける場合はpictureタグを使う

・pictureタグ内に以下のように書くと適用される
<source media="(max-width: 600px)" srcset="img/mainvisual-sp.jpg">

section（#about）

・基本余白の調整くらい

section（#works）

・画像を縦積みで配置。flex-wrap: wrap; が効いてるからレスポンシブにしたとき縦積みになっているが、flexboxなので flex-direction: column; を指定してあげる

section（#news）

・元サイトはニュース一覧をflexboxで対応していたため、その場合は flex-direction: column; で縦積みにする

section（#contact）

・元サイトではフォームをflexboxで対応していたため、その場合は flex-direction: column; で縦積みにする

footer

・特に対応なし

感想

今後はflexboxをうまく活用できるようにする。