自分だけのマイCSSフレームワークをつくる

投稿日 更新日

私はこれまでこのサイトのWordPressのテーマを作るときや、他のサイトをつくったりするときには基本イチからまっさらな状態から作っていました。
しかし、それでは効率も悪いですし、私は本を見ながらじゃないと作れないので時間もかかります。

そんなときに便利なのがBootstrapやFoundationといったCSSフレームワーク。
あらかじめ各パーツやレイアウトなど設定してくれているので、クラス名を書くだけで簡単に形ができあがる便利なものとなっています。
ですが、すでに装飾されているので、自分で新たにデザインするときに上書きしたりしないといけないのが面倒です。
それに使わない機能もセットしてくれているので、ボリューミーになっています。

それなら軽量のフレームワークを使えば良いじゃんという話になるのですが、それはそれでまた新たに記述の仕方を覚えるのが大変…
やっぱり自分で書いたコードが一番自分が分かりやすい。
ということで、最初は面倒で時間もかかるかもしれないですが、自分で各パーツを作っておいて、サイトを作ろうとなったときにそのパーツを組み合わせてサイトを作ってみようと考えました。

作ろうと思ったきっかけになったのは、「これからの「標準」を身につける　HTML+CSSデザインレシピ」という本からですね。
これからの「標準」を身につける　HTML+CSSデザインレシピ
この本には各パーツをコンポーネント化しているのを掲載しているのですが、サイトを作るときに毎回この本を読むのもアレだし、より自分好みのものにしたいと思ったので、自分オリジナルのモノを作ってみようかなとなりました。

途中で面倒くさくなってあきらめちゃうかもしれませんが、とりあえず作っていったものをこのサイトに書いていこうと思います。
自分で見返すときにも便利でしょうしね。
これはあくまで自分用なので、記述の仕方など適当なところもあるかと思いますが、もし使いたいと思った方がいたらコピペして使ってみてください。

まずはじめに、今回はベースとなるhtmlの部分から作ってみることにします。

ベースとなるHTMLの設定

base.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>


</body>
</html>

6ステップでマスターする 「最新標準」HTML+CSSデザインに書いてある基本となる記述と全く一緒なのですが、ここはこれでいいでしょう。
これで新たに作るときもコピペするだけで簡単に作れますね。

こんな感じで貼っていくのが主になっていくので、コードの説明などはあまりしないかもしれませんがご了承ください。

次はベースとなるCSSの設定をします。

ベースとなるCSSの設定

style.css
@charset "UTF-8";

:root {
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: '游ゴシック', Yu Gothic, 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
  font-size: 1.6rem;
  line-height: 1.75;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

CSSについては、完全に自分オリジナルの設定になってますね。
私はフォントサイズはremでの指定が好きなので、このように書いています。
font-familyは人それぞれ好みがあるかと思いますが、私が使っているWindows7のパソコンに最近、游ゴシックのフォントをダウンロードして使ってみたのですが、ちまたでの評判よりも意外と良いじゃんと思ったので、最近は積極的に使っています。
box-sizingは、これを事前に設定しておくことで、おかしくなったときのイライラ防止目的ですね（笑）

これから時間が空いたときに、徐々に作っていこうと思います。

自分だけのマイCSSフレームワークをつくる（ヘッダー編）

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、ヘッダーのパーツをつくろうと思います。

オリジナルのフレームワークというよりは、各パーツをそれぞれリストアップしていって、サイトを作るときにそこから拾い上げるといった感じになるかも？と思っています。
最初からそれぞれ用意しておくのは、クラス名の指定などいろいろ考えておかないといけないのが面倒ですし、無駄にもつながりそうですから。

表示のデモを一緒に載せておくと分かりやすいと思うのですが、デモ用のページとかつくってないので載せられないんですよね…
やっぱりこれもつくったほうがいいかな？

サイト名とナビゲーションを横並びにしたヘッダー

html
<header class="header">
  <div class="header-inner">
    <div class="header-title">
      <h1 class="brand"><a href="#">サイト名</a></h1>
      <p class="catch">キャッチコピー</p>
    </div>

    <nav class="header-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">サイトについて</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>
style.css
/* ヘッダー共通 ： サイト名  */
.header-title .brand {
  margin: 0;
  line-height: 1;
}

.header-title .brand a {
  text-decoration: none;
}

.header-title .catch {
  margin: 12px 0 0 0;
  line-height: 1;
}

/* ヘッダー共通 ： ナビゲーション  */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
}

