モノクロスタイルテスト。

このページは、白と黒の二色のみでデザインしたスタイルシートを適用しております(但し、画像が表示出来ない環境では背景をライトグレーにしている箇所があります)。

勿論、ユーザスタイルなどを適用している場合には上記と異なるデザインになる事があります。

モノクロのスタイルシートって…。

モノクロのスタイルシートってあまり見た事がないのですが、あってもいいのではと思ったりします。

理想的だった？　クラシックマックのテーマ。

本題から逸れますが、白黒デザインの一例について語りたいと思います。

マックOSクラシック(ヴァージョン9.x以前)のテーマはモノクロでした。

昭和59年に初めてマッキントッシュがリリースされたとき、まだモノクロディスプレイでした。

このため、OSのデザインも色に依存しないデザインとならざるを得なかったのですが、その結果色覚に問題がある利用者でも問題なく利用可能なOSとなったのです。

現行のマックOSであるOS Xはフルカラーディスプレイが常識となった時代のものの所為か、色に依存しきったデザインとなってしまい、その結果色覚に依っては誤操作の恐れがあると言う事です。

ユニヴァーサルデザインが強く求められている今だからこそ、クラシックテーマの良さを見直すべきではないのでしょうか、ジョブスさん？

モノクロスタイルの利点。

モノクロスタイルの利点は、何と言ってもカラー写真やイラストが引き立つ事でしょう。

稀に、ページデザインが派手過ぎて、折角の写真やイラストが死んでいるというケースを見るのですが、モノクロスタイルなら決して写真やイラストを殺す事は無いでしょう。

実例。

ペンギンクラブで四コマ漫画などを描いておられる早野りんたさんのサイトもモノクロを基本としたデザインですが、そのお蔭でカラーのイラスト及び漫画が目に留まる様になっております。

このスタイルの作成方針。

冒頭にも書きましたが、原則として白と黒の二色だけでデザインしました。

但し、強調用の擬似傍点は画像で表示しているため、画像を読み込まない設定でも強調が分かるように画像を読まない場合には背景がライトグレーで表示されるようにしております。

この他の方針として、まず、制作者は斜体が好きでない事から、<ins>要素以外では斜体を使わない事としました。

また、アンカーの目印として下ボーダを使っているため、その他のインライン要素にはボーダを使わない事としました。

幾つかのテスト。

それでは、実際にいくつかの要素について、テストしてみましょう。

リストのテスト。

順不同リスト(<ul>要素)のテスト。

定義リスト(<dl>要素)のテスト。

定義語句
定義語句はうんたらかんたらであり、どうのこうのです。

横罫線(<hr>要素)のテスト。

横罫線も描いて見ましょう。

そう言えば、何処ぞの誰かがヘアラインなどと呼んでいましたね。

テーブルのテスト。

以下の表は、アイドル女優について、出身地, 身長, 血液型を表したものです。

アイドル女優のデータ(一部)
名前 出身地 身長 血液型
堀北真希 東京都 160センチ Ｂ型
上戸彩 東京都 164センチ Ｏ型

最後に。

ふーっ、色を使わないでデザインするのって、難しいですねえ。

如何に普段色に依存しているかと言うのが分かると言うものです。

その一方で、画像にも依存し切っている自分に気付いたりもしました。

あと、実験的にHTML 5でマークアップしてみたのですが、accesskey属性は廃止だの、<table>要素のsummary属性はダメだの、<td>要素にscope属性を入れてもダメだの、アクセシビリティの点で退化しており、個人的にはお奨め出来ないかなと思いました。