実習2

―スタイルシートを使う―

対象データをPC上に準備

  1. 練習1のときの「沖縄県のあらまし」のペイジを多少簡略化したものが http://www.void.tako.org/HTML/Samples/Sample2.html にあるので、そのペイジをブラウザーで開く。
  2. ブラウザーのコマンドで「ソースを表示」する。
  3. 自分のPCのテキストエディターを開き、ソースの内容をすべて複写してファイル(test.htmlという名前をつける)に保存する。
  4. ソースのウィンドウを閉じる。
  5. PC上の先ほどのHTMLファイルと同じディレクトリーの中にkouhouというディレクトリーを作っておき、 そこに画面上の3つの写真の画像を保存する。 (画像の上で右ボタンクリックでメニューを出し「名前をつけて画像を保存」すればよい)
  6. PC上のテキストファイルをブラウザーで表示させて、ネット上の物と同じ画面が表示されることを確認。
  7. HTML文書の日本語文字が文字化けするなどの理由でコード変換が必要な場合は、Microsoft FrontPage 2000を使うこと (一旦ファイルに保存してからFrontPageで開くとよい、またFrontPageの「標準」画面のほうで編集すると FrontPageにより勝手にタグが追加されてしまうので注意)。

修正する

  1. HTML文書にスタイルシートをファイルから取り込むように指定する(ファイル名は「my.css」とする)。 
    <link rel="STYLESHEET" type="text/css" href="my.css" title="My Style">
    具体的にはheadエレメントの中に上記のlinkエレメントを追加する。
  2. HTML文書と同じディレクトリーにmy.cssというテキストファイルを作成する。
  3. bodyエレメントの背景の色をrgb(255,255,128);に変更する。文字の色を27,48,127);に変更する。文字のサイズを12ピクセルにする。 
    body {
        color: rgb(27,48,127);
        background: rgb(255,255,128);
        font-size: 12px;
}
    ここで一旦ファイルを保存し、HTML文書を表示してみる。
  4. FOOクラスのbodyエレメントの背景の色をrgb(254,255,222)に変更する。文字の色をrgb(65,5,4);に変更する。左マージンを1.5emにする。上マージンを0.5emにする。 
    body.FOO {
        background: rgb(254,255,222);
        color: rgb(65,5,4);
        padding-top: 0.5em;
        padding-left: 1.5em;
}
    ここで一旦ファイルを保存し、HTML文書を表示してみて、どこが変わったかを見る。 変わらないことを確認し、HTML文書の<body>を<body class="FOO">にしてみるとどう変わるかを見る (文字のサイズに着目)。
  5. Pエレメントを「段落の始めは1文字下げる」ようにする。 また、行送りを1.8行分にする(これでずいぶん見やすくなるはず)。 
    p {
        text-indent: 1em;
        line-height: 1.8em;
}
    ここで一旦ファイルを保存し、HTML文書を表示してみる。 行送りのせいでずいぶん見やすくなったことを認識し、 段落先頭の字下げ量を確認。 その後HTMLファイルのほうの段落の先頭の空白を取り除いてから表示してみる。
  6. h1エレメントを中央ぞろえ、フォントが本文の3倍のサイズになるようにする。 
    h1 {
        text-align: center;
        font-size: 300%;
}
    ここで一旦ファイルを保存し、HTML文書を表示してみる。
  7. HTML文書を文法チェックしてみる。 <div align="center">についてのエラーを認識し、 それについて以下の修正をする。 
    div.photo {
        text-align: center;
}
    ファイルを保存し、HTML文書のほうでは<div align="center">という部分を <div class="photo">と修正する(「photo」は単に自分でつけた名前で、実際には 何でもいい)。 その後、HTML文書を表示してみたり、文法チェッカーにかけてみたりする。

HTML文書を表示する方法

  1. スタイルシートのファイルがHTML文書のファイルと同じディレクトリーにあることを確認する。
  2. 作成したHTML文書のファイルをInternet Explorerにドラグ&ドロップして表示してみる。

HTML文書のチェックをする方法

  1. Another HTML Lintのペイジ(http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )を開く。
  2. チェックオプションで「以下のすべてのチェックを有効にします。」と 「宗教的なチェックをすべて無効にします。」をONにする。
  3. 「チェック方式」を「URL」ではなく「DATA」に切り替える。
  4. PC上のテキストエディターでtest.htmlの内容を全選択し「コピー」する。
  5. Another HTML Lintのペイジの「DATA」の欄の大きいテキストを「クリア」ボタンでクリアし、そこに「ペイスト」する。
  6. 「チェック」ボタンを押す。

でき上がり例

return
$Id: exam2.html,v 1.8 2000/08/23 18:19:26 void Exp $