自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、パンくずリストとページネーション部分のパーツをつくりたいと思います。
どちらも私の中で、いざやろうとすると面倒くさいベスト3に入るモノですが、ここであらかじめつくっておくことでこれからは開放されて楽チンですね。
まずはパンくずリストから作成します。
パンくずリストの作成
パンくずリストのHTML
<div class="bread">
<ol>
<li><a href="#">ホーム</a></li>
<li><a href="#">ブログ</a></li>
<li><a>記事</a></li>
</ol>
</div>
パンくずリストのCSS
.bread {
padding: 20px;
}
.bread ol {
margin: 0;
padding: 0;
font-size: 1.2rem;
line-height: 1.2;
list-style: none;
}
.bread li a {
display: block;
padding: 10px;
color: #000;
text-decoration: none;
}
.bread li a[href]:hover {
text-decoration: underline;
}
.bread li a:not([href]) {
color: #888;
}
.bread ol {
display: flex;
}
.bread li {
display: flex;
}
.bread li+li::before {
content: '\003e';
padding: 10px 0;
color: #888;
}
a[href]だとかは、あまり使う機会がないのでどう書くんだったか？とか忘れちゃうんですよねぇ。
次はページネーションを作成します。
ページネーションの作成
ページネーションのHTML
<nav class="pagination>
<ul>
<li><span>1</span></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</nav>
ページネーションのCSS
.pagination {
text-align: center;
}
.pagination ul {
display: flex;
justify-content: center;
flex-wrap: nowrap;
margin: 0;
padding: 0;
list-style: none;
}
.pagination li a,
.pagination li > span {
display: block;
margin: 0 5px;
padding: 5px 10px;
color: #bbb;
font-size: 1.4rem;
border-bottom: solid 1px #ddd;
}
.pagination li > span {
color: #666;
border-color: #aaa;
}
.pagination li a:hover {
color: #666;
border-color: #aaa;
}
flexboxを使えば、簡単に横並びして中央寄せできるぜ！チクショーッ！！
今回は、ボーダーを下部にのみ装飾していますが、好みに合わせてアレンジするのもいいですね。
