ホーム >  JavaScript >  パンくずリストのグラフィカルなスタイル

投稿日：   ｜  最終更新日:

パンくずリストのグラフィカルなスタイル

JavaScriptjQuery

CSS3とjQueryを利用して、グラフィカルなパンくずリストを作ります。画像を一切使いません。jQueryは、IE8のバグ対応に利用します。ポイントは以下の通りです。

  • 「linear-gradient」でグラデーションを作る。
  • 「border」で矢印を作る。
  • 角を丸くする。

完成イメージ

パンくずリストを矢印の形にします。リストの最後は矢印にせず、文字を強調します。

jQ0021

  1. ファイル構成
  2. コード
  3. 解説

ファイル構成

ファイルをサイトのフォルダに配置します。サイトフォルダ名を「sample」とします。

※wordpress基準ですが、wordpressでなくても作成できます。

  • sample/
  • index.php
  • style.css
  • css/
  • sample.css
  • js/
  • common.js
  • vendor/
  • jquery.min.js

コード

index.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <link href="<?php echo get_stylesheet_directory_uri() . '/css/sample.css' ; ?>" rel="stylesheet" type="text/css" />
  <script src="<?php echo get_template_directory_uri() . '/js/jquery.min.js' ; ?>"></script>
  <script type="text/javascript" src="<?php echo get_template_directory_uri() . '/js/common.js' ; ?>"></script>
<?php wp_head(); ?>
</head>
<body>
  <div id="mainnavi">
    <div class="wrapper">
      <header>
        <!-- パンくず -->
        <ul id="pankuzulist">
          <li><a href="index.html">ホーム</a></li>
          <li><a href="#">アクセス</a></li>
          <li><strong>詳細</strong></li>
      <!-- パンくずここまで -->
      </header>
  </div><!-- wrapper end -->
</div><!-- mainnavi end -->
<?php wp_footer(); ?>
</body>
</html>

sample.css

@charset "UTF-8";
 
* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
li {
    list-style: none;
}
 
a img {
    border: none;
}
 
 
html {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #000;
    line-height: 120%;
    height: 100%;
}
 
body {
    padding: 0;
    margin: 0 auto;
    width: 1000px;
    position: relative;
    min-height: 100%;
    background: #FFF;
}

/*下層ページ共通ページフォーマット
-----------------------------------------*/
div[id|="mainnavi"] > div.wrapper {
	border-top: 1px solid #FFF;
	background: #FFF;
	position: relative;
		padding-top: 100px;
	padding-bottom: 20px;
}

div[id|="mainnavi"] > div.wrapper:after {
	content: "";
	display: block;
	clear: both;
}

/*下層ページ共通ナビゲーション
-----------------------------------------*/
div[id|="mainnavi"] > div.wrapper header {

}

div[id|="mainnavi"] > div.wrapper header div.wrapper {
	border-bottom: 1px solid #CCC;
	padding-bottom: 1px;
	margin: 0px 10px 10px;
	position: relative;
}

/*パンくずリスト
-----------------------------------------*/
#pankuzulist {
	background: #FFF;
	border: 1px solid #B0B0B0;
	border-radius: 5px;
	overflow: hidden;
	width: 980px;
	margin: 0 10px 20px;
}
 
#pankuzulist li {
	float: left;
	line-height: 1;
}

#pankuzulist a {
	padding: .7em 1em .7em 2em;
	float: left;
	text-decoration: none;
	color: #15201E;
	position: relative;
	background-color: #c2c6cb;
	background-image: -webkit-linear-gradient(left, #fff, #c2c6cb);
	background-image: -moz-linear-gradient(left, #fff, #c2c6cb);
	background-image: -ms-linear-gradient(left, #fff, #c2c6cb);
	background-image: linear-gradient(left, #fff, #c2c6cb);
}
 
#pankuzulist li:first-child a {
	padding-left: 1em;
	border-radius: 5px 0 0 5px;
}
 
#pankuzulist a:hover {
	background-color: #E0E4E9;
	background-image: -webkit-linear-gradient(left, #fff, #E0E4E9);
	background-image: -moz-linear-gradient(left, #fff, #E0E4E9);
	background-image: -ms-linear-gradient(left, #fff, #E0E4E9);
	background-image: linear-gradient(left, #fff, #E0E4E9);
}
 
#pankuzulist a:after,
#pankuzulist a:before {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -1.5em;
	border-top: 1.5em solid transparent;
	border-bottom: 1.5em solid transparent;
	border-left: 1.5em solid;
	right: -1.5em;
}
 
#pankuzulist a:after {
	border-left-color: #c2c6cb;
	z-index: 3;
}
 
#pankuzulist a:before {
	border-left-color: #B0B0B0;
	right: -1.6em;
	z-index: 2;
}
 
#pankuzulist a:hover:after {
	border-left-color: #E0E4E9;
}
 
#pankuzulist strong {
	padding: .7em 1em .7em 2em;
	color: #15201E;
	display: block;
}

common.js

//パンくずリスト(IE8対策)
jQuery(function(){
  if(!jQuery.support.opacity){
    for(i = 0; i <= 10; i++) {
      zIndexNum = 20 - i;
      $("#pankuzulist a:eq("+i+")").css("zIndex",zIndexNum);
    }
  }
});

jquery.min.js

jQueryのライブラリです。以下からダウンロードします。

→jQuery

解説

cssスタイリング

外枠
#pankuzulist {
	background: #FFF;
	border: 1px solid #B0B0B0;
	border-radius: 5px;
	overflow: hidden;
	width: 980px;
	margin: 0 10px 20px;
}

