スタイルシートの指定法(2)

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

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

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

外部ファイル指定によるスタイルシート指定

スタイルシートの定義をHTMLファイルとは分けて作っておくことで、全ての HTML文書から共通で参照することができるようになる。つまり、自分の気に入っ たスタイルで統一されたページを何ページでも簡単に作ることができるようにな る。そのためにはまず、本文となるhtmlファイルに加えて、スタ イルを記述するファイルを作成する。以前作った story.html ファイルを修正しよう。

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

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

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

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

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

</body>
</html>

このうち、スタイル定義の部分(style要素)を 切り取って別のファイルに移動する。

ここでは、スタイルを格納する新しいファイルとして story.css という名前で作成する。

手順

  1. カーソルを <style type="text/css"> の 行の先頭に合わせる
  2. C-SPCをタイプする(Mark Setと表示される)
  3. カーソルを </style> の 次の行の先頭に合わせる
  4. C-wをタイプして指定した領域を切り取る
  5. story.cssファイルを開く

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

  6. C-yをタイプして先程削除した領域を貼り付け(ヤンク)して要 らない部分を削り以下のような内容にする

ファイル(2) story.css (スタイル定義ファイル) 

/* 私のスタイルシート */
h1 {text-align: center; color: blue;}
h2 {color: green;}

上記の内容がstory.cssファイルに保存されたことを確認した らもう一度story.htmlファイルに戻り、 以下の内容を追加する。

C-x b
Switch to buffer: (story.html) story.html

ファイル(1) story.html (本文ファイルの変更部分) 

 (省略)
  :
<title>My First Style Sheet</title>
<link rel="stylesheet" type="text/css" href="story.css">
</head>
  :
 (以下省略)

(参考: 書き変えた story.html全体)

全て書けたら保存して

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

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

スタイル定義を外部ファイルにしても同様に見栄えが変わることを確認せよ (見本)。

まとめ

スタイル定義を外部ファイルに記述する方法は以下のようになる。

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

    <link rel="stylesheet" type="text/css" href="story.css">

    と書く。title要素の前でも後でも構わない。link= と rel= の部分はお決まりなのでそのまま。 href=の後にはスタイルを決めるファイル名を指定する。

  2. (1)で指定したファイル名でスタイルを作成する。ファイル名は好きに 決めて良いが、 .css という拡張子のものにすると分かり やすい。

個別の要素のその場でスタイルを定義する方法

文章のある部分一箇所に下線を引きたいとか、文字を太くしたいなどの事を したい場合は要素の開始タグにstyle属性を指定する。

   :
 〜略〜
<p>会費は一人
<span style="text-decoration: underline;">5,000円</span>
です。</p>

↓

会費は一人 5,000円 です。

練習問題

時間割表を作ったtable.htmlのhead要素に外部スタイルファイ ル取り込み記述(linkタグ)を追加して、th要素に背 景色(background-color)を付けて見やすくせよ。たとえば以下の ような見栄えになる。


月曜日火曜日水曜日木曜日 金曜日
1山形の文化a
現代社会とボランティア 世界の政治経済
2計測法人間のためのロボット 英語III
3健康の科学情報リテラシーIIジェンダー論 英語IV
4言語と人間公益自由研究
医療と公益
5



 高齢化社会論
情報リテラシー