今回はレスポンシブ対応について学んだことをまとめていきます！
今まで作ってきた課題01（以下の動画のサイト）のスマホ版のコーディングをしていきます。
何から何まで載せてしまうとスクール的にちょっとあれかな…と思うので、随所の投稿になってしまうのですが、お付き合いいただけますと幸いです。
viewport を指定する
『viewport』って？
・モニターの横幅を指定できる。指定しないと表示がスマホの画面に収まらない。
・HTMLのheadタグの中に指定すること。
・スマホのコーディングをするときは必須！
【HTML】（他のタグは省略してます）
<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
</head>
詳しくはこちらののサイトを参照にさせていただきます。
ブレイクポイントを指定する
『ブレイクポイント』って？
・PC・スマホ・タブレットの切り替えるポイントを決める。
・そのサイトのユーザーが持つデバイスに合わせること。
・おすすめは 横560px×縦960pxとのこと*
*日本でよく使われているスマホのサイズから割り出した数字。こちらののサイトを参照にさせていただいてます。
【CSS】例）最大559pxまで効くCSS
@media (max-width: 559px) {
（この中にスマホ用のプロパティを書く）
}
メインビジュアルをトリミングする
メインビジュアルの画像を次の手順でいい感じにスマホサイズにします。
CSSのプロパティで、
①画像の幅と高さを指定する
②比率をキープしたまま画像のトリミングする
③②の画像の配置を決める（今回はMacを強調したいので右）
【CSS】
@media (max-width: 559px) {
.mainvisual-img {
width: 100vw;
height: 100vw;
object-fit: cover; ←②
object-position: right; ←③
}
}
3つ横並びのブロックを縦1列に変える
続いて、次の手順で3つのぎゅっとなってしまったブロックを縦一列にします。
CSSのプロパティで、
①横並びのブロックを縦一列に変える
②左に詰まっているので中央に揃える
【CSS】
@media (max-width: 559px) {
.about-contents {
flex-direction: column; ←①縦一列
align-items:center; ←②中央に
}
}
”flex-direction”の代わりに”display: block;”だとダメ？
display:flex; で指定したその他のFlexboxの便利な機能がきかなくなるのでNG
もう一つ、ハンバーガーメニューの作り方もまとめようと思ったのですが、長くなってしまうので別記事にしようと思います。完成まであと少し！がんばります！
ここまでお読みいただきありがとうございました◎
コメント