今回はフレックスボックスを使用したパンくずリストの作り方を解説します。
パンくずリストはWEB上で現在のページ位置を階層構造で示す際に使われます。
シンプルなコードでサクッとパンくずリストを作成していきましょう。
パンくずリストの作り方
リスト要素でパンくずリストを作成
<ul class="breadcrumb">
<li>
<a href="#">
<i class="fas fa-home fa-fw"></i>
ホーム
</a>
</li>
<li>
<a href="#">カテゴリ</a>
</li>
<li>記事</li>
</ul>「ul」タグを使用しパンくずリストを作成します。「ホーム」にFontAwesomeのアイコンを挿入。
フレックスボックで横並びにする
.breadcrumb {
display: flex;
gap: 1rem;
padding: 1rem;
border-radius: 0.2rem;
background-color: #efefef;
color: #999;
list-style: none;
}「display: flex;」で横並びにし「gap: 1rem;」で「li」タグ間の余白を設定。背景をグレーにしてます。
矢印アイコンを入れる
.breadcrumb li {
font-weight: bold;
}
.breadcrumb li:after {
padding: 0 0 1rem 1rem;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1rem;
content: '\f0da';
}
.breadcrumb li:last-child::after {
padding: 0;
content: "";
}
.breadcrumb li a {
text-decoration: none;
color: #66ce9f;
}
.fa-home {
margin-right: 0.5rem;
}「li:after」擬似クラスで「FontAwesome」の矢印アイコンを入れ、余白や文字の太さを調整し完成。
全てのソース
コードを表示
<ul class="breadcrumb">
<li>
<a href="#">
<i class="fas fa-home fa-fw"></i>
ホーム
</a>
</li>
<li>
<a href="#">
カテゴリ
</a>
</li>
<li>記事</li>
</ul>.breadcrumb {
display: flex;
gap: 1rem;
padding: 1rem;
border-radius: 0.2rem;
background-color: #efefef;
color: #999;
list-style: none;
}
.breadcrumb li {
font-weight: bold;
}
.breadcrumb li:after {
padding: 0 0 1rem 1rem;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1rem;
content: '\f0da';
}
.breadcrumb li:last-child::after {
padding: 0;
content: "";
}
.breadcrumb li a {
text-decoration: none;
color: #66ce9f;
}
.fa-home {
margin-right: 0.5rem;
}
このWEBパーツを確認する
HTML・CSSのカスタマイズや動作確認ができます
スラッシュを入れたパンくずリスト
「li:after」セレクタでスラッシュを入れてます
コードを表示
<ul class="breadcrumb">
<li><a href="#">ホーム</a></li>
<li><a href="#">カテゴリ</a></li>
<li>記事</li>
</ul>.breadcrumb {
display: flex;
gap: 1rem;
padding: 1rem;
border-radius: 0.2rem;
background-color: #efefef;
color: #999;
list-style: none;
}
.breadcrumb li:after {
padding: 0 0 1rem 1rem;
font-size: 1rem;
font-weight: normal;
content: '/';
}
.breadcrumb li:first-child::before {
margin-right: 0.5rem;
color: #3998db;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1rem;
content: '\f015';
}
.breadcrumb li:last-child::after {
padding: 0;
content: "";
}
.breadcrumb li a {
text-decoration: none;
color: #3998db;
}
このWEBパーツを確認する
HTML・CSSのカスタマイズや動作確認ができます
境界線を入れたパンくずリスト
「breadcrumb」クラスで「border: 2px solid #3998db;」を指定し境界線を入れてます
コードを表示
<ul class="breadcrumb">
<li><a href="#">ホーム</a></li>
<li><a href="#">カテゴリ</a></li>
<li>記事</li>
</ul>.breadcrumb {
display: flex;
gap: 1rem;
padding: 1rem;
border-radius: 0.2rem;
border: 2px solid #3998db;
background-color: #efefef;
color: #999;
list-style: none;
}
.breadcrumb li {
font-weight: bold;
}
.breadcrumb li:after {
padding: 0 0 1rem 1rem;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1rem;
content: '\f0da';
}
.breadcrumb li:last-child::after {
padding: 0;
content: "";
}
.breadcrumb li a {
text-decoration: none;
color: #3998db;
}
このWEBパーツを確認する
HTML・CSSのカスタマイズや動作確認ができます
枠を矢印にしたパンくずリスト
before,after疑似要素で「transform: skew;」を指定し、最後の要素（記事）以外を矢印枠にしています。
コードを表示
<ul class="breadcrumb">
<li>
<a href="#"><i class="fas fa-home fa-fw"></i></a>
</li>
<li>
<a href="#">カテゴリ1</a>
</li>
<li>
<a href="#">カテゴリ2</a>
</li>
<li>記事</li>
</ul>.breadcrumb {
display: flex;
list-style: none;
border-radius: 5px;
background-color: #f09fa1;
box-shadow: 0 0 10px #999;
overflow: hidden;
z-index: -3;
gap: 0.2rem;
}
.breadcrumb li {
position: relative;
padding: 1rem 4rem 1rem 1rem;
border-radius: 0.2rem;
font-weight: bold;
}
.breadcrumb li:not(:last-child)::before,
.breadcrumb li:not(:last-child)::after {
position: absolute;
left: -1.3rem;
width: 100%;
height: 50%;
background: #11364A;
content: '';
z-index: -1;
}
.breadcrumb li:not(:last-child)::before {
top: 0;
transform: skew(45deg);
}
.breadcrumb li:not(:last-child)::after {
top: 50%;
transform: skew(-45deg);
}
.breadcrumb li:first-child {
padding-right: 3rem;
}
.breadcrumb li:last-child {
padding-left: 2rem;
color: white;
z-index: -2;
}
.breadcrumb li a {
text-decoration: none;
color: #f09fa1;
}
.breadcrumb li a:hover {
color: white;
}
このWEBパーツを確認する
HTML・CSSのカスタマイズや動作確認ができます