.header-nav a:hover {
  opacity: 0.8;
}

@media (min-width: 768px) {
  /* サイト名とナビゲーションを横並びにする */
  .header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .header-nav ul {
    display: flex;
  }
}

フォントサイズやカラーなどの装飾はどうしようか迷ったのですが、サイトをつくる際に設定すると思うので、ここではあえて指定しませんでした。
新たにクラスをつくり、指定して上書きするのは無駄なような気がしますからね。

サイト名とナビゲーションを横並びにせず、縦に並べたヘッダー

html
<header class="header">
  <div class="header-inner">
    <div class="header-title">
      <h1 class="brand"><a href="#">サイト名</a></h1>
      <p class="catch">キャッチコピー</p>
    </div>

    <nav class="header-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">サイトについて</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>
style.css
/* ヘッダー共通 ： サイト名 */
.header-title .brand {
  margin: 0;
  line-height: 1;
}

.header-title .brand a {
  text-decoration: none;
}

.header-title .catch {
  margin: 12px 0 0 0;
  line-height: 1;
}

/* ヘッダー共通 ： ナビゲーション */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
}

.header-nav a:hover {
  opacity: 0.8;
}

@media (min-width: 768px) {
  .header-nav ul {
    display: flex;
  }
}

こちらはメディアクエリの中のサイト名とナビゲーションを横並びにするという設定を外すだけでOKですね。

スマホのときナビゲーションを横スクロールさせる

html
<header class="header">
  <div class="header-inner">
    <div class="header-title">
      <h1 class="brand"><a href="#">サイト名</a></h1>
      <p class="catch">キャッチコピー</p>
    </div>

    <nav class="header-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">サイトについて</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>
style.css
/* ヘッダー共通 ： サイト名 */
.header-title .brand {
  margin: 0;
  line-height: 1;
}

.header-title .brand a {
  text-decoration: none;
}

.header-title .catch {
  margin: 12px 0 0 0;
  line-height: 1;
}

/* ヘッダー共通 ： ナビゲーション */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
}

.header-nav a:hover {
  opacity: 0.8;
}

/* ナビゲーションを横スクロールさせる */
.header .header-nav{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;  /* 慣性スクロール */
}

.header .header-nav ul {
  display: flex;
  flex-direction: row;
}

.header .header-nav li {
  flex: 0 0 auto;
}

overflow-x: auto;を設定することで横スクロールできるようにしています。

ハンバーガーメニューのボタン

html
<header class="header">
  <div class="header-inner">
    <div class="header-title">
      <h1 class="brand"><a href="#">サイト名</a></h1>
    </div>
    <button type="button" class="nav-btn">
      <span class="bars"></span>
    </button>

    <nav class="header-nav">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">ブログ</a></li>
        <li><a href="#">サイトについて</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>
style.css
/* ヘッダー共通 ： サイト名 */
.header-title .brand {
  margin: 0;
  line-height: 1;
}

.header-title .brand a {
  text-decoration: none;
}

.header-title .catch {
  margin: 12px 0 0 0;
  line-height: 1;
}

/* ヘッダー共通 ： ナビゲーション */
.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav a {
  display: block;
  padding: 12px;
  text-decoration: none;
}

.header-nav a:hover {
  opacity: 0.8;
}

/* ヘッダー： ボタンのスタイルと表示 */ 
@media (max-width: 767px) {
  .header .header-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .header .nav-btn {
    margin-right: 12px;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
  }
  
  .header .nav-btn:hover {
    opacity: 0.5;
  }
  
  .header .header-nav {
    display: none;
  }
}

