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

Fluffy white croquis

日々の思索のためのクロッキー帳。オーディオやオススメなども。

「e-Gov」の法令文を劇的に読みやすくする「Stylish」拡張用テーマを作ってみた

Web デザイン UI Tips

f:id:align_centre:20140611111949p:plain

日本の法律の原文を読みたいときは、総務省が提供している「e-Gov」の法令検索ページで検索し、読むことができます。

しかし、誰がどう見ても、この原文がとにかく読みづらいのです。
例えば「著作権法」をご覧ください。

文字がウィンドウ幅いっぱいに満たされ、行間も狭く、インデント(字下げ)が通常の文書のアウトラインと逆になっていて、タイトルが本文よりも右にインデントされていたり…と、問題点を挙げればキリがありません。

そこで、これを誰もが読みやすいであろう、階層レイアウトに補正するスタイルシート(CSS)を作成し、FirefoxGoogle ChromeSafari拡張機能Stylish」のテーマとして公開しました。

これを使うと、次のようになります。印刷してもそのままのレイアウトで印刷されるので、印刷する場合にも便利です。

f:id:align_centre:20140611015342p:plain

今回はStylish」って何?という方のためにも、順を追って解説したいと思います。

Webブラウザ拡張機能Stylish」のインストール方法

利用したいブラウザで、下記サイトの+無料ボタンや追加インストールなどのボタンをクリックすると、そのブラウザに「Stylish」という拡張機能が追加されます。
(残念ながら、現時点では Internet Explorer 用の「Stylish」はありません)

追加後にブラウザの再起動を求められる場合もありますので、その場合は画面の指示に従います。
Stylish」の追加が完了すると、ブラウザのツールバーに次のようなアイコンが表示されます。

f:id:align_centre:20140611021605p:plain

Stylish のインストールはこれで完了です。

公開されている「Stylish用テーマ」をインストールする

Stylish」は、自分で独自のスタイルシートを記述出来るだけでなく、特定のサイト用に公開された「Stylish テーマをインストール」することで、CSSの知識がなくても簡単に使えるようになっています。

今回作ったテーマ(スタイルシート)は、次のサイトで配布しています。

あとは、このページの+ Install with Stylish ボタンをクリックすればテーマがインストールされます。ブラウザによっては、インストール時にどのURLが適用対象になるかを表すダイアログが表示されることもありますので、その場合はそのままOKをクリックしてください。

f:id:align_centre:20140611105648p:plain

テーマのインストールはこれで完了です。

まず試しに、先ほどの「著作権法」を見てみてください。
おそらく劇的に読みやすくなるのを体感できるのではないでしょうか。

法令ページだけでなく、検索結果や未施行のページのレイアウトも改善

今回作成した「Stylish テーマ」は、法令本文だけでなく、検索結果一覧ページや検索ページにも手を入れ、法令データ提供システム」のサイト全体の読みやすさを向上させています。

ただ、「e-Gov」の法令HTMLデータは、h要素が全くないなど、マークアップコンテンツとして全く構造化されておらず、条件別CSSセレクタをフル動員してなんとか体裁を整えているので、ひょっとしたら一部表示が崩れるページがあるかもしれません。HTMLを解析しながら、スタイル適用パターンを絞り込むのにかなり苦労しました…

Stylish」の便利機能:サイトごとにテーマがないか検索も可能

Stylish」の使い方としては、むしろこちらが王道かもしれませんが、「Stylish」は、上記のように直接テーマのページにアクセスしてテーマをインストールすることが出来る他、訪問中のサイトに誰かが作った「Stylishテーマ」がないか、検索する機能もあります。

サイト閲覧中にブラウザツールバーの「Stylish」のアイコンをクリックすると、「このサイト用の他のスタイルを検索」という項目が表示されるので、これをクリックすると、そのサイト向けに公開されている Stylish テーマがあれば、一覧が表示され、好みのテーマをインストールすることも出来ます。

f:id:align_centre:20140611104640p:plain

実は、他にもいくつか自作のテーマをアップしていますので、また別の機会に紹介したいと思います。


日本国憲法 あたらしい憲法のはなし 法学とは何か ??特に入門者のために

↑無料 Kindle 版です。

デイリー六法2014 平成26年版

デイリー六法2014 平成26年版

有斐閣判例六法 平成26年版

有斐閣判例六法 平成26年版

Songs From Ally McBeal Featuring Vonda Shepard (Television Series)

Songs From Ally McBeal Featuring Vonda Shepard (Television Series)