Skip to content

Instantly share code, notes, and snippets.

@CHUKK
Last active May 4, 2018
Embed
What would you like to do?
Flex Banner Block
<div style="margin: auto; width: 948px;">
<h2 style="background-color: hotpink; padding: 10px; text-align: center; margin-top: 0; margin-bottom: 0; color: white;">見出し</h2>
<div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
<div style="width: 316px; height: 200px; text-align: center; overflow: hidden;"><a href="商品・カテゴリへのリンク" style="display: block; width: 100%;"><img src="http://placeimg.com/300/200/animals" alt="" style="vertical-align: bottom; width: 100%;"></a></div>
<div style="width: 316px; height: 200px; text-align: center; overflow: hidden;"><a href="商品・カテゴリへのリンク" style="display: block; width: 100%;"><img src="http://placeimg.com/300/300/arch" alt="" style="vertical-align: bottom; width: 100%;"></a></div>
<div style="width: 316px; height: 200px; text-align: center; overflow: hidden;"><a href="商品・カテゴリへのリンク" style="display: block; width: 100%;"><img src="http://placeimg.com/300/300/nature" alt="" style="vertical-align: bottom; width: 100%;"></a></div>
<div style="width: 316px; height: 200px; text-align: center; overflow: hidden;"><a href="商品・カテゴリへのリンク" style="display: block; width: 100%;"><img src="http://placeimg.com/300/300/animals" alt="" style="vertical-align: bottom; width: 100%;"></a></div>
<div style="width: 316px; height: 200px; text-align: center; overflow: hidden;"><a href="商品・カテゴリへのリンク" style="display: block; width: 100%;"><img src="http://placeimg.com/300/300/arch" alt="" style="vertical-align: bottom; width: 100%;"></a></div>
<div style="width: 316px; height: 200px; text-align: center; overflow: hidden;"><a href="商品・カテゴリへのリンク" style="display: block; width: 100%;"><img src="http://placeimg.com/300/300/nature" alt="" style="vertical-align: bottom; width: 100%;"></a></div>
<div style="width: 316px; height: 200px; text-align: center; overflow: hidden;"><a href="商品・カテゴリへのリンク" style="display: block; width: 100%;"><img src="http://placeimg.com/300/300/people" alt="" style="vertical-align: bottom; width: 100%;"></a></div>
<div style="width: 316px; height: 200px; text-align: center; overflow: hidden;"><a href="商品・カテゴリへのリンク" style="display: block; width: 100%;"><img src="http://placeimg.com/300/300/tech" alt="" style="vertical-align: bottom; width: 100%;"></a></div>
<div style="width: 316px; height: 200px; text-align: center; overflow: hidden;"><a href="商品・カテゴリへのリンク" style="display: block; width: 100%;"><img src="http://placeimg.com/300/300/grayscale" alt="" style="vertical-align: bottom; width: 100%;"></a></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment