スタイルシートでリスト要素をセンタリング＋ボタンぽいデザインをつくる
リスト要素をスタイルシート（CSS）でセンタリングしてボタンぽいものをつくる、というデザインを仕事？でやりました。『要素をスタイルシートでセンタリング～』はナビゲーションバーなどの実装で必要になることがありますが、毎回忘れてしまうのでメモっておきます。
完成イメージ
HTMLソース*1
HTMLソースは至ってシンプルです。divとul、li要素のみ。
<div class="centered">
<ul class="labelblock">
<li class="wakubase wakuhidari">リンク１</li>
<li class="wakubase wakunaka">リンク２</li>
<li class="wakubase wakunaka">リンク３</li>
<li class="wakubase wakunaka">リンク４</li>
<li class="wakubase wakunaka">リンク５</li>
<li class="wakubase wakumigi">リンク６</li>
</ul>
</div>
スタイルシートのソース
スタイルシートはクラスごとにメモしておきます。
ul要素のlabelblockクラス
リストをセンタリングするため、positionを「relative」、leftを「50%」、floatを「left」にします。『相対位置で、左寄せ、配置を左から50%＝画面の中心』とします。paddingとmarginは余計なスペースをつくらないために記述しています。
ul.labelblock {
position: relative;
left: 50%;
float: left;
padding: 0px;
margin: 0px;
}
li要素のwakubaseクラス
li要素の基準となるクラスです。positionを「relative」、leftを「-50%」、floatを「left」にします。『相対位置で、左寄せ、-50%』とします。相対指定のため、基準（画面の中心）から左に-50%ずれるのでリスト要素が中心に配置されます。paddingはボタンぽい大きさにするため、よこならびのリストにするのでdisplayを「inline-block」で指定しています。その他はデザイン用なのでどうでも良い*2です。
li.wakubase {
position: relative;
left: -50%;
float: left;
padding: 4px 8px 4px 8px;
display: inline-block;
color: #909090;
background-color: #EFEFEF;
box-shadow: 0px -10px 4px 0px rgba(0, 0, 0, 0.09) inset;
cursor: pointer;
}
ボタンぽいデザイン用のliクラス
li要素の基準クラス、wakubaseにかぶせるようにデザイン用のli向けのクラスを作成します。wakuhidariクラス＝ボタンの左端、wakunakaクラス＝ボタンの中心部分、wakumigiクラス＝ボタンの右端となります。wakubase:hoverはマウスを載せた時のデザイン変更用です。border-radiusを設定することで、左右を丸くしています。
li.wakuhidari {
border-radius: 10px 0px 0px 10px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}li.wakunaka {
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}li.wakumigi {
border-radius: 0px 10px 10px 0px;
border: 1px solid #CCCCCC;
}li.wakubase:hover {
color: #FFFFFF;
background-color: #CCCCCC;
}
スクロールバーを抑止するdivのcenteredクラス
重要なクラスです。ul要素を画面の中心（50%地点）としているため、画面に表示されていませんが、50%右にはみ出ています。そのため、overflowを「hidden」として、はみ出た部分を表示しないようにします。指定しない場合、ブラウザの横スクロールバーが表示されてしまいます。
.centered {
position: relative;
overflow: hidden;
margin: 0px;
}
参考
以下のページを参考につくりました。floatうんぬんの説明はこちらを見たほうが良さげです。
