[Web] CSS3を活用したパン屑リストを作成してみた

画像ファイルを用いずに、CSSを用いて以下図のようなパン屑リストを作成してみました。
CSS3の内容も用いてますので、モダンブラウザーでの動作となります。
今日は、その実装方法をブログに書きたいと思います。


http://www.yoheim.net/labo/html5/css3/breadList.html

パン屑リストの土台となるHTMLを構築する

パン屑リストを構成するHTML要素は、ul, li, aタグで構成しました。

<ul class="bread">
  <li><a href="#">List001</a></li>
  <li><a href="#">List002</a></li>
  <li><a href="#">List003</a></li>
  <li class="current"><a href="#">List004</a></li>
  <li><a href="#">List005</a></li>
</ul>

この後の作業で上記HTMLにCSSを適用したいので、breadやcurrentといったクラス属性を定義しています。

パン屑リストとして表現する為のCSS

まずは、li要素を立て並びから、横並びにとして、a要素をブロックとして表現するようにせっていします。
今回の色の設定は、灰色を基調とするようにしています。

.bread {
  list-style : none;
  overflow : hidden;
}
.bread li {
  float : left;
  line-height : 60px;
}
.bread li a {
  display : block;
  float : left;
  padding : 0 40px 0 50px;
  font-weight : bold;
  color : #666;
  text-decoration : none;
  background: -moz-linear-gradient(left, #EDEDED, #CCCCCC);
  background: -webkit-linear-gradient(left, #EDEDED, #CCCCCC);
  background: -ms-linear-gradient(left, #EDEDED, #CCCCCC);
  background: linear-gradient(left, #EDEDED, #CCCCCC);
  background-color : #CCCCCC;
  text-shadow : 1px 1px 0 #FFFFFF;
}

ここまでの設定で、以下のようなパン屑リストが作成出来ます。




続いて、先端を尖らせて、よりパン屑リストっぽくするCSSを適用します。
ここではCSS3の、transform, ::before, ::after, contentなどを用いて、疑似要素に対して変形をかけます。

.bread li a::before {
  display : block;
  width : 15px;
  height : 30px;
  border-right : 5px solid #FFFFFF;
  margin : 0 -50px -30px auto;
  background-color : #CCCCCC;
  content : " ";
  -webkit-transform : skew(30deg);
  -moz-transform : skew(30deg);
  transform : skew(30deg);
}
.bread li a::after {
  display : block;
  width : 15px;
  height : 30px;
  border-right : 5px solid #FFFFFF;
  margin : -30px -50px 0 auto;
  background-color : #CCCCCC;
  content : " ";
  -webkit-transform : skew(-30deg);
  -moz-transform : skew(-30deg);
  transform : skew(-30deg);           
}

a::beforeとa::afterの疑似要素に対して、「content:" "」で空間を表現し、その空間に対して、 「transform : skew(degree)」で変形をかけることで、角が尖った部分を表現しています。


最後に、currentクラスの設定や、マウスホバー時の設定を追加しました。

.bread li.current a {
  color : #FFFFFF;
  background : linear-gradient(left, #E69A4F, #BA4A0A);
  background : -webkit-linear-gradient(left, #E69A4F, #BA4A0A);
  background : -moz-linear-gradient(left, #E69A4F, #BA4A0A);
  background : -ms-linear-gradient(left, #E69A4F, #BA4A0A);
  background-color : #BA4A0A;
  text-shadow : 1px 1px 0 #BA4A0A;
}
.bread li.current a::after, .bread li.current a::before {
  background-color : #BA4A0A;
}
.bread li a:hover {
  color : #FFFFFF;
  background : linear-gradient(left, #CCCCCC, #999999);
  background : -webkit-linear-gradient(left, #CCCCCC, #999999);
  background : -moz-linear-gradient(left, #CCCCCC, #999999);
  background : -ms-linear-gradient(left, #CCCCCC, #999999);
  background-color : #999999;
  text-shadow : 1px 1px 0 #999999;
}
.bread li a:hover::before, .bread li a:hover::after {
  background-color : #999999;
}

最後に

CSSはCSS3になって表現力が格段に上がったというお話を良く聞きます。 今回使った、transform, linear-gradient, ::after, ::before, contentなどは、表現力が上がったなぁと実感できる CSSの無いようだなぁと思っています。
CSSで面白いことが出来そうだったら、またブログに書ければ良いなぁ。
最後までお読み頂きましてありがとうございました！