八百万楽遊庵

気楽にHTML

こいつがなかなか難しい	レイアウトについて・早引きリンク　1.基本的なレイアウト　2.配色について　3.tableでのレイアウト　4.フレームでのレイアウト　5.行間について　6.cssでのレイアウト　7.ユーザビリティ　8.ディレクトリの構造	HTML入門	HTML頻出タグ一覧
		フレームとDTD宣言	ブラウザについて
		CSS入門	CSS頻出プロパティ
		立ち上げ用意	サイト立ち上げ用意
		はじめに	玄関へ

１．基本的なレイアウト

　レイアウトのパターンを幾つか。
　HTMLでレイアウトを決めるには、概ね二通りの方法があります。
　一つは、一番上から下まで順にコンテンツを並べていく方法。
　もう一つは、コンテンツの位置を自由に配置していく方法。
　まずは基本的な前者から。
　これはコンテンツを順に記述して、主にテキストの左・中央・右寄せなどを使ってレイアウトをしていくものです。どんなレイアウトでもコンテンツを順に記述していくのは同じなので（CSSでは例外あり）、まずはここから。

　→Exampleを開く　　→Exampleのソースを開く

　→解説版を開く（別窓ではありません）

　例としてのコンテンツのソースのページも用意しました。ブラウザの『ソースを表示』でも出すことができますので、使いやすいほうをご使用下さい。それをプリントアウトして、例を見ながら構造を理解していくのが一番勉強になるかなぁ……と思いまして。
　解説版ではそのソースを元にした、記述と構造の説明をしてみました。

△TOP

２．配色について

　色もレイアウトのうち。
　というわけで、サイトの印象を一番初めに決定付けると言っても過言じゃない色についてちょっと。
　色を決めるのはもちろん作り手の自由なのですが、気をつけていたほうがいいこともあります。代表的なのは『背景色と文字色の関係』でしょうか。
　『背景色と文字色の関係』は、そのページでのテキストの読みやすさに直結します。例えば黒の背景に濃灰色の文字というテキストがあったら、とても読みにくいでしょう？背景色と文字色を同系、あるいは似た色にするとこういったことが起こります。
　ページの雰囲気作りのためとはいえ、このような配色は閲覧者に優しくありませんし、そもそも読みにくい文字は“クリック＆ドラッグで反転して読む”なんて技をやられがち。そうなったらページの雰囲気作りも配色もへったくれもありませんですよ。
　また、色弱の方には特に読みにくい配色というものもあるので、それも一考にいれられるとより多くの人に読みやすいサイトを提供できると思います。特に店舗サイトなどを作られたい方は、閲覧者に優しいサイトになるように気を配ったほうがいいと思います。
　ですから背景色と文字色は、自分が作りたいページの雰囲気を壊さない範囲で読みやすい、というバランスで決定したほうが良いと思いますよ。いや、これが難しいんですけどねぇ。

△TOP

３．tableでのレイアウト

　ページ内のコンテンツの位置を順に並べていくのではなく、位置を自由に決めたい場合は<table>を使う方法があります。
　ソースがとても複雑なものになりますので書くのは大変ではありますが、使いこなすととてもカッコいいサイトを作ることもできます。
　ここでは簡単な例をご紹介します。

　→Exampleを開く　　→Exampleのソースを開く

　なお、同じ構造で色付のテーブルと色と枠線無しのテーブルを並べています。記述はほとんど同じなので、ソースでは片方のだけ載せています。

△TOP

４．フレームでのレイアウト

　上下左右にページを分割できるフレームを使ったサイトは、片方をメニュー（各ページへのリンク）にし、片方をメインページにすることができます。
　この方法を使うと、メインに表示されたどんなに長いページをスクロールしてもメニューは位置を変えないので、とても各ページへのアクセスがしやすいサイトを作ることができます。
　例えばこんな感じですね。

　→Exampleを開く　　→Exampleのソースを開く

