CSS
無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00〜PM7:00
| ホーム |
| 無料講座 | Dreamweaver編 | ツアーパックの案内ページを作りましょう |
3.ツアーパックの案内ページを作りましょう

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

ツアーパックの案内ページを作りましょう

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

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

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

他のページも作っていく

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

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

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

他のページも作っていく

 

テーブルの装飾

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

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

divタグは今回、ここでは使いません。下図のように「横に並べる」のは、divだとステップが複雑になるからです。
さて、このテーブルですが、ポイントがいくつかあります。大きいものはこの二点です。
■テキストが入っているセルの背景色が、それぞれ違う
■画像がセルの上端に、ぴったり寄っている

セルごとに指定を分けていく必要がある、ということで、少しステップアップになりますね。これらの指定はcssで行っていきます。

テーブルの装飾

※↑全体が写るように、縮小表示しています
1つ目のセル

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

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

h3は「3番めに重要な見出しの行」のことです。<h3></h3>で囲まれた部分がh3になり、h2より小さな字、h4より大きな字で表示されます。
今回は「!」だけ、イタリック(斜体文字)にしてみましょう。
そしてindex.htmlでも出てきたリストを使い、ポイントを項目ごとに分けます。
リストを使って書くことで、まとまりも分かりやすくなり、一目で「ポイントはこんなにあるんだな」と理解してもらえます。

テーブルの装飾

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

テーブルの装飾

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

バーティカル・アライン
vertical-align(バーティカル・アライン)は、セルの中のテキストや画像を上揃えにするか、真ん中揃えにするか、下揃えにするかを決めることができます。
セルの中の文章量がばらばらだったりする時にとても便利です。

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

テーブルの装飾

tdには、marginを指定しても意味がありません。tdの中に余白を作りたい場合は、必ずpaddingで指定をしましょう。

これは「tdはtrの中にぴったり入っているもの」だからです。

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

テーブルの装飾

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

テーブルの装飾

ショートハンド
padding: 0px 0px 20px 10px ;というような指定の仕方は、ショートハンドといいます。いちいちpadding-top: 0px......と書かなくてもいいので、cssファイルを軽くするのに便利です。
順番は上・右・下・左と決まっています。「上」から始まって時計回り、と覚えましょう。
htmlはさきほどと同じく、tdにclass指定します。

テーブルの装飾

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

テーブルの装飾

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

テーブルの装飾

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

テーブルの装飾

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

テーブルの装飾

テーブルの装飾

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

テーブルの装飾

※↑全体が写るように、縮小表示しています
リストの先頭につく黒丸や画像は、基本的にリストに指定した幅の「外」に表示されます。
TOPへのリンクを入れて、完成!
うっかり忘れてしまいがちですが、必ず、各ページからTOPページに戻れるよう、リンクをどこかに張る必要があります。
分かりやすい言葉で、見ている人が迷子にならないようにリンクを張りましょう。

テーブルの装飾

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

テーブルの装飾

リンクは「張る」?「貼る」?
どちらも使われているようですね。ですが「張る」の方が正しいです。

なぜかというと、リンクは【場所と場所をつなぐもの】だからです。拡張する、橋渡しをする、といった意味合いがありますね。アンテナを張り巡らせる…というような言い回しも、「張る」です。
対して、「貼る」には、ペーストするというような意味しかありません。

ですから、自分のサイトにリンクして欲しい、と言いたい時は、「私のサイトにリンクを張って下さいね!」と書くのが正しいですね。

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

もどる

<< PAGE TOP >>


無料お問合せはこちらから TEL 075-257-4588 営業時間 AM10:00〜PM7:00
| ホーム |
| 無料講座 | Dreamweaver編 | ツアーパックの案内ページを作りましょう |


CSS
Ryuumu