3×3リンクボタン

DEMO

HTMLとCSSをまとめてコピーする

HTML

		<div style="width: 100%;max-width: 640px; display: flex;justify-content: space-between;margin: 0 auto 0.5%;">
	<a href="リンク先" style="width: 33%;"><img src="画像URL" width="100%"></a>
	<a href="リンク先" style="width: 33%;"><img src="画像URL" width="100%"></a>
	<a href="リンク先" style="width: 33%;"><img src="画像URL" width="100%"></a>
</div>
<div style="width: 100%;max-width: 640px; display: flex;justify-content: space-between;margin: 0 auto 0.5%;">
	<a href="リンク先" style="width: 33%;"><img src="画像URL" width="100%"></a>
	<a href="リンク先" style="width: 33%;"><img src="画像URL" width="100%"></a>
	<a href="リンク先" style="width: 33%;"><img src="画像URL" width="100%"></a>
</div>
<div style="width: 100%;max-width: 640px; display: flex;justify-content: space-between;margin: 0 auto 0.5%;">
	<a href="リンク先" style="width: 33%;"><img src="画像URL" width="100%"></a>
	<a href="リンク先" style="width: 33%;"><img src="画像URL" width="100%"></a>
	<a href="リンク先" style="width: 33%;"><img src="画像URL" width="100%"></a>
</div>

		
HTMLをコピーする

HTML説明

リンク先の設定方法
「リンク先(2.3.4.7.8.9.12.13.14行目)」のテキストを任意のURLに書き換えてください。

ボタン画像の設定方法
「画像URL(2.3.4.7.8.9.12.13.14行目)」のテキストを任意の画像のURLに書き換えてください。

CSS

		
		
cssをコピーする

CSS説明

スタイルというものを別書きでなく、HTMLに直接書き込んでいるので、
CSSとして編集記載は致しません。