スマホサイト横並びナビ
この記事は2014年11月5日に書かれたもので、内容が古い可能性がありますのでご注意ください。
スマホサイトで横並びのボタンの作成に毎回手間取るので備忘録的にメモ。
サポートブラウザは以下を想定。
- ios 4以上
- andoid 2.3以上
htmlは以下の様な感じ。class=”btnType”でデザインする。
spanにclass名はいらないが、運用などで別のspanが追加されることの想定してとりあえず的に付けている。
labelに関しては、次の配置の際複数行の高さに対応するため、table-cellで上下中央にしている。
ただしheigthの高さが1行時の高さになるため、3行4行になるとキツイ。その場合はjsなどで対応した方がよいと思われる。
矢印アイコンはafterで、詳しい解説は省きます。
html
<p><a href="dummy.html" class="btnType1"><span class="label">ラベル</span></a></p> <p><a href="dummy.html" class="btnType2"><span class="label">ラベル</span></a></p>
css
.btnType1 {
display: block;
position: relative;
background-color: #fc3;
text-decoration: none;
}
.btnType1::after{
display: block;
content: "";
position: absolute;
right: 10px;
top: 50%;
margin-top: -7px;
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.btnType1 .label {
display: table-cell;
vertical-align: middle;
padding: 0 20px 0 10px;
width: 10000px;
height: 50px;
line-height: 1;
text-align: center;
}
.btnType2 {
display: block;
position: relative;
background-color: #fc3;
text-decoration: none;
}
.btnType2::after{
display: block;
content: "";
position: absolute;
left: 10px;
top: 50%;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #fff;
}
.btnType2 .label {
display: table-cell;
vertical-align: middle;
padding: 0 10px 0 20px;
width: 10000px;
height: 50px;
text-align: center;
}
配置についてはbtnPosTypeで配置するイメージ。divで囲っているが、本来ならulがいいかも。
html
<div class="btnPosType1"> <div class="col"><a href="dummy.html" class="btnType1"><span class="label">ラベル</span></a></div> <div class="col"><a href="dummy.html" class="btnType1"><span class="label">ラベル<br>ラベル</span></a></div> <!-- /.btnPosType1 --></div> <div class="btnPosType1"> <div class="col"><a href="dummy.html" class="btnType1"><span class="label">ラベル</span></a></div> <div class="col"><a href="dummy.html" class="btnType1"><span class="label">ラベル<br>ラベル</span></a></div> <div class="col"><a href="dummy.html" class="btnType1"><span class="label">ラベル</span></a></div> <!-- /.btnPosType1 --></div>
css
.btnPosType1 {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin-left: -10px;
padding-left: 10px;
}
.btnPosType1 .col {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
margin-left: 10px;
}
とりあえずこんな感じで完成。
ads
