講義（山本裕樹）

ユーザ用ツール

サイト用ツール

トレース: • 【情報リテラシー】第12回 HTML -スタイルシート-
info_literacy:lecture12

【情報リテラシー】第12回 HTML -スタイルシート-

HTMLとスタイル

HTMLが登場した一番大きな目的は、文書の論理構造を明確に記述できるようにして、どんな環境で読んだときにも表している内容が正確に伝わることである。 つまり、自分が HTML で書いたものを他の人がカラーディスプレイのついているパソコンで読んでも、白黒画面で読んでも、スマートフォンで読んでも誤解無く意味が伝わるようになっていることが大前提である。

しかし、文書のポイントを的確に伝えるには、文章を装飾して見栄えをよくした方がよい場合がある。 例えば、文章の非常に重要な部分を目立たせるためには「赤色の文字」にしたり、「黄色のマーカー」でなぞったりして目立つようにする。 そのように適切に色をつけることは、読み手に重要な部分を明確に伝える助けとなる。

ここで一つ注意しなければならない点がある。 

重要なのは「赤色や黄色にすること」ではなく、「そこが目立つような装飾をすること」である。

つまり、赤色にすることは、ほとんどの場合、他の部分と違うことを伝えるための「手段」であり、赤色でなければならないという理由は、まずない。 例えば、黄色のマーカーで「ここは重要」と引いても、オレンジ色のマーカーで「ここは重要」と引いても、「重要」だと分かれば良いので違いはない。

一方、色に関する話題を書くときのように、「赤」を表現するときに赤色で書くことが目的、かつ重要であることもある。 このような場合はストレートに赤色で「赤」であることを表現した方が良い。

まとめると、「重要であること」を示したり「目立たせる」ために色や大きさを変えたりするのか、それとも「色そのもの」や「大きさそのもの」を示したいのかを考えて HTML 文書の装飾を考えることが重要である。

スタイルシート

HTML 文書の見栄え（スタイル）を定義するには、スタイルシートを使用する。

文書の論理構造を示すために HTML を使用し、文書の見栄えを定義するためにスタイルシートを使用するのが一般的である。 論理構造と見栄えを分けて扱うことで HTML 文書を効率よく記述することができる。

スタイルを定義するための言語（スタイルシート言語）としてはいくつかあるが、CSS（Cascading Style Sheets） が一般的に使われるため、ここでは CSS を扱う。

CSS 規則セット

スタイルシートの全体の構造を規則セットという。

CSS で記述する規則セットは以下のような形式である。 

h1 {text-align: center; color: blue;}

CSS規則セット

セレクタは規則セットの先頭にある HTML 要素名である。 セレクタで指定した要素が備えているプロパティにプロパティ値が適用される。

  • セレクタには複数の要素を「,」（カンマ）で区切って記述できる。
  • セレクタの要素に適用する規則セットは、そのセレクタの後に「{}」で囲む。
  • それぞれの宣言内では、プロパティの後に「:」（コロン）、その後にプロパティ値を記述する。
  • 宣言の最後には「;」（セミコロン）を付ける。
  • 規則セット内では複数の宣言を記述できる。途中で半角の空白や改行を入れても構わない。

例1

h1 要素に2つの宣言を記述する。 

h1 {text-align: center; color: blue;}

これは次のように改行して記述しても良い。 

h1 {
  text-align: center;
  color: blue;
}

例2

h1 要素と h2 要素に青色の文字を適用するには次のようにそれぞれの要素で定義する。 

h1 {color: blue;}
h2 {color: blue;}

宣言が同じ内容ならば、セレクタに複数の要素をまとめて記述しても良い。 

h1,h2 {color: blue;}

参考

スタイルシートの指定方法

HTML 文書でスタイルシートを利用するには3通りの方法がある。

①head要素内のstyle要素でスタイルを定義

HTML の head 要素内において、style 要素でスタイルを定義する方法である。

まずは「~/public_html/music.html」を書き換える。 music.html は前回の講義で作成した。

emacs で Ctrl+X Ctrl+F と連続してキー操作し、「Find File:」の次に「~/public_html/music.html」と入力して Enter を押す。

music.html において、head 要素の中の title 要素の下に黄色い部分の style 要素を挿入する。 style 要素はtitle 要素の下でなくても良いが、style 要素は head 要素の中に入れなくてはならない。

