ＴＯＰページだけでは、1つのサイトとして完成させるには寂しいですよね。
「内容」となるページをどんどん作って、充実したサイトを作りましょう！

では、ツアーパックの案内ページを作りましょう。リュウム・トラベラーズのオリジナル海外旅行のご案内です。

ツアーの金額や、どこへ行くか？どんな交通手段を使うのか？といった情報は、事前にしっかりまとめておきましょう。自分がお客さんだったら何を知りたいだろう、どんなことが書いてあったら行きたくなるだろう、と考えながら情報をまとめれば、見る人にとって魅力的なページができあがります。

今回は下図のようなページ「sekai.html」（縦に長いので、キャプチャは途中までです）を作成します。

※↑全体が写るように、縮小表示しています

→完成したページサンプルを見る
→ページの土台のサンプルを見る

下図の部分は、index.htmlを作成し終えた後なら簡単にできるはずです。赤枠・赤字のヒントをもとに、復習をかねて作成しましょう。

 

「ロイヤル・ヨーロッパ10日間」の部分は画像とテキストが並んでいるだけなので、簡単にできるはずです。もしできなければ、自分で作成したindex.htmlをもう一度見てみましょう。

さて、このロイヤル・ヨーロッパ10日間の説明は、テーブルで作成します。

さて、このテーブルですが、ポイントがいくつかあります。大きいものはこの二点です。
■テキストが入っているセルの背景色が、それぞれ違う
■画像がセルの上端に、ぴったり寄っている
セルごとに指定を分けていく必要がある、ということで、少しステップアップになりますね。これらの指定はcssで行っていきます。

※↑全体が写るように、縮小表示しています

まず、２行２列のテーブルを作ります。

１つ目のセルが下図ですね。まずはテキストを全て打ち込み、「ここがポイント！」をh3にしましょう。

そしてindex.htmlでも出てきたリストを使い、ポイントを項目ごとに分けます。
リストを使って書くことで、まとまりも分かりやすくなり、一目で「ポイントはこんなにあるんだな」と理解してもらえます。

さて、このセルの背景色や文字の大きさは、こんな風に指定をしています。

セル内の余白を上下左右に10px、背景色はクリーム色、文字の大きさは13px。
line-heightで「テキストの行間隔を1.5倍にする」という指定もしています。これにより行と行の間に適度な間隔が空いて、読みやすくなるわけですね。
最後のタグは初めて出てきました。バーティカル・アラインといいます。

html上の指定はこのようにします。

写真の入っているセルですね。下図のようになります。
これはDreamweaver上の画面をキャプチャしたものですが、赤丸部分に注目して下さい。このセルの左端はスペースができていて、上と右はスペースができていませんね。

この部分は「paddingは上：0px、右0px、下20px、左10px」「セルの中にあるテキストや画像を、上揃えにする 」という指定をしてあります。

htmlはさきほどと同じく、tdにclass指定します。

3つ目のセルは1つ目を、4つ目のセルは2つ目を、それぞれ繰り返す形で簡単に進めることができるはずです。

セルの背景色をクリーム色から薄桃色に変えたcssのclassを作り、htmlでtdに指定しましょう。

<ul></ul>で囲まれた部分、つまりリストは、何の指定もない状態ではただ画面の左端から右端まで、ずらずらと表示されてしまいます。

これでは、左から右まで目線を動かさなければならず、非常に見づらいです。
見やすくするため、このリストに幅を指定し、なおかつセンタリングしましょう。

こうすることで、中央寄せになり、なおかつ指定した600pxを超える長さの文章があれば折り返されるようになりました。

※↑全体が写るように、縮小表示しています うっかり忘れてしまいがちですが、必ず、各ページからＴＯＰページに戻れるよう、リンクをどこかに張る必要があります。
分かりやすい言葉で、見ている人が迷子にならないようにリンクを張りましょう。

html上では下図のようになります。ここまでやってきたあなたなら、楽勝のはずですね。

さて、 これで１つ、ページが完成しました！ ＴＯＰページからこのページへのリンクも忘れずに張って、どんどんページを増やしていきましょう！