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として編集記載は致しません。