music.html
  2. <!DOCTYPE html>
  3. <html lang="ja">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Music</title>
  7. <style>
  8. h1 {text-align: center; color: blue;}
  9. li {text-decoration: underline;}
  10. p {color: #00a040;}
  11. </style>
  12. </head>
  13. <body>
  14. <h1>音楽のページ</h1>
  15. <p>音楽で好きなジャンルは以下の通りです。</p>
  16. <ul>
  17.  <li>ロック</li>
  18.  <li>アニソン</li>
  19. </ul>
  20. <p>この中で一番好きなのはロックです。</p>
  21. </body>
  22. </html>

保存したら Firefox のアドレスバーに次の URL を入力して確認してみよう。 

http://roy.e.koeki-u.ac.jp/~ユーザ名/music.html

h1 要素と li 要素の見映えが変わっていることがが分かる。

この music.html のスタイルシートの意味は以下の通り。

要素 プロパティ プロパティ値 効果
h1 text-align center 中央揃えにする。
color blue 文字色を青色にする。
li text-decoration underline 文字の装飾として下線を引く。
p color #00a040 文字色を #00a040 にする。

色の指定

スタイルの定義の中で、文字色や背景色などの色の指定方法には二通りある。

  • blue や cyan など英単語で指定する方法
  • #00a040 のように「#」（シャープ）の次に赤（Red）, 緑（Green）, 青（Blue） の値を 16 進数1)で指定する方法

参考

クラスによるスタイル指定

p 要素については、style 要素で 

p {color: #00a040;}

とすると、同じ HTML 文書にある全ての p 要素の文字色が #00a040 で表示される。

しかし、重要なところだけに下線を引いたり、一部分だけスタイルを変えたいことがある。 このような場合は、定義するスタイルにクラス名をつけておき、実際にスタイルを変えたい個々の要素でそのクラス名を指定する。 クラス名はある程度自由に付けて良い。

クラスは style 要素の中で定義する。 クラスは適用したい要素名の後に「.」を付けて定義する。 

要素名.クラス名 {宣言}

全ての要素について共通に適用したい場合は、要素名を書かずにいきなり「.」から始める。 

.クラス名 {宣言}

また、要素にクラス名を指定するには開始タグの中で class 属性を使用する。

例えば music.html を以下のように書き換える（黄色の部分）。

music.html
  2. <!DOCTYPE html>
  3. <html lang="ja">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Music</title>
  7. <style>
  8. h1 {text-align: center; color: blue;}
  9. li {text-decoration: underline;}
  10. p.genre {color: #00a040;}
  11. .important {background-color: yellow;}
  12. </style>
  13. </head>
  14. <body>
  15. <h1>音楽のページ</h1>
  16. <p class="genre">音楽で好きなジャンルは以下の通りです。</p>
  17. <ul>
  18.  <li>ロック</li>
  19.  <li>アニソン</li>
  20. </ul>
  21. <p>この中で一番好きなのは<span class="important">ロック</span>です。</p>
  22. </body>
  23. </html>

保存したら Firefox のリロードボタンで再読込して確認する。

  • p.genre によって、p 要素のクラス genre に適用される。
  • .important によって、全ての要素のクラス important に適用される。

小テスト

Moodle Server（非公式） で第12回の小テストを受験しなさい。

②個別の要素でスタイルを定義

HTML 文書全体ではなく、ある要素だけ見栄えを変えたい場合には、その要素の開始タグに style 属性でスタイルを定義する方法がある。

例えば、music.html の li 要素の一つ「<li>ロック</li>」を以下のように書き換えてみよう。 

 <li style="font-style: italic;">ロック</li>

保存したら Firefox のリロードボタンで再読込して確認する。

これは「ロック」の li 要素に style 属性でプロパティ font-style にプロパティ値 italic を定義している。 順序なしリストの「ロック」のみがイタリック体で表示されるはずである。

③外部ファイルでスタイルを定義

スタイルシートを HTML ファイルとは別のファイルに記述する方法である。

ここでは、music.html からスタイル定義の部分を mystyle.css というファイルに分けて記述する。

まず、music.html を以下のように書き換える。 style 要素を削除して、link 要素を挿入する。

music.html
  2. <!DOCTYPE html>
  3. <html lang="ja">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Music</title>
  7. <link rel="stylesheet" type="text/css" href="mystyle.css">
  8. </head>
  9. <body>
  10. <h1>音楽のページ</h1>
  11. <p class="genre">音楽で好きなジャンルは以下の通りです。</p>
  12. <ul>
  13.  <li>ロック</li>
  14.  <li>アニソン</li>
  15. </ul>
  16. <p>この中で一番好きなのは<span class="important">ロック</span>です。</p>
  17. </body>
  18. </html>

保存したら Firefox のリロードボタンで music.html を再読込して確認すると、装飾が無くなるはずである。

ここで挿入した link 要素 

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

は、mystyle.css というファイルを参照してスタイルシートとして使うという意味であるが、mystyle.css をまだ用意していないので、この時点では装飾は行われない。 link 要素は title 要素の下でなくても良いが、link 要素は head 要素の中に入れなくてはならない。

次に、「~/public_html/mystyle.css」を以下のように作成しよう。

mystyle.css
  2. body {background-color: aquamarine;}
  3. h1 {text-align: center; color: blue;}
  4. li {text-decoration: underline;}

保存したら Firefox のリロードボタンで music.html を再読込して確認する。 h1 要素と li 要素の見栄えが変わるはずである。

スタイルシートを分ける意義

HTML 文書が1つなら①②の方法でスタイルを定義しても良いが、複数の HTML 文書の見栄えを統一して変更したい場合には、それぞれの HTML 文書の中に同じスタイル定義を記述していくのはとても面倒である。

③の方法では、スタイルの定義ファイルを HTML 文書とは分けて作成し、HTML 文書からその定義ファイルを参照した。 複数の HTML 文書がある場合は、その定義ファイルを参照する形式にすることで、定義ファイルだけを書き変えれば全ての HTML 文書の見栄えを変えることができる。

スタイルシート

その効果を確かめるために、別の HTML ファイルから mystyle.css を参照してみよう。

以前作成した list.html に link 要素を挿入する（黄色の部分）。

list.html
  2. <!DOCTYPE html>
  3. <html lang="ja">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Listing Sample</title>
  7. <link rel="stylesheet" type="text/css" href="mystyle.css">
  8. </head>
  9. <body>
  10. <h1>果物</h1>
  11. <ul>
  12.  <li>林檎の品種
  13.      <ol>
  14.       <li>ふじ</li>
  15.       <li>王林</li>
  16.      </ol>
  17.  </li>
  18.  <li>梨の品種
  19.      <ol>
  20.       <li>幸水</li>
  21.       <li>豊水</li>
  22.      </ol>
  23.  </li>
  24. </ul>
  25. </body>
  26. </html>

保存したら Firefox のアドレスバーに次の URL を入力して確認してみよう。 

http://roy.e.koeki-u.ac.jp/~ユーザ名/list.html

文法のチェック

HTML やスタイルシート（CSS）において、ある程度の文法の間違いは Web ブラウザ側でいいように解釈して表示してくれるので、どこが間違っているのか分かりにくい。

HTML や CSS が文法的に正しいかをチェックしてくれるサイトがあるのでこれを利用するとよい。

  • DirtyMarkup Formatter
    • [HTML] か [CSS] を選んで [Clean] ボタンを押すと、文法がおかしいところはある程度直してくれる。

W3C（World Wide Web Consortium） は HTML や CSS などの技術の標準化を推進している団体である。

より良いWebページを目指す

より良いWebページを目指す（広瀬先生）

機種依存文字については、最近は Unicode が標準になっているので、問題が起きにくくなってきている。

課題

timetable2.html というファイル名でS2Q に自分が履修している授業の時間割を table 要素とスタイルシートを利用した HTML ファイルで作成しなさい。

作成例 時間割の作成例

赤で書かれた指示に従うこと。

表の枠線のスタイルは solid の代わりに inset 5px を使うこと。

「~/public_html/timetable2.html」というファイルは Firefox では以下の URL で見ることができる。 

http://roy.e.koeki-u.ac.jp/~ユーザ名/timetable2.html

スタイルシートは①②③のどの方法でもよいが、③の方法の場合は CSS ファイルも提出すること。

作成した HTML ファイル（と CSS ファイル）はMoodle Server（非公式） の第12回の課題に提出すること。

1)
16 進数とは 1 つの桁に 0 から 15 までの数字が入る数え方。10 から 15 の数字は 1 桁で表せないため、「a」から「f」のアルファベットで代用する。
info_literacy/lecture12.txt · 最終更新: 2024/04/19 07:38 by 47.128.25.120