@media (min-width: 768px) {
   /* ヘッダー： サイト名とナビゲーションを横並びにする */ 
  .header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header-nav ul {
    display: flex;
  }
  
  .header .nav-btn {
    display: none;
  }
  
  .header .header-nav {
    display: block !important;
  }
}

/* ハンバーガーメニューの三本線アイコン */ 
.bars {
  display: inline-block;
  width: 18px;
  height: 3px;
  background-color: #333;
  box-shadow: 0px -6px #333, 0 6px #333;
  border-radius: 0.1px;
  margin: 12px 0 9px;
}

あとはjQueryを使って、ナビゲーションを開閉させる設定を追加すればOKかな。

自分だけのマイCSSフレームワークをつくる（テキスト編）

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、テキスト部分のパーツをつくろうと思います。

未だにテキスト部分のマージンやline-heightの自分なりの良い設定方法を見つけられていないです…
適度に余白があったほうが読みやすいような気がするので、結構空けているのですがこういう感じで問題ないんでしょうかね？
あくまで目安として設定しているので、サイトをつくるたびにそこはいじるかもしれません。

テキスト部分のHTML

html
<h1>h1. 見出し <small>small. テキスト</small></h1>
<h2>h2. 見出し <small>small. テキスト</small></h2>
<h3>h3. 見出し <small>small. テキスト</small></h3>
<h4>h4. 見出し <small>small. テキスト</small></h4>
<h5>h5. 見出し <small>small. テキスト</small></h5>
<h6>h6. 見出し <small>small. テキスト</small></h6>
<p>p. 段落</p>
<a href="#">a. リンク</a>

<ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

<ol>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ol>

<dl>
  <dt><time>2011-09-09</time></dt>
    <dd>自分だけのマイCSSフレームワークをつくるを投稿しました。</dd>
  <dt><time>2011-09-11</time></dt>
    <dd>自分だけのマイCSSフレームワークをつくる（ヘッダー編）を投稿しました。</dd>
</dl>

テキスト部分のCSSの設定

style.css
h1 {
  margin-top: 64px;
  margin-bottom: 24px;
  font-size: 3.6rem;
}

h2 {
  margin-top: 48px;
  margin-bottom: 24px;
  font-size: 3.0rem;
}

h3 {
  margin-top: 36px;
  margin-bottom: 12px;
  font-size: 2.4rem;
}

h4 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 1.8rem;
}

h5 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 1.4rem;
}

h6 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 1.2rem;
}

small {
  color: #888;
  font-weight: normal;
}

p {
  margin-top: 0;
  margin-bottom: 36px;
  font-size: 1.6rem;
}

a {
  text-decoration: none;
}

ul,
ol {
  margin-top: 36px;
  margin-bottom: 36px;
  padding-left: 36px;
}

dl {
  margin-top: 36px;
  margin-bottom: 36px;
}

自分だけのマイCSSフレームワークをつくる（テーブル編）

自分だけのマイCSSフレームワーク（フレームワークというより、Webサイトをつくる際のベースとなる部品のようなもの）をつくることを目指してやっていきます。

今日は、テーブル部分のパーツをつくります。

テーブル部分のHTML

HTML
<div class="table-responsive">
<table class="table">
<caption>テーブル</caption>
<thead>
  <tr>
    <th>th. テキスト</th>
    <th>th. テキスト</th>
    <th>th. テキスト</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th>th. テキスト</th>
    <tr>tr. テキスト</th>
    <tr>tr. テキスト</th>
  </tr>
  <tr>
    <th>th. テキスト</th>
    <tr>tr. テキスト</th>
    <tr>tr. テキスト</th>
  </tr>
  <tr>
    <th>th. テキスト</th>
    <tr>tr. テキスト</th>
    <tr>tr. テキスト</th>
  </tr>
</tbody>
</table>
</div>

テーブル部分のCSSの設定

2種類のテーブルのスタイルを用意しました。

枠線で囲んだテーブルのスタイル

