Okapi Project

サイト基本デザイン

バージョン
2003 年 06 月 30 日 Ver.1.1
作成者
K.Takimoto ( Xware )

要約

本ドキュメントでは、Okapi Project の外見的なデザインルールについて記載しています。Okapi Priject 内のすべてのコンテンツは、このルールに沿って作成されなければいけません。

なお、本ドキュメントでは HTML に関する基礎的な知識について習得していることを前提に記載しています。

目次


1. カラーコンセプト

Okapi Project サイトの色は、サイトキャラクターであるオカピが住む草原をイメージした配色とします。

1.1. 基本カラーセット

メインカラー COLOR = #F2E7C1

サブカラー 1 COLOR = #006600

サブカラー 2 COLOR = #A2B964

サブカラー 3 COLOR = #E15417

1.2. 補助カラーセット

メインカラー COLOR = #F8F1DA

サブカラー 2 COLOR = #E3DEAF

1.3. 配色サンプル

配色サンプル

2. レイアウト

画面のレイアウトは内容に応じて数種類用意します。

2.1. メインコンテンツページ

ナビゲーションのサブコンテンツの要約を掲載するページで、ヘッダ、ナビゲーション、コンテンツ、コラム/リンクにて構成されます。

基本的にレイアウトテーブルを使用しないことから、CSS2にてデザインを整えます。その際に、「色・フォント・罫線」と「レイアウト位置」は別スタイルシートとしました。


スタイルシートなし

スタイルシートなしの場合

色、フォント、罫線などのベーススタイル

ベーススタイルを適用したサンプル

位置指定スタイルシートをプラス

位置指定スタイルをプラスしたサンプル


Copyright © 2003 - 2006 Okapi Project All Rights Reserved.