h1要素(大見出し)のスタイルを、
というふうに変えてみよう。この場合、スタイル定義ファイル
(sample.css
) に以下のように記述する。
h1{ font-size:250%; /* 文字サイズを250%に大きく */ color: blue; /* 文字色は青 */ background-color: white; /* 背景色は白 */ }
以下の手順で追加してみよう。
sample.css
を開くsample.css
に上記のスタイルを追加する念のため、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要素が以下のようになればうまく行っている。
- 鳥海山
- 月山
- 湯殿山
→目次