読者です 読者をやめる 読者になる 読者になる

スタイルシートでリスト要素をセンタリング+ボタンぽいデザインをつくる

 リスト要素をスタイルシートCSS)でセンタリングしてボタンぽいものをつくる、というデザインを仕事?でやりました。『要素をスタイルシートでセンタリング~』はナビゲーションバーなどの実装で必要になることがありますが、毎回忘れてしまうのでメモっておきます。

 

完成イメージ

f:id:suwork:20140821232300p:plain

 

HTMLソース*1

 HTMLソースは至ってシンプルです。divとul、li要素のみ。

<div class="centered">
  <ul class="labelblock">
   <li class="wakubase wakuhidari">リンク1</li>
   <li class="wakubase wakunaka">リンク2</li>
   <li class="wakubase wakunaka">リンク3</li>
   <li class="wakubase wakunaka">リンク4</li>
   <li class="wakubase wakunaka">リンク5</li>
   <li class="wakubase wakumigi">リンク6</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うんぬんの説明はこちらを見たほうが良さげです。

floatで並べたリストのセンタリング - Weblog - Hail2u.net

*1:クラス名は適当です。気にしないように

*2:適切じゃない方の適当