Result
Download
Reset
◀︎
▶︎
<html lang="ja"><meta charset="utf-8"> <meta name="viewport"content="width=device-width,initial-scale=1.0"> <title>レスポンシブ・レイアウト - 1</title> <style> .メディア_ボックス{display:grid; grid-template-columns:repeat(4,100px); gap:10px; justify-content:center;} .メディア_ボックス img{width:100px; height:100px;} @media(max-width:600px){.メディア_ボックス{grid-template-columns:repeat(2,100px);}} </style> <div class="メディア_ボックス"> <img src="01.png"alt="ハンド・ツール"> <img src="02.png"alt="ズーム・ツール"> <img src="03.png"alt="長方形・ツール"> <img src="04.png"alt="プリント・タイリング・ツール"> </div> </html>