jQ0013

「background」（背景色）は、際と全体の背景色と同じにします。
「border-radius: 5px;」で、角を丸くします。

背景色
#pankuzulist a {
	padding: .7em 1em .7em 2em;
	float: left;
	text-decoration: none;
	color: #15201E;
	position: relative;
	background-color: #c2c6cb;
	background-image: -webkit-linear-gradient(left, #fff, #c2c6cb);
	background-image: -moz-linear-gradient(left, #fff, #c2c6cb);
	background-image: -ms-linear-gradient(left, #fff, #c2c6cb);
	background-image: linear-gradient(left, #fff, #c2c6cb);
}

jQ0015

aタグのスタイルを指定します。背景色とpaddingを指定します。「float: left;」をつけることで、各階層の内容が左寄せになります。後半はグラデーションを指定するため、ベンダープレフィックスを使用します。

aタグの角丸
#pankuzulist li:first-child a {
	padding-left: 1em;
	border-radius: 5px 0 0 5px;
}

jQ0014

背景を指定すると、「ホーム」の左側の角丸が取れてしまいます。左端のaタグにだけ角丸を追加します。「li:first-child a」（一番最初のaタグ）で、左端を指定します。

boderで矢印部分をスタイリング

矢印（＞）のパーツを作るには、borderを利用します。太めのborderをつくり、topとbottomの色を「transparent」で透明に設定すると矢印ができます。

boderで矢印の作り方
	height:100px;
	width:100px;
	border-top: 1.5em  solid #000;
	border-bottom: 1.5em solid #000;
	border-left: 1.5em solid #000;
	border-right: 1.5em solid #000;

jQ0016

1.5em幅のborderを記述します。

	height:100px;
	width:100px;
	border-top: 1.5em  solid transparent;
	border-bottom: 1.5em solid transparent;
	border-left: 1.5em solid #000;
	border-right: none;

jQ0017

topとbottomの色を「transparent」にします。右側のborder「border-right」を無しにします。

	border-top: 1.5em  solid transparent;
	border-bottom: 1.5em solid transparent;
	border-left: 1.5em solid #000;
	border-right: none;
	right: -1.5em;

jQ0018

幅(width)と高さ(height)を無しにします。そして、右からの位置(right)をマイナスborderの幅にすることにより、a要素から出すことができます

矢印に枠線を追加する

矢印はborderで作っているため、それ以上枠線を表現できません。そこで、「:after」「:before」を使います。

<ul id="pankuzulist1"><li><a href="index.html">test</a></li></ul>

#pankuzulist a {
	padding: .7em 1em .7em 2em;
	float: left;
	text-decoration: none;
	color: #fff;
	position: relative;
	background-color: #000;
}

#pankuzulist li:first-child a {
	padding-left: 1em;
	border-radius: 5px 0 0 5px;
}

#pankuzulist a:after,
#pankuzulist a:before {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -1.5em;
	border-top: 1.5em solid transparent;
	border-bottom: 1.5em solid transparent;
	border-left: 1.5em solid #000;
	right: -1.5em;
}

#pankuzulist a:after {
	border-left-color: #000;
	z-index: 3;
}
 
#pankuzulist a:before {
	border-left-color: #B0B0B0;
	right: -1.6em;
	z-index: 2;
}

jQ0019

①「:after」に、a要素の背景色と同じ色の「border-left-color」を設定します。

②「:before」にラインとして使用したい色を「border-left-color」に設定します。そして、「right: -1.6em;」ほど位置をずらします。

IE8以下では？

IE8以下では、グラデーションと角丸が再現できません。「z-index」のバグもあります。IE8以下では、下記のような表示になります。

  • グラデーションはあきらめて単色を指定する
  • 角丸部分は直角表示
  • z-indexバグはjQueryで対応
グラデーションはあきらめて単色を指定する
#pankuzulist a {
	padding: .7em 1em .7em 2em;
	float: left;
	text-decoration: none;
	color: #fff;
	position: relative;
	background-color: #000;
}

IE8は単色の背景色を設定します。

z-indexバグはjQueryで対応

IE8のz-indexバグとは、表示順のバグです。後に出たオブジェクトが、z-index指定を無視しします。そして、擬似要素（:beforeや:after）で作ったオブジェクトの上レイヤーに表示してしまいます。擬似要素限定ではなく、どの要素でも出現します。

また、IE6・7でも同様の現象があります。

対応するには？

jQueryを利用して対応します。以下の外部ファイルをリンクします。

  <script src="<?php echo get_template_directory_uri() . '/js/jquery.min.js' ; ?>"></script>
  <script src="<?php echo get_template_directory_uri() . '/js/common.js' ; ?>"></script>
  • common.js
  • jquery.min.js
jQuery(function(){
  if(!jQuery.support.opacity){
    for(i = 0; i <= 10; i++) {
      zIndexNum = 20 - i;
      $("#pankuzulist a:eq("+i+")").css("zIndex",zIndexNum);
    }
  }
});

jQ0020

for文を利用して、自動的にa要素にz-indexをつけます。
「if(!jQuery.support.opacity)」で、IE8以下しか読み込まないようにします。

トラックバック用のURL
プロフィール

名前：イワサキ　ユウタ 職業：システムエンジニア、ウェブマスター、フロントエンドエンジニア 誕生：1986年生まれ 出身：静岡県 特技：ウッドベース 略歴 20

最近の投稿
人気記事
カテゴリー
広告

PAGE TOP