WEBサイト制作：配色とCSS

• WEBサイトのカラーについて、配色によるカラーイメージ効果の認識が必要です。
• 青、緑、オレンジ、黄、グレー、紫、赤、ピンク系の基調カラーを中心として、会社のイメージカラーやロゴでの指定色との関連で決める必要があります。(WEBセーフカラーとクライアント端末のカラー表示性能も考慮)

• 暖色と寒色の軸、明るい・鮮やかと暗い・渋いの軸でマッピングされたイメージ語から３色の配色が選択できます。（配色によるWEBサイトのカラーイメージ効果を確認）

出典：日本カラーデザイン研究所の「カラーイメージ・スケール」

CXMediaのカラーコーディネートマップの参照

• 一般的には、基調となるカラーをベースに３色によるコーディネートと４色目のアクセントカラーで強調した配色を決めることで、サイト全体の統一感とカラーイメージ効果が発揮できます。

• 役割

• レイアウトパターンを<table>タグによるレイアウト化した場合とCSSで<div>によるブロック化、フローティング指定でのレイアウトの場合がありますが、CSSでレイアウトパターンを実現することでWEBページのコーディングがシンプル化でき、ページの変更追加やリニューアル等が容易となる効果があります。
• また、ユーザービリティの向上や、文章の構造化によりSEO対策等にも効果が期待でき、XHTMLやXMLのページ制作への移行もスムーズとなります。
• アクセスビリティのJIS規格「JIS X 8341-3 高齢者・障害者等配慮設計指針」において、<table>タグ利用のレイアウト化を極力利用しないようとなっていて、CSSコーディングサンプルもあります。

• レイアウトサイズの設定

• CSSのブロック化サイズにより、コンテンツ（文章データ）とレイアウトを分離したページ制作が簡単に実現ができます。
• レイアウトのページサイズは、クライアントの端末のディスプレイサイズに依存しており、以前は800ｘ600ドットをベースにすべきとの考えが主流でしたが、現在は、1024x768ドットへ移行しているため、標準的なディスプレイサイズとするサイトが増えております。
• 従って、最小サイズを800ｘ600ドットに対応した横幅：760ピクセルとし、通常サイズを1024ｘ768ドットに対応した横幅：980ピクセルにした指定の複数のレイアウトサイズに対応したCSSが必要です。

• プリントサイズの対応

• プリントサイズは、A4判サイズに収まることでは横幅：640ピクセル以内であるが、最近のブラウザで自動的に縮小したサイズによる印刷が可能となっています。
• しかし、ネット広告やナビゲーションを印刷されると文字か小さくなることで嫌われるので、CSSで印刷時、不要なネット広告やナビゲーションを非表示（none）にする指定で、コンテンツのみの印刷ができ、表示(screen)とプリント(print)を分けた処理が可能となります。

• ブラウザの対応

• CSSの設定内容がクライアント端末のブラウザ（バージョンも）の違いにより、表示が乱れる（バグ）があり、それらを考慮した設定が必要になります。
• 特に、Windowsベースでブラウザが「Internet Explorer(以降IE)」が70〜80%以上とも言われていて、バグが多いIEの対策が種々紹介されています。
• そのため、Windows-xp + IE5.x/IE6.0/IE7.0やMacOS + IE5.xのバグ回避策のCSS設定が必要となり、別ファイルにして、IEのブラウザのみ読み込む形式にした内容に指定します。

• CSSの構成

• CSSは、別ファイルにして、WEBサイト共通に利用する方が統一化でき、ページデザインの追加変更によるトラブルを低減できます。
• 構成方法として、表示用の「screen」とプリント用「print」を別々のファイルにし、「screen」で「@import」機能により、CSS設定内容を機能別ファイルに分けた読込みを実現します。
• CSSファイルは、機能別に「layout.css」「contents.css」「common.css」「header.css」「footer.css」「print.css」からの構成になります。
  加えて、バグ対応のWindows IE用「ie5win.css」とMacOS IE用「ie5mac.css」も必要となります。

• カスケード・スタイル・シート制作（CSS）のガイドライン

• WEBデザイン制作では、複数の人が携わるため、スタイルガイド作成を最初に手がける必要があります。
• CXMediaサイトのCSSガイドライン詳細内容の参照