デザインの背景

工事中です。

web-doc-base のデザインについて解説します。もちろん、あなたの継承プロジェクトではこれを上書きして一向に構いません。

モダン UI

web-doc-base のボタン状リンクとフォーム部品はフラットデザインから派生したモダン UI(メトロ UI)の影響を受けています。このプロジェクトを始めた時期が、モダン UI が現役の時期と重なります。

モダン UI は、フォントサイズと十分な余白を駆使してレイアウトします。角丸やドロップシャドウ、グラデーションといった端末にとって負荷の高い描画を控える、ミニマリストなデザインです。様々なスクリーンサイズやカラースキーム、ブラウザの新旧を問わずサポートを目指す本プロジェクトとの相性は良いです。

一時このモダン UI にならったアプリケーションをいくつか見ましたが、デザイナーの関与がないとなかなかに良いものにならないようです。現在は、同様にフラットデザインから派生したマテリアルデザインが主流です。

ユニバーサルデザインフォントの利用

プロジェクトでは本文にユニバーサルデザインフォントを用います。UDフォントは様々な長所を備えますが、デザイン性が低いのが難点です。

文書の閲覧性を重視する本プロジェクトは UD フォントを積極的に採用します。そして UD フォントとデザイン性の両立について模索を続けます。

レイアウトを font-size 基準に行う

プロジェクトはユーザーがブラウザに設定したフォントサイズを尊重し CSS で不用意に上書きしません。この為に font-size の指定には %, em を使っています。その他のコンポーネントもフォントサイズの変化に追従するように width, padding, margin, border-width 等は基本的に em で指定します。

この CSS 設計方法は、px ベースのレイアウトとは異なるややこしさがあります。この手法について「解像度に依存しないモバイルユーザーインターフェース」が詳しい記事です。

しかし、Gecko で表示が微妙な時はサイズへの em 指定が原因であったりします。