デザイン

自分のホームページについて具体的なイメージがある方はどんどん作成して、ホームページの転送のところに 進んでください。まだイメージがわかないという方のために、図のようなペットを紹介するページの作り方を説明し ます。写真やテキストを手持ちのものに変えてみてください。ここでは全体の入り口となるページと、ほかに2、3ペー ジの簡単な構成のものにしておきます。あまり欲張っては長続きしません。まず、トップページを作ります。アクセスした 人が最初に見るのがトップページです。見栄え をよくすることも大事ですが、必要な要素は必 ず入れるようにします。デザインはあとで考え ることにして、まずは必要な要素を上から願に 記述していきましょう。ページ全体のタイトル、概要の説明、各ページへのリンク(メニュー)、連絡先のアドレスなどが必要でしょう。 トップページはほとんどの場合 index.html という名前で保存するよう定められてい るはずですので、ここでもそれに習います。

続いて写真紹介のページを作成します。この ページ全体の見出し、説明、写真の見出し、写真、写真の説明を入れます。写真と 写真の問は罫線を入れて区切ります。また、トップページに戻るリンクは必ず入れるように します。ここではトップページもその他の ページも閉じフォルダに作成します。また、写 真のファイルも同じフォルダに置くことを想定しました。

ページを保存したら、表示を確認します。まず、トップページを表示し、続いてリンクをク リックして、写真紹介のページが正しく表示されるか確認します。

デザインを考える

非常に殺風景なもの です。どのようにしたいかを考え、どのcssを使えばよいか考えてみましょう。最初にデザインを考えるより、必要な要素をHTMLで記述してから考えたほうが具体的にイメージしやすいのではないでしょうか。ここで は右のように考えました。

余白を取るのは margin プロパティでしたね。 bodyタグにmarginプロパティを使うことに よって、ウインドウの端からの余白を取ること ができます。どの程度取るかは内容にもよりま すが、ここでは左右200 ピクセル、上下50 ピク セル空きを取ってみます。実際には表示を確 認しながら微鯛藍していくとよいでしょう。ス タイルの設定方法ですが、外部スタイルシート ファイルを作成する方法にします。右のように 記述して、ファイル名を style.css として、 HTMLファイルと同一階層に保存することにし ます。 HTML ァイルのほうにも、スタイルシー トを読み込む設定を記述します。ここでいっ たん表示して、余白が設定されていることを確 認します。

次に見出しに色を設定して、目立つようにして みましょう。見出しの h1 h 2 タグの背景色を 「#cc66ff」、文字色を自にする設定を加えます。

量後に写真と、その見出し、説明文をコンパク トにまとめてみます。写真にはfloatプロパティを「left」と指定し、説明文を右に回りこませるようにします。このとき、floatプロパティの 解釈がフラウザによって若干遣うので、写真の 見出し、写真、写真の説明を div タグでグループ 化して、高さを設定しておきます( ここでは写 真の高さより少し高い200px)。また、画像 とテキストの聞に少しマージンをとります。 最初のうちは面倒でも、 1つ設定を行ったら表 示を確認するようにして、おかしなところは微調整していきましょう。