【CSS】画像を重ねて横並びにする方法｜スマホでは2列に切り替え
acquiesce.inc
CSS Gridを使って、画像を少しずつ重ねながら横並びに配置する方法を紹介します。PC・タブレットでは4列に並べた画像を重ねて表示し、スマートフォンでは重なりを解除して2列に切り替えます。制作工程やサービスの流れ、手順紹介などに活用できるレスポンシブ対応のレイアウトを、HTMLとCSSのサンプルコード付きで解説します。
HTML サンプル
４つのパーツが横並びになるコードを記載します。
<ul class="flow-unit">
<li>
<img src="flowimg001.png" alt="流れ1">
<h4>流れ01</h4>
<p>流れ01の説明が入ります。</p>
</li>
<li>
<img src="flowimg002.png" alt="流れ2">
<h4>流れ02</h4>
<p>流れ02の説明が入ります。</p>
</li>
<li>
<img src="flowimg003.png" alt="流れ3">
<h4>流れ03</h4>
<p>流れ02の説明が入ります。</p>
</li>
<li>
<img src="flowimg004.png" alt="流れ4">
<h4>流れ04</h4>
<p>流れ02の説明が入ります。</p>
</li>
</ul>コピペで使えるCSSサンプル
PCサイズでは画像を重ねるが、スマホサイズでは見やすさを優先して重ねないレイアウトにする
/* PC・タブレットで4列 */
ul.flow-unit {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
padding: 0;
list-style: none;
}
ul.flow-unit > li {
min-width: 0;
}
ul.flow-unit > li:not(:first-child) {
margin-left: -16px;
}
.flow-unit h4{
text-align: center;
font-weight: bold;
}
ul.flow-unit img {
display: block;
width: 100%;
height: auto;
}
/* スマホ：2列 */
@media (max-width: 767px) {
ul.flow-unit {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
ul.flow-unit > li {
margin-left: 0;
}
}
