CSSを導入しようと思って色々と調べていた時、「display」という属性があって、その中に「none」という値がある。これは「表示されない」という値なのだが、この使い道がどうも分からなかった。例えばimg{display:none;}
とすれば画像が指定してあっても、そこには表示されないのである。「そんなんやったら、初めから画像を指定せーへんかったらええやん!」とずーっと思っていたのだが、昨日とある日記サイトを見ていて謎が解けた。そのサイトはバリバリCSS使いな人なのだが、iCabで見るとまったくCSSが反影されない。(もちろんこれはiCab側が悪いのだが......)それでも内容がかなりすばらしいのでCSSなしでもいつも拝見していた。それを見ながら、「CSSなしでもこれぐらい、読みやすいページにせなあかんよなぁ」などと思った時フと気が付いた。そのサイト、IE(CSSあり)で見る時に無いモノがiCab(CSSなし)で見たらあるのだ。
それは何かというと「hr」。つまり区切りの「横罫線」というやつだ。
そういえば前にそのサイトのスタイルシートを参考のために拝見したときに、確かにhr{display:none;}
となっていたのを見た記憶がある。その時も「何のためにそんな事するんやろう??」と思っただけで、調べたりしなかったのだ。
試しにこの日誌のページを過去にもさかのぼって、hrを入れたり見出しを付けたりしてみたら、CSSなしで見た時にかなり見やすくなった。 書き換えは大変そうに思えても、 miの「正規表現の置き換え」を使ったらかなり楽にできた。フリーなのがもったいないくらいホントに良いツールだねぇ。作者さんに感謝!!(文中の画像はうちのページをCSSありとCSSなしで見たもの。違いが分かるでしょう?)。ほんとにCSSって奥が深いなぁ。まだまだ勉強が足りんです、ハイ。