style.css
.table-responsive {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table caption {
  font-size: 1.4rem;
  text-align: left;
}

table,
th,
td {
  padding: 10px 15px;
  border: solid 1px #aaa;
}

table,
td {
  font-size: 1.4rem;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

th {
  font-weight: 500;
}

thead th {
  background-color: #ddd;
}

tbody th {
  background-color: #eee;
}

横線のみのシンプルなテーブルのスタイル

style.css
.table-responsive {
  overflow-x: auto;
}

table {
  width: 100%;
  border-spacing: 0;
}

table caption {
  font-size: 1.4rem;
  text-align: left;
}

th,
td {
  margin: 0;
  padding: 10px 15px;
  border-bottom: solid 1px #ddd;
  white-space: nowrap;
}

td {
  font-size: 1.4rem;
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: 500;
}

thead th {
  background-color: #ddd;
}

tbody th {
  background-color: #eee;
}

white-space: nowrap;で文字を折り返さないようにさせ、overflow-x: auto;で画面の幅より大きくなったときに横スクロールするようにしています。
スマホでサイトを見るときでも、テーブルのレイアウトを崩さずに表示することができます。
ですが、スクロールバーが見えていないと、横スクロールできることに気づかない恐れもありますね…

自分だけのマイCSSフレームワークをつくる（ボタン編）

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今日は、ボタンのパーツをつくります。
最近のサイトはボタンのデザインや動作に凝っていて、つい押してしまいたくなるものが多いですよね。
今回は、シンプルなボタンを4種類用意してみました。

基本となるボタンパーツのHTML

HTML
<a href="#" class="button">ボタン</a>

ボタンパーツのCSSの設定

4種類のボタンのスタイルを用意しました。

シンプルなフラットのボタン

style.css
.button {
  display: inline-block;
  padding: 10px 30px;
  border: solid 2px #ddd;
  border-radius: 6px;
  background-image: none;
  background-color: #fff;
  color: #333;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus {
  outline: none;
  background-image: linear-gradient(rgba(255,255,255.2), rgba(255,255,255.2));
}

背景にグラデーションをかけたボタン

style.css
.button {
  display: inline-block;
  padding: 10px 30px;
  border: solid 2px #ddd;
  border-radius: 6px;
  background-image: none;
  background: linear-gradient(to bottom, #fff 0%, #fff 80%, #eee 100%);  
  color: #333;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus {
  outline: none;
  background-image: linear-gradient(rgba(255,255,255.3), rgba(255,255,255.3));
}

立体的にみえるボタン

style.css
.button {
  display: inline-block;
  padding: 10px 30px;
  border-top: none;
  border-left: none;
  border-right: solid 1px rgba(0,0,0,0.3);
  border-bottom: solid 2px rgba(0,0,0,0.3);
  border-radius: 6px;
  background-image: none;
  background-color: #fff;
  color: #333;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus {
  outline: none;
  background-image: linear-gradient(rgba(255,255,255.2), rgba(255,255,255.2));
  opacity: 0.8;
  transition: border .1s;
  border-right: solid 1px rgba(0,0,0,0.2);
  border-bottom: solid 2px rgba(0,0,0,0.2);
}

横長の丸みを帯びたボタン

style.css
.button {
  display: inline-block;
  padding: 5px 50px;  
  border: solid 2px #ddd;
  border-radius: 18px;
  background-image: none;
  background-color: #fff;
  color: #333;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus {
  outline: none;
  background-image: linear-gradient(rgba(255,255,255.2), rgba(255,255,255.2));
}

もっとホバーしたときなどにアニメーションなど効果を追加して、ボタンを押すのが楽しくなるようにデザインするのも良さそうですね。

自分だけのマイCSSフレームワークをつくる（ラベル編）

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、ラベルとバッジのパーツをつくります。

まずはラベルをつくります。

ラベルパーツの作成

ラベルパーツは、記事のタグの装飾に使うときなどに用いる予定です。

ラベルパーツのHTMLの設定

HTML
<a href="#" class="label">ラベル</a>

ラベルパーツのCSSの設定の設定

style.css
.label {
  display: inline-block;
  padding: 2.5px 15px;
  border-radius: 3px;
  background-color: #ddd;
  color: #000;
  font-size: 1.2rem;
  text-decoration: none;
}

.label:hover,
.label:focus {
  outline: none;
  opacity: 0.8;
}

次にバッジの部分を作成します。

バッジパーツの作成

バッジは、コメントやお知らせの件数などを表示するときに使えそうです。

バッジパーツのHTMLの設定

HTML
<span class="badge">3</span>

バッジパーツのCSSの設定

style.css
.badge {
  display: inline-block;
  padding: 0;
  border-radius: 50%;
  background-color: #ddd;
  color: #000;
  font-size: 1.2rem;
  width: 2em;
  line-height: 2rem;
  text-align: center;
  text-decoration: none;
}

ラベルとバッジを組み合わせることもできます。

ラベルとバッジを組み合わせたパーツ

ラベルとバッジを組み合わせたパーツのHTMLの設定

HTML
<a href="#" class="label">ラベル<span class="badge">3</span></a>

ラベルとバッジを組み合わせたパーツのCSSの設定

style.css
.label {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 3px;
  background-color: #ddd;
  color: #000;
  font-size: 1.2rem;
  line-height: 2rem;
  text-decoration: none;
}

.label .badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0;
  border-radius: 50%;
  background-color: #fff;
  color: #333;
  font-size: 1.2rem;
  width: 2em;
  line-height: 2rem;
  text-align: center;
}

私の場合、あまり使うことはないかもしれませんが、何かあったときにパッと確認するときのために載せておきます。

自分だけのマイCSSフレームワークをつくる（フォーム編）

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今日は、フォーム部分をつくりたいと思います。
あまりフォーム部分を作成する機会が少ないので、未だにフォームのHTMLやCSSの記述に関しては疎いんですよね…
ですので、最初からこのように設定しておくと、作る際にコピペするだけでOKになるので、今後は楽になるかも？

基本となるフォームのHTML

HTML
<form action="#" method="post">
<p>
<label for="name">お名前 <span class="required">*</span></label>
<input type="text" name="your-name" id="name">
</p>

<p>
<label for="email">メールアドレス <span class="required">*</span></label>
<input type="email" name="your-email" id="email">
</p>

<p>
<label for="title">題名</label>
<input type="text" name="your-subject" id="title">
</p>

<p>
<label for="message">メッセージ本文</label>
<textarea name="your-message" id="message"></textarea>
</p>

<p>
<input type="submit" value="送信" class="button">
</p>
</form>

基本となるフォームのCSS

style.css
form {
  padding: 20px;
}

form p {
  margin: 0 0 20px 0;
}

label {
  display: block;
  margin: 0 0 5px 0;
  font-size: 1.4rem;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 5px 10px;
  border: solid 1px #aaa;
  border-radius: 0;
  background-image: none;
  font-family: inherit;
  font-size: 1.4rem;
}

textarea {
  height: 120px;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border: solid 1px #ddd;
  box-shadow: 0 0 1px #aaa inset;
  outline: none;
}

.required {
  color: #f00;
}

シンプルでベーシックなスタイルになっているので、さらに装飾を加えていくときの土台用としても活用できるかもしれません。
もっとおしゃれにもしたいんですけど、まだまだフォーム部分のCSSの設定は慣れていないもので…

自分だけのマイCSSフレームワークをつくる（パンくずリスト・ページネーション編）

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今回は、パンくずリストとページネーション部分のパーツをつくりたいと思います。

どちらも私の中で、いざやろうとすると面倒くさいベスト3に入るモノですが、ここであらかじめつくっておくことでこれからは開放されて楽チンですね。

まずはパンくずリストから作成します。

パンくずリストの作成

パンくずリストのHTML

HTML
<div class="bread">
  <ol>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">ブログ</a></li>
    <li><a>記事</a></li>
  </ol>
</div>

パンくずリストのCSS

style.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

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

style.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を使えば、簡単に横並びして中央寄せできるぜ！チクショーッ！！
今回は、ボーダーを下部にのみ装飾していますが、好みに合わせてアレンジするのもいいですね。