講義（山本裕樹）

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 【情報リテラシー】第12回 HTML -スタイルシート- ======

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

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

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

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

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

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

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

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

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

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

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

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

<code css>
h1 {text-align: center; color: blue;}
</code>

{{ css.png?nolink |CSS規則セット}}

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


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

=== 例1 ===
h1 要素に2つの宣言を記述する。
<code css>
h1 {text-align: center; color: blue;}
</code>
これは次のように改行して記述しても良い。
<code css>
h1 {
  text-align: center;
  color: blue;
}
</code>

=== 例2 ===
h1 要素と h2 要素に青色の文字を適用するには次のようにそれぞれの要素で定義する。
<code css>
h1 {color: blue;}
h2 {color: blue;}
</code>
宣言が同じ内容ならば、セレクタに複数の要素をまとめて記述しても良い。
<code css>
h1,h2 {color: blue;}
</code>


=== 参考 ===

  * [[http://www.htmq.com/style/|HTML クイックリファレンス - スタイルシートリファレンス（目的別）]]
  * [[http://www.htmq.com/css3/|HTML クイックリファレンス - CSS3 リファレンス]]

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

  * [[#①head要素内のstyle要素でスタイルを定義]]
  * [[#②個別の要素でスタイルを定義]]
  * [[#③外部ファイルでスタイルを定義]]


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

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

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

emacs で <key>C-x</key> <key>C-f</key> と連続してキー操作し、「''Find File:''」の次に「''~/public_html/music.html''」と入力して <key>Enter</key> を押す。

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

<file html music.html[enable_line_numbers="true",highlight_lines_extra="6,7,8,9,10"]>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Music</title>
<style>
h1 {text-align: center; color: blue;}
li {text-decoration: underline;}
p {color: #00a040;}
</style>
</head>
<body>
<h1>音楽のページ</h1>
<p>音楽で好きなジャンルは以下の通りです。</p>
<ul>
 <li>ロック</li>
 <li>アニソン</li>
</ul>
<p>この中で一番好きなのはロックです。</p>
</body>
</html>
</file>

保存したら 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'' など英単語で指定する方法
  * ''#<fc #cf0000>00</fc><fc #00cf00>a0</fc><fc #0000cf>40</fc>'' のように「''#''」（シャープ）の次に**<fc #cf0000>赤（Red）</fc>**, **<fc #00cf00>緑（Green）</fc>**, **<fc #0000cf>青（Blue）</fc>** の値を 16 進数((16 進数とは 1 つの桁に 0 から 15 までの数字が入る数え方。10 から 15 の数字は 1 桁で表せないため、「a」から「f」のアルファベットで代用する。))で指定する方法

=== 参考 ===
  * [[https://www.colordic.org|原色大辞典]]


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

p 要素については、style 要素で
<code html>
p {color: #00a040;}
</code>
とすると、同じ HTML 文書にある**<fc #ff0000>全ての p 要素</fc>**の文字色が ''#00a040'' で表示される。

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

クラスは style 要素の中で定義する。
クラスは適用したい要素名の後に「''.''」を付けて定義する。
<code css>
要素名.クラス名 {宣言}
</code>
全ての要素について共通に適用したい場合は、要素名を書かずにいきなり「''.''」から始める。
<code css>
.クラス名 {宣言}
</code>

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

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

<file html music.html[enable_line_numbers="true",highlight_lines_extra="9,10,15,20"]>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Music</title>
<style>
h1 {text-align: center; color: blue;}
li {text-decoration: underline;}
p.genre {color: #00a040;}
.important {background-color: yellow;}
</style>
</head>
<body>
<h1>音楽のページ</h1>
<p class="genre">音楽で好きなジャンルは以下の通りです。</p>
<ul>
 <li>ロック</li>
 <li>アニソン</li>
</ul>
<p>この中で一番好きなのは<span class="important">ロック</span>です。</p>
</body>
</html>
</file>

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

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

===== 小テスト =====

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


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

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

例えば、music.html の li 要素の一つ「''<li>ロック</li>''」を以下のように書き換えてみよう。
<code html>
 <li style="font-style: italic;">ロック</li>
</code>

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

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

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

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

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

<file html music.html[enable_line_numbers="true",highlight_lines_extra="6"]>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Music</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>音楽のページ</h1>
<p class="genre">音楽で好きなジャンルは以下の通りです。</p>
<ul>
 <li>ロック</li>
 <li>アニソン</li>
</ul>
<p>この中で一番好きなのは<span class="important">ロック</span>です。</p>
</body>
</html>
</file>

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

ここで挿入した link 要素
<code html>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</code>
は、mystyle.css というファイルを参照してスタイルシートとして使うという意味であるが、mystyle.css をまだ用意していないので、この時点では装飾は行われない。
link 要素は title 要素の下でなくても良いが、**<fc #ff0000>link 要素は head 要素の中に入れなくてはならない</fc>**。

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

<file css mystyle.css[enable_line_numbers="true"]>
body {background-color: aquamarine;}
h1 {text-align: center; color: blue;}
li {text-decoration: underline;}
</file>

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

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

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

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

{{ info_literacy:css_file.png?nolink |スタイルシート}}

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

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

<file html list.html[enable_line_numbers="true",highlight_lines_extra="6"]>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Listing Sample</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>果物</h1>
<ul>
 <li>林檎の品種
     <ol>
      <li>ふじ</li>
      <li>王林</li>
     </ol>
 </li>
 <li>梨の品種
     <ol>
      <li>幸水</li>
      <li>豊水</li>
     </ol>
 </li>
</ul>
</body>
</html>
</file>

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

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

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

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

  * [[https://www.10bestdesign.com/dirtymarkup/|DirtyMarkup Formatter]]
    * [HTML] か [CSS] を選んで [Clean] ボタンを押すと、文法がおかしいところはある程度直してくれる。

  * [[https://validator.w3.org/|The W3C Markup Validation Service]]
    * HTML の文法チェックができる。

  * [[https://jigsaw.w3.org/css-validator/|The W3C CSS Validation Service]]
    * CSS の文法チェックができる。

W3C（World Wide Web Consortium） は HTML や CSS などの技術の標準化を推進している団体である。
===== より良いWebページを目指す =====

[[https://www.koeki-prj.org/web/03/l03.html|より良いWebページを目指す（広瀬先生）]]

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


===== 課題 =====

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

作成例
{{ css_report.png?nolink |時間割の作成例}}

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

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

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

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


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

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

  * 締め切り：2023年7月15日（土）20時
  * [[moodle:upload]]