マークアップ Markupに続いて、CSSデザインのお話。
まずはデザインとはなんなのか。見た目の良さだけをデザインとするのは間違いで、どれだけ整理されているかが、デザイン。だから、見出し(<h*>)で段落(<p>)、リスト(<ul>/<ol>/<li>)の集まりを定義してあげ、囲み(<div>)で括るなど整理した上に<見やすさ>を施すのがデザイン。
CSSデザインは解像度、モニターサイズなど一定でないパソコン表示で、仮の固定表示をデザインするというテンポラリー・デザイン。それはモニターサイズに囚われず固定表示出来るテレビ画面とも異なり、利用環境の他、利用側のニーズにより、差し障るデザインならばそれを無効化出来る特性も兼ね備えている。
デザインの概略を大きくまとめると「配置」と「色」となるだろうし、テキストのフォント指定などは共有理念から考えると特定フォントはあまり望ましくはなく、汎用なものを使った方が良いと思われる。
CSSデザインの場合、その管理の利便性により、style属性で一括管理するか、外部スタイルシートを用いる事でその効果を高める事が可能となる。
色
色指定はテキストならば[color :]、背景色ならば[background-color :]をそれぞれ指定する。指定できる値はRGB(Red,Green,Blue)を16進数で2桁ずつ指定する方法。[白 : #ffffff; / 黒 : #000000;] RGBの2桁が同じ値の場合、[白 : #fff; / 黒 : #000;] でも同じ。[白 : white; / 黒 : black;] と定められた16色の場合、そのキーワード指定も可能である。
配置
配置指定にはその枠組みを指定するもの(プロパティ)として枠組み線[border :]、枠組み線の外側[margin :]、枠組み線と内容の間の空き幅[padding :]で位置調整でき、個別に上[top]、下[bottom]、右[right]、左[left]を指定する事も可能。枠組み線[border :]では色[color]、太さ[width]、形式[style]も指定出来る。
枠組み線を赤い二重線で、太さは標準の文字サイズの半分
border :0.5em #ff0000 double;
枠組み線を赤い二重線で、太さは標準の文字サイズの半分で、枠組み線と内容の間の左の空き幅を10%確保。
border :0.5em #ff0000 double; padding-left :10%;
枠組み線を赤い二重線で、太さは標準の文字サイズの半分で、枠組み線の外側を10%確保。
border :0.5em #ff0000 double; margin-left :10%;
囲み(<div>)毎の配置ならば、手軽に使われるものとしては回り込み[float :]、その解除[clear :]で、回り込み指定の際はその幅[width :]を指定する。
左より40%幅で、回り込み
border :0.5em #ff0000 double; float :left; width :40%;
回り込み指定無し。
上の横線で左回り込み解除
clear :left;
もうひとつの配置指定としては相対位置、絶対位置指定[position :]があり、上[top]、下[bottom]、右[right]、左[left]、それぞれの位置を指定する。[position :]のプロパティは通常表示[static;]、通常表示の位置より相対位置で配置される[relative;]、通常表示以外の指定がされている配置から位置を決める[absolute;]とやや複雑なので、『そのまま使えるスタイルシートサンプル集』などの参考書で知識を身につけた方がよいでしょう。
フォント
テキストフォントのデザインはサイズ[font-size :]、太さ[font-weight :]、斜体[font-style :]が主だった物で、特定フォント名指定[font-family :]は汎用的な明朝系[serif;]、ゴシック[sans-serif;]、筆記体・草書体[cursive;]、装飾的フォント[fantasy;]、等幅[monospace;]などが無難ではあるけれども、使いすぎると文字化けの原因にもなりかねないので、こだわり過ぎない方がよいでしょう。
0 件のコメント:
コメントを投稿