横3列・3要素
3つの要素のページ・各々画像と文章の3つボックスをパソコン表示の時、横3列に並べ、タブレット時は横に3行、スマホ時は1ボックス単位で縦に3個表示させるメディアクエリーの説明です。
ボックスの横3列(PC表示)配置は、 float を使わず display:flex を使用しています。
- 3つのボックスのHTML、順にメディアクエリー、フルードグリッド、フルードイメージ
・略・ ・略・
・略・ ・略・
・略・ ・略・
左のボックスのCSS
2014/11/27修正.box_3 {padding:8px; background-color:#ddd; border:solid 1px #000000; border-radius:5px; }
- メディアクエリー
/* *************** スマホ向けCSS *************** */ @media only screen and (max-width: 480px) { .box_3 {width:95%; font-size:0.875em; line-height:1.2em; display:block; margin:0 auto;} .box_3 img {display:block; margin:0 auto; width:95%;} .box_3 p {padding:10px 10px 0px 10px;} .box_3:nth-child(1) {margin-bottom: 10px; } .box_3:nth-child(2) {margin-bottom: 10px; } } /* *************** タブレット向けCSS *************** */ @media only screen and (min-width: 481px) and (max-width:768px) { .box3_all {max-width:768px; width:100%; font_size:0.875em; line-height:1.2em;} .box_3 {width:97.5%; overflow: auto;} .box_3:nth-child(1) {margin-bottom: 10px; } .box_3:nth-child(2) {margin-bottom: 10px; } .box_3 img {width:25%; float:left; margin-right:15px;} .box_3 p {width:100%;} } /* ************** MQ・パソコン向け *************** */ @media only screen and (min-width: 769px) { .box_3_all {width:100%; display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; justify-content: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center;} .box_3 {width:264px; overflow: auto;} .box_3:nth-child(2) {margin:0px 10px;} .box_3 img {width:264px; height:auto;} }
メディアクエリーの説明
スマホ部分
- 2行目:幅480pxまでのメディアクエリー定義の開始
- 3行目:ボックスの幅を最大に近い95%に
- 4~5行目:スマホは画面が小さいのでフォントサイズと行間を縮小
- 6~7行目:ボックスの中央配置
- 8~9行目:画像の中央配置
- 10行目:画像サイズを最大に近い95%に
- 11行目:ボックス内文章の位置揃え
- 12~13行目:ボックスが縦に並ぶので上下の余白
- 14行目:スマホ用メディアクエリー定義の修了
タブレット部分
- 17行目:幅481px~768pxまでのメディアクエリー定義の開始
- 18行目:最大幅を768pxに
- 19行目:18行目で最大幅768pxなので、幅100%に
- 20~21行目:スマホと同じ
- 22行目:ボックスの幅を最大に近い97.5%に
- 23行目:画像がボックスからはみ出さないように
- 24~25行目:スマホと同様にボックス上下に余白
- 26~28行目:画像の幅、左揃え、文章との右余白
- 29行目:ボックス内文章の100%表示
- 30行目:タブレット用メディアクエリー定義の修了
パソコン部分
- 32行目:幅769px以上のメディアクエリー定義の開始
- 33行目:最大幅を100%に
- 34行目:ボックスの新定義(float不要で各種の設定が出来る
- 34~37行目:各ブラウザのflex用パック指定 -webkit-flex;→safari、-moz-flex;→Firefox、-ms-flex;→Internet Explorer
- 38~41行目:ボックスを中央配置
- 42行目:各ボックスの幅指定(%は使えない)
- 43行目:ボックス間の余白
- 44行目:画像の表示幅指定
- 45行目:文章の表示幅指定
- 46行目:パソコン用メディアクエリー定義の修了