見出しを識別しやすくする

HTMLサイトに更新履歴を追加する

トップページに更新履歴を追加したのは良いのですが、見出し分けしかされていないページなこともあり非常に見づらくなってしまいました。

気に入らないのでCSSを使って改善します。

このサイトを見ていただければ分かりますが、私が利用しているテーマでは見出しに左縦線と背景色を追加することで識別しやすくされています。

ということで、それにならって同じ様に左縦線と背景色を追加します。

CSSを編集

HTMLファイルに直接書き込む方法もありますが、私は別ファイルにしてあるCSSを読み込むようにしているので、そのファイルを編集します。

h1要素全てに左縦線と背景色を追加し、文字色も変更するような場合は、

h1{
    border-left: 5px solid #cddc39;
    background: #9e9e9e;
    color: #81d4fa;
}

のように記述します。

border-leftが左縦線で、左から線の太さ、線の種類、線の色を表しています。

backgroundに色指定をすると背景色変更になります。

colorが文字色です。

リンクになっていると指定しているというのに勝手に色を変えてきます。

非常に気に食わないので色が変わらないように設定しましょう。

a{
    color:inherit;
}

と設定することで、親要素で指定されている色がそのまま利用されるようになります。

一応区切りがわかりやすくはなりましたが、今の設定だと画面の端から端まで表示されているため左縦線の意味があまりなくなってしまっています。

また、今の設定では全て中央に来るようにしてありますが、見づらいですし美しくないのである程度の幅に狭め、左詰めに設定しようと思います。後々。