　フレームは必ずしも分割した部分にコンテンツを載せなければいけないということはありません。分割した部分を飾りの一つとして利用することも可能です。
　ただフレームを用いるとファイル数が増えやすいので、『ディレクトリの構造』は先に作っていたほうがやりやすいですよ。これはまぁ、どのやり方でもいえることなんですが、この場合は特に。

△TOP

５．行間について

　ざっくりと。
　Windowsでは行間が縮まっているので、標準のままだと文章が少し読みにくいことがあります。
　それを解消したい場合はCSSで行間を広げてみましょう。
　例えば<p>タグの中の文章の行間を広げたい時は、<head></head>の中に

<style type="text/css">
<!--
p{line-height:120%}
-->
</style>

　と、書きましょう。％の前の数値は適度にお好みで。詳しくはCSS入門編以降に書いてますのでそちらをご参照下さい。

△TOP

６．CSSでのレイアウト

　CSSについてはこの後で詳しく書いていますので、やっぱりそちらを参照下さい。ここでは、CSSを用いたレイアウトの例をご紹介します。
　CSSではレイアウトはかなり自由に構築することができ、例えば『複数のコンテンツを同じ位置に配置して重ねる』なんてこともできます。
　これまでは複雑なレイアウトはtableを駆使することで作っていましたが、CSSではソースを簡潔にした上に同様のレイアウトを組み上げることができますし、またこれまでのHTMLのみのページではできなかったデザインもできるようになります。例えば『リンクの上にカーソルを持っていくと色が変わる』などですね。
　例えばこんな感じです。

　→Exampleを開く　　→Exampleのソースを開く

　→解説版を開く（別窓ではありません）

　例でも使っていますが、CSSでレイアウトをする際には、『絶対位置でのコンテンツの位置指定』を使って画像や文章の配置を決めていく方法があります。
　これにはHTMLと違う大きな利点があります。それは、『ソースの記述の順番が目茶苦茶でもWebページのレイアウトには関係ない』という点です。
　HTMLでは横の並びは左から右、縦の並びは上から下という順番にレイアウトの記述をしていかねばなりません。しかしCSSの絶対位置を使った指定では、例えばページでは一番下にくる文章をソースでは一番上に書くことも可能なのです。
　これが何に影響するかと言うと、検索エンジンと音声ブラウザです。

　検索エンジンでサイトが表示される時、同時にそのサイトの中にある文章の一部が表示されますね。ページの一部に検索対象がヒットした時は表示のされ方が変わりますが、ここでお話しするのは特にそのWebページのTOPページがヒットした時です。あれはソースの中で一番初めに出てくるテキストを読み込んでいるようです。
　つまり、サイトの簡単な説明文を一番下に持ってきていると、その以前にあるテキストが検索結果に表示されてしまうようなんですね。そうすると、閲覧者にはどんなページかさっぱり分からない文章が提供されてしまう。そうすると、その人がページを見に来てくれる可能性が低くなる、と。
　しかし、先ほど書いたとおりCSSの絶対位置を使った指定では『ページでは一番下にくる文章をソースでは一番上に書くことも可能』です。これを使えば、検索エンジンに表示させたい任意の文章をソースの一番上に（bodyタグ内です）に書いておくことができるわけです。

　そしてまた、音声ブラウザもどうやらソースを上から順に読んでいくのが基本のようです。
　ですから、文章が出てくる前に大量のレイアウトのためのソースがあるとそこに至るまでに時間がかかってしまう。しかし、やはり文章が一番上にあればとてもスムースに情報を提供することができる。
　リンクの順番も適切に並べることもできますしね。

　と、これだけだといいこと尽くめのようですが、『絶対位置でのコンテンツの位置指定』には、とにかく作成するのにコツがいる・文字のサイズを％で拡大縮小されるとレイアウトが変になるなどのデメリットもあります。
　とはいえユーザビリティへの対策にはとても有効な技術だと思いますよ。覚えていて損はないかと。

