意外とこういうテンプレート作っておくと便利かもしれないということ。
基本のhtml
col_* の * に2～4の数字を入れるよ。
<div class="col_*">
<div>
ここに内容
</div>
<div>
ここに内容
</div>
<div>
ここに内容
</div>
<div>
ここに内容
</div>
<div>
ここに内容
</div>
<div>
ここに内容
</div>
</div>2カラム
/* 2カラム */
*, *:before, *:after {
box-sizing: border-box;
}
.col_2{
width: 100%;
display: flex;
display: -ms-flexbox; /* IE10 */
flex-wrap: wrap;
-ms-flex-wrap: wrap; /* IE10 */
background-color: #005693; /* 背景の色 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_2 > div{
width: 50%;
padding: 10px;
}
@media screen and (max-width: 640px) {
.col_2 > div{
width: 100%;
}
}3カラム
/* 3カラム */
*, *:before, *:after {
box-sizing: border-box;
}
.col_3{
width: 100%;
display: flex;
display: -ms-flexbox; /* IE10 */
flex-wrap: wrap;
-ms-flex-wrap: wrap; /* IE10 */
background-color: #005693; /* 背景の色 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_3 > div{
width: 33.33333%;
padding: 10px;
}
@media screen and (max-width: 1090px) {
.col_3 > div{
width: 50%;
}
}
@media screen and (max-width: 480px) {
.col_3 > div{
width: 100%;
}
}4カラム
/* 4カラム */
*, *:before, *:after {
box-sizing: border-box;
}
.col_4{
width: 100%;
display: flex;
display: -ms-flexbox; /* IE10 */
flex-wrap: wrap;
-ms-flex-wrap: wrap; /* IE10 */
background-color: #005693; /* 背景の色 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_4 > div{
width: 25%;
padding: 10px;
}
@media screen and (max-width: 1090px) {
.col_4 > div{
width: 33.33333%;
}
}
@media screen and (max-width: 480px) {
.col_4 > div{
width: 50%;
}
}