WordPressによるレスポンシブウェブ
* メニューボタン

作成のポイント

Width = px
横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行目:パソコン用メディアクエリー定義の修了
Responsive Web using WordPress By K.Nagai   Counter : 5867