ランダムの備忘録

ブログをやってて覚えた過程を忘れないために!

CSSで「目次」の文字を中央に寄せたかったんだ!

全ての始まり

CSSで色々弄っては失敗を繰り返したことを備忘録として残そう。

そんなわけでCSSでの苦戦の始まり!

最初は「目次」を枠内に入れたかっただけなんだ。

CSSで探したらいっぱい出てくるので簡単そうなのを見つけてきた。

/*目次のデザイン変更*/ 
.table-of-contents {
    padding: 15px 10px 15px 35px;  /* 枠内の余白(上右下左) */
    font-size: 100%;  /* 文字サイズ */
    border:dotted 1px #777;  /* 線の種類と色 */
    background:#f7f7f7;  /* 背景 */
}
/*目次部分*/
.table-of-contents:before {
    content: "目次";  /*文字の変更可能*/
    font-size: 110%;  /*文字サイズ*/
    font-weight:bold; /* 文字の太さ */    
    color:#000;  /* 文字の色 */
}
/*下線を消す*/
.entry-content .table-of-contents li a{
    text-decoration:none; /* リンクの下線を消す */
}

自分用なので分かりやすく/**/で囲んでコメントを入れておく。

そしてCSSに入れた結果が大体こんな感じ⇩(実際はちょっと違うよ)

 目次

・1

・2

・3


だけどこれを見て「目次」を中央に寄せたいを思ってしまった。

欲張った。寄せたいと思ってしまった。全ての始まり!

当初は簡単に出来るだろって思ってた。だってこれだけだからね⇩

目次

・1

・2

・3


こんな感じにしたくなったんだよね!だけどうまくいかない。

「text-align: center;」を組み込むと目次だけじゃなくて全てが中央に寄ってしまう。

目次


コレジャナイ感がすごい。どうしてこうなった。

そして目次部分に影響するはずの「before」の場所に組み込むと機能しない・・・

全体に影響する部分には機能するのにbeforeだとなぜ駄目なのか!

これが分からない

目次

・1

・2

・3


最終的にこんな感じに出来ればよかったんだけどね。さっぱりやり方が分からない。

現在の知識ではお手上げ状態。結構探したけど無理だった。

CSSとHTMLだと書き方が違うので分からん!なんで違うんだ・・・

たったこれだけ、されどこれだけ。

またデザイン変更の時のように未来の自分に頼もう!

そんなわけで苦戦した結果、最初のやつで妥協した備忘録!

数日後!

あれから合計数時間は戦い続けていた!

そしてついに・・・!

やった!やっと出来た!ちょっとだけ違うけど大体思ってた通りになった!

本当にちょっと付け加えるだけだったっていうね。

/*目次部分*/
.table-of-contents:before {
    display:block;
    content: "目次";  /*文字の変更可能*/
    font-size: 110%;  /*文字サイズ*/
    font-weight:bold; /* 文字の太さ */    
    color:#000;  /* 文字の色 */
    text-align:center;
    border-bottom: double #000;  /*下の線*/
    margin:  0px 25px 20px 0px;  /*線の上右下左の余白*/
}

目次部分に「display:block;」を入れて「text-align:center;」を入れる!

最後に線と細かい調整を入れて完成!

たったこれだけ。されどこれだけ!

そして分かったのが全角を使用してはいけないってこと。

全角スペースでも入れようものならその行は機能しなくなる。

全角使用が出来るのはあくまでも/**/の中だけ!

もしかしたら常識なのかもしれない。でも素人からしたらどっちも同じような感じだよね。

ま、これにて「目次」を中央に寄せる!は完了だ!

あ、そういえば変更後の全CSSを載せてないや!

/*目次のデザイン変更*/      
.table-of-contents {
    padding: 15px 10px 15px 35px;  /* 枠内の余白(上右下左) */
    font-size: 100%;  /* 文字サイズ */
    border:dotted 1px #777;  /* 線の種類と色 */
    background:#f7f7f7;  /* 背景 */
}
/*目次部分*/
.table-of-contents:before {
    display:block;
    content: "目次";  /*文字の変更可能*/
    font-size: 110%;  /*文字サイズ*/
    font-weight:bold; /* 文字の太さ */    
    color:#000;  /* 文字の色 */
    text-align:center;
    border-bottom: double #000;  /*下の線*/
    margin:  0px 25px 20px 0px;  /*線の上右下左の余白*/
}
/*下線を消す*/
.entry-content .table-of-contents li a{
    text-decoration:none; /* リンクの下線をつけたくない場合 */
}

これで本当に・・・

長い長い戦いだったが私の勝利だ!!