ブロックメニューの完成例
ブロックメニューのhtml
<div class="flexbox">
<div class="block"><a href="#">
<img src="画像リンク">
<p>ツルのブロック1</p>
</a>
</div>
<div class="block"><a href="#">
<img src="画像リンク">
<p>ツルのブロック2</p>
</a>
</div>
<div class="block"><a href="#">
<img src="画像リンク">
<p>ツルのブロック3</p>
</a>
</div>
<div class="block"><a href="#">
<img src="画像リンク">
<p>ツルのブロック4</p>
</a>
</div>
</div>
ブロックメニューのCSS
.block {
border-radius: 0px;
background: #f9d2de;
padding: 20px;
margin: 10px;
text-align: center;
width:250px !important;
color:#fff;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.block a{
color:#a90837;
}
.block a:hover{
color:#fff;
opacity:0.5;
}
.flexbox{
justify-content: center;
}
.flexbox a:link{
display:initial;
}
@media ( min-width : 600px ){
.flexbox {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.block {
width: 25%;
}
}
コメント