【CSS】スマホ表示時に画像配置を変更する方法
スマホ表示時(レスポンシブ時)に画像配置を変更する方法をサクッとご紹介! 言葉だと説明しにくいのですが、PC表示だと左に「タイトル」と「説明文」右に「画像」を表示、スマホ表示時だと「タイトル」「画像」「説明文」の順番に表示する方法です。
画像が右のレスポンシブレイアウト
表示例
タイトル部分
メイン部分(こちらに説明文を入力。)
テスト
テスト
テスト
コード
HTML
<div class="container-img-right"> <div class="container-img"> 画像 </div> <div class="container-title"> タイトル </div> <div class="container-main"> メイン </div> <div class="container-footer"> フッター </div> </div>
CSS
/* 全体 */ .container-img-right { display: grid; grid-template-columns: 50% 50%; grid-template-rows: 90px 5fr 1fr; -ms-display: grid; margin: 20px 0; } /* 画像 */ .container-img-right .container-img { grid-column: 2 / 3; grid-row: 1 / 3; } .container-img-right .container-img img{ margin: 0; } /* タイトル */ .container-img-right .container-title { grid-column: 1 / 2; grid-row: 1 / 2; padding-right: 50px; } /* メイン */ .container-img-right .container-main { grid-column: 1 / 2; grid-row: 2 / 3; padding-right: 50px; } /* フッター */ .container-img-right .container-footer { grid-column: 1 / 3; grid-row: 3 / 4; text-align: center; } /* レスポンシブ */ @media screen and (max-width: 1100px) { /* 全体 */ .container-img-right { grid-template-columns: 100%; grid-template-rows: 90px; } /* 画像 */ .container-img-right .container-img { grid-column: 1 / 2; grid-row: 2 / 3; } /* タイトル */ .container-img-right .container-title { grid-column: 1 / 2; grid-row: 1 / 2; padding-right: 0; } /* メイン */ .container-img-right .container-main { grid-column: 1 / 2; grid-row: 3 / 4; padding-right: 0; } /* フッター */ .container-img-right .container-footer { grid-column: 1 / 2; grid-row: 4 / 5; } } /* 色変更---------- */ /* 画像 */ .container-img-right .container-img { background-color: #61AE24; } /* タイトル */ .container-img-right .container-title { background-color: #F02475; } /* メイン */ .container-img-right .container-main { background-color: #F27435; } /* フッター */ .container-img-right .container-footer { background-color: #00A1CB; }
画像が右のレスポンシブレイアウト
表示例
タイトル部分
メイン部分(こちらに説明文を入力。)
テスト
テスト
テスト
コード
HTML
<div class="container-img-left"> <div class="container-img"> 画像 </div> <div class="container-title"> タイトル </div> <div class="container-main"> メイン </div> <div class="container-footer"> フッター </div> </div>
CSS
/* 全体 */ .container-img-left { display: grid; grid-template-columns: 50% 50%; grid-template-rows: 90px 5fr 1fr; -ms-display: grid; margin: 20px 0; } /* 画像 */ .container-img-left .container-img { grid-column: 1 / 2; grid-row: 1 / 3; } .container-img-left .container-img img{ margin: 0; } /* タイトル */ .container-img-left .container-title { grid-column: 2 / 3; grid-row: 1 / 2; padding-left: 50px; } /* メイン */ .container-img-left .container-main { grid-column: 2 / 3; grid-row: 2 / 3; padding-left: 50px; } /* フッター */ .container-img-left .container-footer { grid-column: 1 / 3; grid-row: 3 / 4; text-align: center; } /* レスポンシブ */ @media screen and (max-width: 1100px) { /* 全体 */ .container-img-left { grid-template-columns: 100%; grid-template-rows: 90px; } /* 画像 */ .container-img-left .container-img { grid-column: 1 / 2; grid-row: 2 / 3; } /* タイトル */ .container-img-left .container-title { grid-column: 1 / 2; grid-row: 1 / 2; padding-left: 0; } /* メイン */ .container-img-left .container-main { grid-column: 1 / 2; grid-row: 3 / 4; padding-left: 0; } /* フッター */ .container-img-left .container-footer { grid-column: 1 / 2; grid-row: 4 / 5; } } /* 色変更---------- */ /* 画像 */ .container-img-left .container-img { background-color: #61AE24; } /* タイトル */ .container-img-left .container-title { background-color: #F02475; } /* メイン */ .container-img-left .container-main { background-color: #F27435; } /* フッター */ .container-img-left .container-footer { background-color: #00A1CB; }