読者です 読者をやめる 読者になる 読者になる

小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


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

GoogleChrome CSS
はじめに

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

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

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

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

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

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

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

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

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

Chrome でユーザースタイルシートを設定する方法 | monopocket blogChrome でユーザースタイルシートを設定する方法 | 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;
    /* 文字色を薄く */
}
どう変わったか
  • デフォルト

f:id:replication:20140330101520p:plain

  • ユーザスタイルシート適用後

f:id:replication:20140330102454p:plain

おわりに

e-gov(イーガブ)で公開されている法令であれば、HTML構造が同じようなので、どんな法令でも対応できると思います。