ログイン
編集不可のページディスカッション情報添付ファイル
chmod/diary/2011-02-05

MMA

デザイン

Wiki のデザインを変更した.概要は以下の通り

構造

今まで,common.css に記述されている内容と screen.css に記述されている内容の差があいまいだったので,思い切って分けた.
見出しやリンクなどがくるのは当然として,カレンダー・コードハイライト部分もこちらに含めた.

screen.css へは,#user (#headerから改名)・#sidebar・#headbar のデザインを含んだ.これらは,WikiにおいてはコンテンツではなくUIと呼ばれるべき要素だからである.

また同時に,この構造変更により,他の出力装置への対応もより簡便になった.
印刷する場合は,ログインパネル・サイドバー・ヘッドバー,および「ぱんくずリスト」とメッセージを表示しないようにした.

UI 部分が切り分けられているので,tty への対応も簡単なはずである.もし w3m がcss の tty 属性に対応し,かつ要望があるのであれば,あとでやろうと思う.

ヘッダー・フッター

#footer という要素名はそのままおいた.一般的な言葉の解釈に照らし合わせても, footer は適切な使われ方(文末のコピーライト表記など)をされていたからである.

ところが問題は #header である.
一般的に解釈すれば,発行元と日付などを記しておくべき場所であろうが,実際に要素内にあったのは #user だけである.そこで,#user をbody直下に移動し,#headerは廃した.

サイドにあるロゴやwiki用リンク一覧,およびヘッダ部分にある検索ボックスや編集リンクなどは,それぞれ #sidebar ・ #headbarにすえおいた.
"bar"という言葉からは灰皿テキーラ技術的な言葉としての「メニューなどが置いてあるバー」を十分に想像できると思ったからである.

ただし,このウィキにおいては,住所や連絡先などは#footerの外にある.これは,カスタムヘッダーの配置位置における問題である.

wiki にはそれぞれ2つまでのカスタムヘッダー・フッターが設定できるようになっている.これはそれぞれ,

へマップされている.このようにしたほうが,対称性があるからだ.

この制約で,#footer内へのカスタムヘッダーは(3つめのカスタムフッターをもうけるのは流石にしたくないので)存在しないから、コンテンツのすぐ外へ配置した.

表のデザイン

表の罫線同士のあいだに,空白を表示するようにした.

ウェブにおける表の罫線といえば,ここ数年ほど重ね合わせて表示するものであった.
それは EXCEL から刷り込まれたのかもしれないし,あるいは単純に誰かが重ね合わしだしたのが,ぱっと見ではなんとなく思ってしまう「重ねあわせたほうが見やすいんじゃね」程度の感覚で広まっていったのかもしれない.

しかし,本当に罫線を重ね合わせる必要があるのだろうか.以下に画像を掲載する.

スクリーンショット(2011-02-05 20.25.15).png スクリーンショット(2011-02-05 20.25.47).png

罫線が重ね合わせられていると,見渡すときに,ごくごくわずかなつっかかりがあるように思われる.(この大きさ程度の表ではあまり顕著ではないが)
他方,罫線同士の間に空白があると,表に置ける二次元的な関係が視覚的によりはっきりと確認できる.

カレンダーのデザイン

カレンダーも,思想に基づいてデザインが変更された.

<< <  March 2024 >  >>
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

まず,カレンダーのヘッダーを,全体の青基調のデザインとかち合わないように,主張のない青にした.(青のうち,特段主張のないほう,の意.逆の例は,たとえばリンクである.リンクの青は,わざと主張のある青にしてある.)

また,ヘッダーと曜日の文字のサイズを 0.8em にした.(文字・行にかかわるサイズ指定は,すべからく em にすべきである.また,emの場合相対指定なので,親の要素サイズ変更を引き継げる利点がある.)これは,UIにあたる部分はすべて主張を小さくすべきという思想をひきついでいる.

日付に関しても,まずその月に含まれない部分もわざわざ灰塗りにするのは小汚いので,白のままにした.

また,使われてない日付は,存在感があるぎりぎりのラインの灰色にした.(存在感を消すことを目的とした程度の薄さになってはならない.) 使われている日付は,他のコンテンツ部分のリンクと同じにした.(わざわざカレンダー内で変える理由がみあたらない)

デザイン雑記

道具は,その道具的な要素というかアイデンティティ的なものは,まったく主張をなくし,空気になるべきだと考えている.うまく言葉にならないが,さまざまなレベルで例をあげていくと

chmod/diary/2011-02-05 (最終更新日時 2011-02-06 14:14:16 更新者 chmod)