△TOP

７．ユーザビリティ

　使いやすさのことです。
　Webページで言う使いやすさというと、

・どこにリンクがあるか分かりやすい（これはアクセシビリティとも）
・テキストサイズや配色が適当で、見やすい
・様々なブラウザに対応・考慮している
・様々な画面解像度に対応・考慮している

　などでしょうか。ようするに、閲覧者（ユーザー）の側に立ってWebページを作成するということのようで、アクセスアップのための本などでよく見かけます。サイトナビゲーションが適切でないと特に初見の閲覧者を逃してしまう、ということが理由のようですね。代表的な注意点としては

・同じカテゴリのコンテンツは同じ場所、もしくはその周辺にまとめる。
・リンクは目立ようにする。あるいは各ページで共通の場所に配置する。
・画面解像度は一般的に流通している最小に考慮し、複数のブラウザで動作確認をする。
・一般的でない英語や、特殊な言葉を初めから頻繁に使用しない。

　ということが上げられると思います。
　まぁ、個人の趣味のサイトでここら辺まで考えなければならないということもないと思いますが、商用サイトを作ろうという方は考えておいたほうがいいと思います。
　私的な経験ですが、某有名メーカーの商品のことを知りたくてそのメーカーのHPに行ってみたら、Flashで凝って作られたデザインなのはいいけどリンクがどこにあるのか分かりにくく、リンクを見つけても英語が乱用されていてリンク先が一体何のコンテンツでどんな商品がまとめられているのか分からず、サイトマップとおぼしきページに行ってもそのメーカーでは常識なのかよく知らない言葉が沢山で、そもそも商品が載っているページはどこだ！とページ間を行ったりきたりの迷宮入り……。
　結局そのメーカーの商品の詳細は分からず、僕の購買対象からそれは即座に削除されました。
　ページデザインに凝るのは企業イメージを構築するためにも重要なことだとは思いますが、そのためにユーザーをないがしろにしては本末転倒でしょう。

　……と、いうこともありますので。
　商用サイトの場合はこのユーザビリティが非常に重要なことになりますので、十分にお気をつけ下さいね。

△TOP

８．ディレクトリ構造

　ちょっとWebページのレイアウトとは違いますが。
　ページのレイアウトと同じくらい重要なのがこの『ディレクトリ構造』です。ようはそこにどのファイルやフォルダがあるという構造ですね。
　ページを作っているときはその中身にかかりっきりになっていて、ひたすらにファイルが増えていって、ある程度作ったところでたくさんできたファイルをフォルダ分けして整理する……なんてこともあると思います。
　というか、僕はよくやっちゃいます。
　そして愕然。
　しまった……リンクが切れてる……。
　そう。ファイルを整理するということは、ページのリンクの関係が変わることを多々引き起こすんです。
　それまで同じフォルダに入っていた二つのファイルをカテゴリ別のフォルダに振り分けるだけで、ソースに記述していたリンクは無効になってしまいますから。ファイルを大量に作れば作るほど、後のディレクトリの変更はリンクの修正を面倒なものにしてしまいます。
　かといって、ディレクトリを整理しないとどこにどのファイルがあるんだか分かりにくくもなってしまいます。
　これを予防するために、はじめに大まかなものでもディレクトリ構造を構築しておくといいですよ。サーバーへのアップをしやすいように、あるいは更新するときどこにどんなファイルがあるか分かりやすいように。
　ええ、これまでディレクトリ構造の変更に伴う修正だけで、かなりの時間食われてきましたとも……。

△TOP

R：	ぐっはー
C：	どしたい、ため息なんかついて。
R：	ため息！？今のをため息といいますか！？
C：	だったら他のなんだよ。うめきにしちゃ軽いし、悲鳴でもあるまいし。
R：	え？え～…んー…… あ。アピールポイントの高いため息？
C：	……
R：	……
C：	…………
R：	……
C：	………………
R：	……ぅぅ。