ユーザスタイルシートで消費税法の法令を読みやすくする

はじめに

来月から消費税が上がります。
消費税は「消費税法」という法律で決められています。消費税法にはどんなことが書いてあるのかと思い、法令を開いてみましたが、とても読みづらいんです。

そこで、読みづらい法令をユーザスタイルシートを使って読みやすくできないかを考えてみました。

法律がなぜ読みづらいと感じるか

消費税法の法令は、以下のサイトで読むことができます。

消費税法

僕が感じた読みづらい点を挙げてみました。

1行の文字数が多すぎる
行間が狭すぎる
見出しが目立たない

これらの点をユーザスタイルシートで改善してみました。

GoogleChromeでユーザスタイルシートを使う

GoogleChromeでユーザスタイルシートを使う方法は、以下のページがわかりやすいです。

Chrome でユーザースタイルシートを設定する方法 | monopocket blog

ユーザスタイルシートで見た目を改善する

1行の文字数が多すぎる

width: 40em;を指定して、1行あたりの文字数を40文字にしました。

行間が狭すぎる

line-height: 1.7em;を指定して、行間を1.7文字分確保しています。

見出しが目立たない

.arttitleクラスに対して、borderを使って見出しっぽくしています。
あとフォントについては、僕が読みやすいと思うヒラギノ、Windowsならメイリオを指定しています。フォントは好みの問題だと思いますが。

ユーザスタイルシート(サンプル)

/* 全体 */

* {
    font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ";
    line-height: 1.7em;
    /* 行間を広げる(1.7文字分) */
}

/* 見出し */

.arttitle {
    width: 40em;
    /* 横幅を40文字で改行 */
    font-size: 1.2em;
    /* 文字大きく(1.2文字分) */
    color: black;
    border-left: 7px solid #e3297d;
    border-bottom: 1px solid #e3297d;
    margin-bottom: 20px;
    /* 次の文章との行間調整 */
}

/* 文章内 */

.item {
    width: 40em;
    /* 横幅を40文字で改行 */
    margin-bottom: 10px;
    /* 次の文章との行間調整 */
    color: #403f40;
    /* 文字色を薄く */
}