スタイルシートの指定法

HTML文書にスタイルシートを重ねる方法には

  1. HTMLのヘッダ(head要素)でスタイルを定義する
  2. 外部ファイルでスタイルを定義する
  3. 個別の要素のその場でスタイルを定義する

がある。ここでは1と3の方法を説明しよう。

簡単なスタイルシート利用

上記の1の方法では、本文となるhtmlファイルのhead要素内に style要素を配置し、内部に その文書で利用するスタイルを定義する。まずは、次のファイルを story.html という名前で作成する。
( を付けた部分にはあとから書き足す部分 があるので間を開けておく)

C-x C-f
Find file: ~/public_html/story.html

ファイル(1) story.html (本体文書ファイル) 

<!DOCTYPE html>
<html>
<head>
<title>My First Style Sheet</title>
 
</head>

<body>
<h1>公益太郎物語</h1>
<h2>まえがき</h2>
<p>私の物語である。</p>
<h2>結論</h2>
<p>おしまい。</p>

</body>
</html>

全て書けたら保存して

http://roy.e.koeki-u.ac.jp/~ログイン名/story.html

を参照してどのように見えるか確認せよ。

続けて、先程間を開けておいた部分に style要素を追加する。具体的には次の記述を追加する。 

   :
 省略
<title>My First Style Sheet</title>

<style>
 h1 {text-align: center; color: blue;}
 h2 {color: green;}
</style>
</head>
   :
 以下省略

※注意※ 上記のtext-align, color の直後の記号はコロン (:)であり、center, blue, green の直後の記号はセミコロン(;) である。

全て書けたら保存して

http://roy.e.koeki-u.ac.jp/~ログイン名/story.html

を参照してどのように見えるか確認せよ。

先ほどと大きく見映えが変わっていることを確認せよ (見本)。

まとめ

見本のファイルが20行以上もあるので難しく感じたかもしれないが、今回ス タイルに関して覚えるべき新しいことがらは以下の二つである。

  1. HTMLヘッダ(head要素内)に

    <style>
 h1 {text-align: center; color: blue;}
 h2 {color: green;}
</style>

    と書く。title要素の前でも後でも構わない。

  2. style要素内にスタイル定義を書く。

このような記述を加えることで、任意の要素(中の文字)を装飾することが自 在にできるようになる。

練習問題

  1. 作成したHTML文書のスタイル定義を各自修正し、h1要素、h2要素の色 を変更してみよ。

  2. スタイル定義を修正し、body要素の背景色を変更してみ よ。背景色の指定は 

    background-color: 背景色;

    として行なう。

情報リテラシー