第11回 20xx年6月27日 | TOP |

[ 第11回 ● 美しいレイアウトのための制作のヒント]

画面サイズを決める

Webの閲覧環境は、画面サイズが14インチのノートパソコンや23インチのディスプレイを使っている人などさまざまである。割合的には、1024pixel×768pixelが約60%で、800pixel×600pixelが約20%と言われている。多くのサイトでは800X600サイズを基準に制作されている。800ピクセル表示例

(ex.)
全てのページを、「画面の幅800ピクセル、常に画面の中央に表示する」と設定する場合、<body>タグのスタイルとして記述する。
(1)CSSファイルに以下を記述
body {width: 800; margin-right: auto; margin-left: auto;}
(2)CSSファイルをすべてのhtmlファイルからリンクする。

効果的な配色をする

まとまりのあるコンテンツに仕上げるために、配色もナビゲーションの一つとしてとらえることができる。
例えば、コンテンツごとにキーとなる色を決めておくと、閲覧者が複数のページにアクセスした際に、どのコンテンツにアクセスしているか認識しやすくなる。

800ピクセル表示例

全ページに、サイトのタイトルを入れる

閲覧者が必ずトップページを経由して他のページにアクセスするとは限らない。
閲覧者が検索したキーワードが内部のページにヒットすれば、そのページに直接アクセスすることになる。
ページ1つ1つにタイトルを入れておくようにしましょう。

800ピクセル表示例

ナビゲーションについて