Private code

レスポンシブでの横並びのBOX方法 2列

<div class="col_2"> <div> <p class="btn taC mt30"><a class="btn-type02-1" href="[getHome]/experience/">上級者及び専門家対象コース<br>(音大受験生含む)</a></p> </div> <div> <p class="btn taC mt30"><a class="btn-type02-1" href="[getHome]/experience/">20才以上の入門<br>初心者および中級者</a></p> </div> <div> <p class="btn taC mt30"><a class="btn-type02-1" href="[getHome]/experience/">新設<br>スチューデントコース</a></p> </div> <div> <p class="btn taC mt30"><a class="btn-type02-1" href="[getHome]/experience/">特別コース <br>M・A・Sテクニック<br>(身体と会話するストレッチ&呼吸法)</a></p> </div> <div> <p class="btn taC mt30"><a class="btn-type02-1" href="[getHome]/experience/">新設キッズコース</a></p> </div> </div> 【css 2列】 *, *:before, *:after { box-sizing: border-box; } .col_5{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_5 > div{ width: 20%; padding: 10px; } .col_5 > div > div{ position: relative; overflow: hidden } @media screen and (max-width: 960px) { .col_5 > div{ width: 25%; } } @media screen and (max-width: 480px) { .col_5 > div{ width: 33.33333%; } } 【css ボタン】 .btn-type02-1 { font-size: 18px; font-size: 1.8rem; display: inline-block; width: 400px; text-align: center; position: relative; background: #3D1408; border: 2px solid rgba(255, 255, 255, .6); color: #fff; line-height: 1.1; padding: 1em 0; z-index: 1; overflow: hidden; .mt30 { margin-top: 30px!important; } .taC { text-align: center!important }
Back to Home