はじめに
こんにちは。Tushiです。
今日は、Flexboxモデルの対応と先日作成した静的ページのサイトのレスポンシブ対応をしたいと思います。
Flexboxは今までfloatで要素を並びを変えていたものをもっと簡単に変えることができるCSSのレイアウトです。現場でも、floatよりもこちらのほうが主流とのことです。
レスポンシブ対応とは、スマホ・タブレットに応じて表示範囲を変えるように設定する対応のことです。スマホやタブレットの普及が当たり前になってる今、必須の設定になっていますよね。
それでは、１つずつ確認していきましょう！
Flexbox
Flexboxで主にできることは次の２つです。
１.並び向きを指定する。２.折り返しを指定する。
１.並び向きを指定する
→例えば、図のように親要素・子要素があったとして横並びさせたい子要素の親要素にdisplay: flex; を設定してあげれば、横並びになります。
ex: index.html style-sheet.css
<ul class="flex-list"> .flex-list {
<li class="li1">item1</li> display: flex;
<li class="li2">item2</li> }
<li class="li3">item3</li>
<li class="li4">item4</li>
</ul>
横並びにした要素をいっぱいに広げる
→ .flex-list {
display: auto;
}
2.文字の折り返し
文字の折り返しは、flex-wrap: wrap; を使用します。
ex: <ul class="flex-list">
<li class="li1">item1</li>
<li class="li2">item2</li>
<li class="li3">item3</li>
<li class="li4">item4</li>
</ul>
親要素→flex-list 子要素→li
stylesheet.css
flex-wrap: wrap; width: 50%;
} }
これで、上図のような折り返しができるようになります。
flex-direction
横に並べた要素を縦に並べます。例えば、「WEBサイト上では横並び表記だったのを、スマホでは縦にしたい。」なんてときに使えます。
親要素に flex-direction: column; にして、子要素に margin: 0 auto; を設定する
.flex-list { .flex-list li {
flex-direction: column; margin: 0 auto;
｝ }
レスポンシブ対応
viewpointの指定
まずはhead部分にviewpointを指定してあげます。これを指定することで、スマホやタブレットで表示サイズが変わっても、レイアウトが設定されるようになります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
なお、暗記する必要はありません。レスポンシブするときに、設定が必要だ、調べようくらいで理解しましょう！
なお、cssの読み込みを指定するときは、viewpointの下に必ず設定するようにしましょう！
幅の範囲とブレイクポイント＜どこで切り替えるかを決める値＞を決める。
@media (max-width: 1000px) {
/* h1のcolorをblueに指定してください */
h1 {
color: blue;
}
この場合だと、max-width 最大値 1000px以下であればh1タグの文字の色をblueにするという表記をしています。
次の場合はどうでしょうか。例えば、
h1 {
color: red;
}
@media (max-width: 1000px) {
/* h1のcolorをblueに指定してください */
h1 {
color: blue;
}
@media (max-width: 670px) {
/* h1のcolorをgreenに指定してください */
h1 {
color: green;
}
}
この場合だと、
→670px以下 文字色 green →671~1000px 文字色 blue 1000px~ 文字色 red
になります。
レイアウトを整える。
タブレット・スマホ版のレイアウトを整えるために、width: を設定するとレイアウトが崩れてしまうことがあります。
例えば、タブレット版でwidth: 25%; を指定した際、padding が左右にあると、枠からはみ出て下に回り込んでしまいます。
これを防ぐ方法を見ていきましょう！
これを防ぐには、box-sizing: border-box; を設定することで防ぐことができます。
box-sizingを使うと、width→padding+要素+border になります
通常だと、padding border が入らずwidth が反映されます。
marginはここに入らないことだけは気をつけましょう。
box-sizing: border-boxは通常、すべての要素に指定することが推奨されているので、
* {
box-sizing: border-box
}
となります。
重要！ floatで回り込んでいるレイアウトを直す
htmlにdivタグを追加して、cssにclear: left; を追加して適用させてあげる
サイズが大きくなっても、適切な大きさで収まるようにする。
max-width: 1170px; といった具合に設定する。
おわりに
flexboxモデルとレスポンシブ対応はいかがでしたでしょうか。
どちらも現場で使う必須の知識なので、わからなくなったら調べられるようにまとめてみました。
レイアウトが崩れた時や思いがけない挙動のときにどのcssが原因なのかまずはしっかり探っていきたいと思いました！
HTML・CSSは後日udemyでもじっくり学びます。
習得にはまだまだですが、これから毎日学習を継続して習慣化していきたいと思います。
それでは、また〜
