h1要素のスタイル変更

h1要素(大見出し)のスタイルを、

文字をもっと大きくする
文字色を青にする
背景色を白にする

というふうに変えてみよう。この場合、スタイル定義ファイル (sample.css) に以下のように記述する。

h1{
   font-size:250%;		/* 文字サイズを250%に大きく */
   color: blue;			/* 文字色は青 */
   background-color: white;	/* 背景色は白 */
}

以下の手順で追加してみよう。

sample.cssを開く
→ C-x C-f sample.css [Return]
sample.cssに上記のスタイルを追加する
保存する
→ C-x C-s
ブラウザに戻り再読み込みする。

念のため、sample.html と sample.css 両ファイルの内容を以下に示しておく。

sample.html

<html>
 <head>
 <title>
 初めてのHTML
 </title>
 <link rel="stylesheet" type="text/css" href="sample.css">
 </head>

 <body>
 <h1>ようこそ</h1>
 <p>こんにちは。講習会へようこそ。
 今日は雪が突然降って大変でした。</p>

 <ul>
  <li>鳥海山</li>
  <li>月山</li>
  <li>湯殿山</li>
 </ul>
   :
   :(以下省略)

 </body>
</html>

sample.css

h1 {
   font-size:250%;
   color: blue;
   background-color: white;
}

h1要素の見映えが変わっただろうか。実験的に、もう一つのh1要素を足してみると良いだろう。このように、HTML文書には手を加えることなく、任意の要素を任意のスタイルに変更できることが分かった。

余裕があれば ul 要素の文字を太くし、背景色を変えてみよう sample.cssに以下のスタイル定義を追加してみよう。

ul {font-weight: bold; background-color: aqua;}

手順は以下のとおり。

sample.cssを開く(既に開いている場合はそのまま)
→ C-x C-f sample.css [Return]
ul {font-weight: bold; background-color: aqua;} を追加する
(/* …… */ で囲まれた部分は註釈なので書かなくて良い)
ファイルに保存 → C-x C-s
ブラウザに戻って最読み込みして確認

ul要素が以下のようになればうまく行っている。

鳥海山

月山

湯殿山

→目次