玄関へ1.基本的なレイアウトレイアウトのパターンを幾つか。HTMLでレイアウトを決めるには、概ね二通りの方法があります。一つは、一番上から下まで順にコンテンツを並べていく方法。一つは、コンテンツの位置を自由に配置していく方法。これはコンテンツを順に記述して、主にテキストの左・中央・右寄せなどを使ってレイアウトをしていくものです。どんなレイアウトでもコンテンツを順に記述していくのは同じなので(CSSでは例外あり)、まずはここから。→Exampleのソースを開く→解説版を開く(別窓ではありません)例としてのコンテンツのソースのページも用意しました。ブラウザの『ソースを表示』でも出すことができますので、使いやすいほうをご使用下さい。それをプリントアウトして、例を見ながら構造を理解していくのが一番勉強になるかなぁ......と思いまして。解説版ではそのソースを元にした、記述と構造の説明をしてみました。△TOP2.配色について色もレイアウトのうち。いうわけで、サイトの印象を一番初めに決定付けると言っても過言じゃない色についてちょっと。色を決めるのはもちろん作り手の自由なのですが、気をつけていたほうがいいこともあります。代表的なのは『背景色と文字色の関係』でしょうか。『背景色と文字色の関係』は、そのページでのテキストの読みやすさに直結します。黒の背景に濃灰色の文字というテキストがあったら、とても読みにくいでしょう?背景色と文字色を同系、あるいは似た色にするとこういったことが起こります。ページの雰囲気作りのためとはいえ、このような配色は閲覧者に優しくありませんし、そもそも読みにくい文字は“クリック&ドラッグで反転して読む”なんて技をやられがち。なったらページの雰囲気作りも配色もへったくれもありませんですよ。色弱の方には特に読みにくい配色というものもあるので、それも一考にいれられるとより多くの人に読みやすいサイトを提供できると思います。店舗サイトなどを作られたい方は、閲覧者に優しいサイトになるように気を配ったほうがいいと思います。背景色と文字色は、自分が作りたいページの雰囲気を壊さない範囲で読みやすい、というバランスで決定したほうが良いと思いますよ。いや、これが難しいんですけどねぇ。△TOP3.tableでのレイアウトページ内のコンテンツの位置を順に並べていくのではなく、位置を自由に決めたい場合は<table>を使う方法があります。ソースがとても複雑なものになりますので書くのは大変ではありますが、使いこなすととてもカッコいいサイトを作ることもできます。ここでは簡単な例をご紹介します。→Exampleのソースを開くなお、同じ構造で色付のテーブルと色と枠線無しのテーブルを並べています。記述はほとんど同じなので、ソースでは片方のだけ載せています。△TOP4.フレームでのレイアウト上下左右にページを分割できるフレームを使ったサイトは、片方をメニュー(各ページへのリンク)にし、片方をメインページにすることができます。この方法を使うと、メインに表示されたどんなに長いページをスクロールしてもメニューは位置を変えないので、とても各ページへのアクセスがしやすいサイトを作ることができます。→Exampleのソースを開くフレームは必ずしも分割した部分にコンテンツを載せなければいけないということはありません。分割した部分を飾りの一つとして利用することも可能です。フレームを用いるとファイル数が増えやすいので、『ディレクトリの構造』は先に作っていたほうがやりやすいですよ。これはまぁ、どのやり方でもいえることなんですが、この場合は特に。△TOP5.行間についてざっくりと。Windowsでは行間が縮まっているので、標準のままだと文章が少し読みにくいことがあります。それを解消したい場合はCSSで行間を広げてみましょう。type="text/css"><!--p{line-height:120%}--></style>と、書きましょう。%の前の数値は適度にお好みで。詳しくはCSS入門編以降に書いてますのでそちらをご参照下さい。△TOP6.CSSでのレイアウトCSSについてはこの後で詳しく書いていますので、やっぱりそちらを参照下さい。ここでは、CSSを用いたレイアウトの例をご紹介します。CSSではレイアウトはかなり自由に構築することができ、例えば『複数のコンテンツを同じ位置に配置して重ねる』なんてこともできます。これまでは複雑なレイアウトはtableを駆使することで作っていましたが、CSSではソースを簡潔にした上に同様のレイアウトを組み上げることができますし、またこれまでのHTMLのみのページではできなかったデザインもできるようになります。『リンクの上にカーソルを持っていくと色が変わる』などですね。→Exampleのソースを開く→解説版を開く(別窓ではありません)例でも使っていますが、CSSでレイアウトをする際には、『絶対位置でのコンテンツの位置指定』を使って画像や文章の配置を決めていく方法があります。これにはHTMLと違う大きな利点があります。それは、『ソースの記述の順番が目茶苦茶でもWebページのレイアウトには関係ない』という点です。HTMLでは横の並びは左から右、縦の並びは上から下という順番にレイアウトの記述をしていかねばなりません。CSSの絶対位置を使った指定では、例えばページでは一番下にくる文章をソースでは一番上に書くことも可能なのです。これが何に影響するかと言うと、検索エンジンと音声ブラウザです。検索エンジンでサイトが表示される時、同時にそのサイトの中にある文章の一部が表示されますね。ページの一部に検索対象がヒットした時は表示のされ方が変わりますが、ここでお話しするのは特にそのWebページのTOPページがヒットした時です。あれはソースの中で一番初めに出てくるテキストを読み込んでいるようです。サイトの簡単な説明文を一番下に持ってきていると、その以前にあるテキストが検索結果に表示されてしまうようなんですね。すると、閲覧者にはどんなページかさっぱり分からない文章が提供されてしまう。すると、その人がページを見に来てくれる可能性が低くなる、と。先ほど書いたとおりCSSの絶対位置を使った指定では『ページでは一番下にくる文章をソースでは一番上に書くことも可能』です。これを使えば、検索エンジンに表示させたい任意の文章をソースの一番上に(bodyタグ内です)に書いておくことができるわけです。音声ブラウザもどうやらソースを上から順に読んでいくのが基本のようです。文章が出てくる前に大量のレイアウトのためのソースがあるとそこに至るまでに時間がかかってしまう。文章が一番上にあればとてもスムースに情報を提供することができる。リンクの順番も適切に並べることもできますしね。これだけだといいこと尽くめのようですが、『絶対位置でのコンテンツの位置指定』には、とにかく作成するのにコツがいる・文字のサイズを%で拡大縮小されるとレイアウトが変になるなどのデメリットもあります。いえユーザビリティへの対策にはとても有効な技術だと思いますよ。覚えていて損はないかと。△TOP7.ユーザビリティ使いやすさのことです。・どこにリンクがあるか分かりやすい(これはアクセシビリティとも)・テキストサイズや配色が適当で、見やすい・様々なブラウザに対応・考慮している・様々な画面解像度に対応・考慮しているなどでしょうか。ようするに、閲覧者(ユーザー)の側に立ってWebページを作成するということのようで、アクセスアップのための本などでよく見かけます。サイトナビゲーションが適切でないと特に初見の閲覧者を逃してしまう、ということが理由のようですね。代表的な注意点としては・同じカテゴリのコンテンツは同じ場所、もしくはその周辺にまとめる。・リンクは目立ようにする。各ページで共通の場所に配置する。・画面解像度は一般的に流通している最小に考慮し、複数のブラウザで動作確認をする。・一般的でない英語や、特殊な言葉を初めから頻繁に使用しない。いうことが上げられると思います。個人の趣味のサイトでここら辺まで考えなければならないということもないと思いますが、商用サイトを作ろうという方は考えておいたほうがいいと思います。私的な経験ですが、某有名メーカーの商品のことを知りたくてそのメーカーのHPに行ってみたら、Flashで凝って作られたデザインなのはいいけどリンクがどこにあるのか分かりにくく、リンクを見つけても英語が乱用されていてリンク先が一体何のコンテンツでどんな商品がまとめられているのか分からず、サイトマップとおぼしきページに行ってもそのメーカーでは常識なのかよく知らない言葉が沢山で、そもそも商品が載っているページはどこだ!とページ間を行ったりきたりの迷宮入り......。結局そのメーカーの商品の詳細は分からず、僕の購買対象からそれは即座に削除されました。ページデザインに凝るのは企業イメージを構築するためにも重要なことだとは思いますが、そのためにユーザーをないがしろにしては本末転倒でしょう。......と、いうこともありますので。商用サイトの場合はこのユーザビリティが非常に重要なことになりますので、十分にお気をつけ下さいね。△TOP8.ディレクトリ構造ちょっとWebページのレイアウトとは違いますが。ページのレイアウトと同じくらい重要なのがこの『ディレクトリ構造』です。ようはそこにどのファイルやフォルダがあるという構造ですね。ページを作っているときはその中身にかかりっきりになっていて、ひたすらにファイルが増えていって、ある程度作ったところでたくさんできたファイルをフォルダ分けして整理する......なんてこともあると思います。いうか、僕はよくやっちゃいます。しまった......リンクが切れてる......。ファイルを整理するということは、ページのリンクの関係が変わることを多々引き起こすんです。それまで同じフォルダに入っていた二つのファイルをカテゴリ別のフォルダに振り分けるだけで、ソースに記述していたリンクは無効になってしまいますから。ファイルを大量に作れば作るほど、後のディレクトリの変更はリンクの修正を面倒なものにしてしまいます。いって、ディレクトリを整理しないとどこにどのファイルがあるんだか分かりにくくもなってしまいます。これを予防するために、はじめに大まかなものでもディレクトリ構造を構築しておくといいですよ。サーバーへのアップをしやすいように、あるいは更新するときどこにどんなファイルがあるか分かりやすいように。ええ、これまでディレクトリ構造の変更に伴う修正だけで、かなりの時間食われてきましたとも......。△TOPR:ぐっはーC:どしたい、ため息なんかついて。R:ため息!?今のをため息といいますか!?C:だったら他のなんだよ。うめきにしちゃ軽いし、悲鳴でもあるまいし。R:え?え〜...んー......あ。アピールポイントの高いため息?C:......R:......C:............R:......C:..................R:......ぅぅ。