# レスポンシブルデザインの手引 CSSのみでレスポンシブルデザインを作るときの手引 メディアクエリというものを利用する ## PCは横2列、タブレット、スマホは縦1列 flex boxを利用して横に２つコンテンツが並ぶようなレイアウトを作る。 ### 普通のHTML ```HTML <style> section.flex.non-responsive{ display:flex; flex-direction: row;//子要素を横並びにする。 } section div{ width: 50%; padding: 24px; color: #fff; } </style> <section class="flex non-responsive"> <div style="background-color: red"> 左にあるコンテンツ </div> <div style="background-color: blue"> 右にあるコンテンツ </div> </section> ``` 結果↓ <style> section.flex.non-responsive{ display:flex; flex-direction: row; margin-bottom: 24px; } section div{ width: 50%; padding: 24px; color: #fff; } </style> <section class="flex non-responsive"> <div style="background-color: red"> 左にあるコンテンツ </div> <div style="background-color: blue"> 右にあるコンテンツ </div> </section> 左右にボックスが並ぶようなレイアウトになっていると思う。 ## レスポンシブル化 ```HTML <style> section.flex.responsive{ display:flex; flex-direction: row;//子要素を横並びにする。 } section div{ width: 50%; padding: 24px; color: #fff; } @media screen and (max-width: 800px){//800pxを割ったら section.flex.responsive{ flex-direction: column;//子要素を縦並びにする。 } } </style> <section class="flex responsive"> <div style="background-color: red"> 左にあるコンテンツ </div> <div style="background-color: blue"> 右にあるコンテンツ </div> </section> ``` 結果↓(画面幅を小さくするなどして、800pxを割ると縦並びになる。) <style> section.flex.responsive{ display:flex; flex-direction: row; margin-bottom: 24px; } section div{ width: 50%; padding: 24px; color: #fff; } @media screen and (max-width: 800px){ section.flex.responsive{ flex-direction: column; } section div{ width: 100%; } } </style> <section class="flex responsive"> <div style="background-color: red"> 左にあるコンテンツ </div> <div style="background-color: blue"> 右にあるコンテンツ </div> </section> ## メディアクエリ(@media~)の書き方 ### 基本 ```CSS //764px以下で適用されるCSSが書きたい時 //通常時のCSS（764px以上1500px以下の画面幅） .title{ font-size: 24px; } //764px以下で適用されるCSS（764px以下） @media screen and (max-width: 764px){ .title{ font-size: 16px;//764pxを割るとfon-sizeが16pxに上書きされる。 } //1500px以上で適用されるCSS @media screen and (min-width: 1500px){ .title{ font-size: 36px;//800px以上になるとfon-sizeが36pxに上書きされる。 } } ``` ## 注意 ### 1：動かない書き方 ```CSS @media screen (max-width: 320px){ .title{ font-size: 18px; } } @media screen (max-width: 764px){ .title{ font-size: 24px; } } //実行して画面幅を320px以下にしてもfont-sizeは24pxのままになる。 ``` ##### 理由： 先に320px以下の記述をして、後に764px以下の記述が来ているので、320px以下でも764px以下のための記述が優先されてしまうため。 ##### 解消方法1 ```CSS @media screen (max-width: 764px){ ... } @media screen (max-width: 320px){ ... } //影響範囲の大きいものから先に書く（当然だがmin-width指定の時は逆） ``` ##### 解消方法2 ```CSS @media screen (max-width: 320px){ //320px以下に適用 } @media screen (max-width: 764px) and (min-width:321px){ //321px以上764px以下に適用 } //andでmin-widthとmax-widthをつなげることで範囲を絞ることができる。 ``` ### 2:冗長的になる書き方 ```CSS //PCサイズ div{ width: 50%; padding: 24px; background-color: #333; color: #FFF; } //タブレットサイズ @media screen (max-width: 764px){ div{ width: 100%; padding: 12px 5px; background-color: #333;//変わらない部分を重複して書かない color: #FFF;//変わらない部分を重複して書かない } } ``` ## 応用 ```HTML <!--HTML--> <section> <div class="tablet-invisible"> タブレットのみ表示しない </div> <div class="mobile-vinvisible"> モバイルのみ表示しない </div> </section> ``` ```CSS //CSS section{ display: flex; flex-direction: row; } section div{ width: 50%; } @media screen (max-width: 764px){ .tablet-invisible{ display: none;//764px以下で表示しない。 } @media screen (max-width: 480px){ .mobile-invisible{ display: none;//480px以下で表示しない。 } } ``` こういうこともできる。 ## お作法とか 実際にはこんな感じになる。 ### パターン１：１つのファイルに全盛り ```CSS //style.css @charset "utf-8"; //PC対応 html{ ... } //タブレット対応 @media screen (max-width: 764px){ html{ ... } } //スマホ対応 @media screen (max-width: 480px){ html{ ... } } ``` ### パターン2：分ける ```CSS //style.css html{ ... } ``` ```CSS //tablet.css @media screen (max-width: 764px){ html{ ... } } ``` ```CSS //mobile.css @media screen (max-width: 480px){ html{ ... } } ``` ```HTML <!--HTML側の読み込み--> <html lang="ja"> <head> <link rel="stylesheets" rel="./style.css"> <link rel="stylesheets" rel="./tablet.css"> <link rel="stylesheets" rel="./mobile.css"> </head> <body> ... </body> </html> まあメディアクエリについてはこういう感じ（伝わった？）