この授業のページは、皆さんご覧の通り、色々と装飾を付けています。 例えば、ページの一番上のレベル1の見出し(つまり、<h1> タグ)の背景には、キーボードの画像を使っていたり、レベル2の見出し(<h2> タグ)の背景には、マウスの絵を使っています。 他にも、HTML のタグのソースを例示している部分は、分かりやすいように背景を薄い水色にしていたりします。 前回、皆さんが作ったファイルには、このような装飾は全くありません。
前回の授業では、この辺りの説明はしていないので、どうやったらこのようなことができるのか分からないかと思います。 何か特別なタグや特別な属性を使っているように思えるかもしれません。 しかし、このページのソースを見ていただければ分かりますが、意外とシンプルな内容になっています。 前回、この授業のページで「ページのソースの表示」をして、「HTMLのソース」を見てもらいましたが、<h1> タグの部分には、特に他のタグや属性は付いていません。 タグを例示している部分でも、ちょっと属性が付いているだけです。
こんなにシンプルな内容なのに、こんなに色々と装飾が付いているのはなぜでしょう。 これは Cascading Style Sheets (以下、頭文字を取って CSS と呼ぶことにします。 単に「スタイルシート」と呼ばれることもあります。) という機能を使っているからです。 今回の授業では、この CSS の使い方を説明していきます。
まず、使い方の説明の前に、この CSS の機能を実感してもらいましょう。 以下のリンク先を見て下さい。 アドレスは違いますが、中身はこの授業のページそのままです。 しかし、デザインはかなり違います。 これは、実は、後で説明する CSS の定義ファイルを書き換えただけのものです。 この授業のページは各ページで、共通の CSS 定義ファイルを読み込んでいるので、ファイル一つ書き換えるだけで、全体のデザインが変わります。
http://joho.bun.kyoto-u.ac.jp/css-test/
なお、Wordの授業で、スタイルという概念が出てきました。 実は、ここで紹介した CSS もこれと類似の概念です。 CSS を使うと、HTML タグで示される文書の「論理構造」とは独立に、文書のレイアウトや装飾を自在に操作することが出来ます。
Wordのサンプルファイルでは、自分で「見出し1」、「見出し2」にスタイルを適用しました。 その上で、それぞれのスタイルの書式を変更するという作業を行いました。 HTMLでは、h1、h2、といった見出しのタグがすでに適用されているので、それぞれのタグのデザインを変更するにはどうすればいいか、考えてみましょう。
こうしたデザインの設定は、もちろん html に直接記載することで反映させるということもできますが、 このような記述をしてしまうと、 例えば、<h1> と </h1> で囲まれた部分を全て「青色」に変更したいという場合、 全てのページの全ての箇所で<h1> を探して書き換えをしなければならず、 修正や管理の上で非常に手間がかかります。 この話は、Wordでも同様ですね。
そこで、<h1> で囲まれた部分は全て「青色」にするという設定を別の箇所で一括して行っておけば、 例えば今度は「赤色」に変更したい場合には、 そこの値を「赤色」に変えてしまえば全て自動的に反映されることになります。 したがって、修正や管理が非常に効率的になります。 この一括で設定できるのがCSSということになります。
まずは、CSSの書き方を見てみます。 CSS の内容は、次のような書式で3つの項目を指定して記載することになっています。
「セレクタ」 {「プロパティ」:「値」}
「セレクタ」（selector）というのは、「スタイルを適用する対象」のことで、 主に「<h1>」や「<p>」などの HTML 上の要素名(タグの名前)が該当します。 さらに、後で説明する「class 名」や「id 名」によって、 範囲を限定して適用させることもできます。
「プロパティ」（property）というのは、 上で記載した「セレクタ」（適用対象）に「どのようなスタイルを適用するのか」を指定するものです。 「プロパティ」にどういった種類のものがあるのかについては、 CSS の仕様書で定義されていて、 それぞれの「プロパティ」毎にどういった「値」を指定することができるのかが決まっています。
ということで、例えば、HTML 文書全体の背景を「青色」にしたいという場合には、 次のように記述します。
body {background-color: blue}
ここで指定した「body」というのは、 HTML 文書の「<body> から </body> で囲まれた範囲」ということです。 そして、「background-color」というのが「背景色」のプロパティで、 こうしたプロパティが仕様書で定義されているということです。 そして、このプロパティ毎に指定できる値は決まっていますので、 「背景色」のプロパティの場合には、もちろん「色」が値となります。 そして、「色」の値については、いくつか指定の方法がありますが、 代表的な色の場合には、英語での名前がキーワードとして認識されます。
では、こうした CSS はどこに記載すればいいのでしょうか。 やり方は2通りあります。
［1］一つは、HTML 文書の <head> ～ </head> の中に、 <style> と </style> とで区切って記載する方法です。 具体的には次のような感じです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイトのタイトルです</title>
<style type="text/css">
body {background-color: blue}
</style>
</head>
［2］もう一つは、css ファイルを別に作成して、 HTML 文書にはその css ファイルを参照する命令文を記述するという方法です。 例えば、「style.css」というファイルを作成したとしてみましょう。 もちろん、参照命令を記述するのはHTML 文書の <head> ～ </head> の中です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイトのタイトルです</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
このように記載すると、このウェブページをブラウザで開いた時には、 「href」で指定されている css ファイルを参照しに行きます。 「./style.css」ということの意味は、 例えばこの「HTML 文書」が「index.html」だとすると、 「index.html」と同じ階層にある「style.css」ということになります。 一つ上の階層に「style.css」がある場合には、 「../style.css」と記載することになります。 また、css ファイルを別に作成した場合には、 html 文書で指定した文字コードと合わせる必要がありますので注意しましょう。
このように、CSS を記載する方法は2通りありますが、 ウェブサイトに複数のページが存在する場合、主に使用されるのは後者です。 つまり、「html 文書」とは別に「css ファイル」を作成し、 それぞれの「html 文書」には、その「css ファイル」を参照する命令を書き込む、 という方法です。 なぜ後者が採用されることが多いのかといえば、複数のページでデザインを統一させやすくなりますし、また、CSS で指定する内容が非常に多くなると別ファイルにて管理する方が効率的で管理しやすくなるからです。
それでは、いくつか具体的に基本的なプロパティを見ていきたいと思いますが、 その前に頻繁に使われる2つの「セレクタ」について説明しておきます。
例えば、<p> ～ </p> で囲まれているところは「段落」なのですが、 ある特定の段落については、別のデザイン（例えば文字を「赤色」、背景を「灰色」）にしたいという場合、 css で p というセレクタに「文字色：赤色」と「背景色：灰色」というプロパティを与えてしまうと、 全ての「p」について文字色が赤色、背景色が灰色になってしまいます。 そこで、「p」の中でもさらに「クラス」を区切って HTML を記述し、 その「クラス」に対して「文字色：赤色」「背景色：灰色」を指定するという方法をとります。 これが「class セレクタ」というものです。 「class セレクタ」については、同一文書内で何箇所指定しても構いません。
<p class="attention">
この段落は注意を促すために、文字色を赤色にしたいと思います。
</p>
<p>
この段落は普通の文章で説明したいと思います。
</p>
<p class="attention">
この段落から再度注意を促すために、文字色を赤色にしたいと思います。
</p>
このように、<p> でもクラス分けをしてやることで、 クラス分けされた <p> については「別のセレクタ」として設定することが可能となります。 もちろんクラスの名称（class="attention"）は自由に設定できますが、 これはできる限り論理構造を表わす名称にすることが推奨されています。 そして、このようなクラスの CSS の記述の仕方は次のようになります。
p.attention {
color: red;
background-color: gray;
}
ここで、「;」というのがありますが、 これはプロパティが複数ある場合にそれぞれを区切るためのものです。 最後のプロパティの後には「;」は必要ありませんが、 管理上、後でプロパティを追加する時に「;」を忘れないようにするために、 あらかじめ「;」を残したままにしておく場合があり、 上記の事例はこれに相当します。 また、CSS では空白や改行は無視されますので、 見やすいようにこのような形で記載するのが一般的です。 もちろん、全てを一行で繋げて記載しても構いません。
もう一つ、「id セレクタ」というのがあり、 これも基本的には上記の「class セレクタ」と同じようなものですが、 決定的に違うのは、「id セレクタ」は「同一文書内で一カ所にしか使用できない」という点です。 ですので、「id セレクタ」の主な用途としては、 グローバルナビゲーション（複数の HTML 文書へのナビリンク）や、 同一文書内でのリンク先指定といったものとなります。
<p id="definition">
この段落では、これから説明することの定義を行いますので、文字を太字にしておきたいと思います。
</p>
<p>
この段落は、なぜ上のような定義が必要なのかを普通の文体で説明しておきたいと思います。
</p>
<p id="example">
この段落では、上記の定義についていくつかの具体例を挙げておきたいと思います。 見やすいように背景だけ緑色にしておきたいと思います。
</p>
<p>
なお、以下のようにリンクを貼ると、先の定義の箇所に戻ってくれます。
<a href="#definition">「定義の箇所」<a>
</p>
上記のような「HTML」に対して、次のような「CSS」を記述します。
p#definition {
font-weight: bold;
}
p#example {
background-color: green;
}
ここで注意して欲しいのは、「class セレクタ」の場合には「.」で記載しましたが、 「id セレクタ」の場合には、「#」で記載するということです。
body {color: red}
なお、「値」としての色の指定方法は「RGB値」と「キーワード値」という2つの指定方法があります。 「RGB 値」は、「#000000」などのように、 「#」とRGBのそれぞれの値を6桁の16進数で表わしたものとを組み合わせて使用します。 他方、「キーワード値」は16色の標準デフォルトカラーのことで、 次のようなものです。
キーワード RGB 値 キーワード RGB 値 black #000000 green #008000 silver #c0c0c0 lime #00ff00 gray #808080 olive #808000 white #ffffff yellow #ffff00 maroon #800000 navy #000080 red #ff0000 blue #0000ff purple #800080 teal #008080 fuchsia #ff00ff aqua #00ffff
「文字色」に関連して、リンクを貼った時の文字色は、ブラウザのデフォルトのスタイルシートでは、
次のように指定されていことが多いです。
a:link {color: blue}
a:visited {color: purple}
a:hover {color: red}
a:active {color: red}
「a:link」とは未訪問のリンク表示のことで、青系で表示されるのが一般的です。
「a:visited」とは訪問済みのリンク表示のことで、紫で表示されるのが一般的です。
「a:hover」はカーソルをリンクにのせた時、「a:active」はリンクをクリックした時ですが、
いずれも赤で表示されるのが一般的です。
自分でリンクを作成した時の表示色を上記のもの以外を選択した場合、
訪問者が他のサイトとは違う表示になって戸惑うことがあるので注意が必要です。
body {
background-color: white;
background-image: url(./images/haikei.jpg);
background-repeat: repeat;
}
背景の指定は、色指定か画像指定で行います。 そして画像指定をした場合には、その画像を繰り返すのか繰り返さない（no-repeat）のか、 繰り返すとしたら全体（repeat）なのか、縦方向だけ（repeat-y）なのか、横方向だけ（repeat-x）なのか、 をさらに指定することになります。
body {
font-weight: bold;
font-size: large;
font-style: italic;
}
「font-weight」では、「normal/bold/bolder/lighter/100/200/300/400/500/600/700/800/900」の値が指定できます。 「font-size」では、「［絶対サイズ］／［相対サイズ］／［単位付き実数］／［パーセンテージ］」のいずれかの書式で指定できます。 ［絶対サイズ］は、「xx-small/x-small/small/medium/large/x-large/xx-large」というキーワードで指定します。 ［相対サイズ］は、「larger/smaller」で指定します。 ［単位付き実数］は、「16px/16pt/16cm/16mm/16em」などの単位を使って指定します。 ［パーセンテージ］は、「120%」などの割合を表わす数字を使って指定します。
body {
text-indent: 1em;
text-align: center;
text-decoration: underline;
}
「text-indent」では、「1行目のインデント幅の指定」を行います。 「text-align」では、「テキストの行揃え」を指定し、「left/right/center/justify」が指定できます。 「text-decoration」では、「テキストの装飾」を指定し、「none/underline/overline/line-through」が指定できます。
CSS でメモをするためなどにコメントアウトする場合には「/*」と「*/」で囲みます。 下のように記述すれば、「ここで h1 の指定をしています。」は読み込まれません。
/*
ここで、h1 の指定をしています。
*/
h1 {
background-color: silver;
text-align: center;
font-weight: bold;
}
今回の授業では最もオーソドックスな「HTML のタグ打ち」と 「CSS の指定」という方法でウェブサイト作成をしてもらいましたが、 Wordや「ホームページビルダー」といったソフトウェアを使用すれば、 「タグ打ち」をしなくとも、見た目にわかりやすいホームページ作成ができます。
Wordの場合には、作成した文書を保存する時に、 「Webページ（*.htm; *.html）」というファイルの種類を指定してやると、 HTML 文書として保存されます。 ただし、Wordと HTML 文書では表現力が異なる（Wordの方が自由がきく）ため、 レイアウトが一部崩れることがあります。 また、そうした補正をするには、結局「タグ打ち」が必要になる場合が多いですので、 今回のようにタグ打ちの仕方を覚えておくにこしたことはありません。
そうした意味では、「ホームページビルダー」などの有償アプリケーションは、 ホームページ作成に特化したソフトウェアですので、 タグの命令もすぐに確認できたり、 FTP によるウェブサーバへのアップロードも補完していたりしますので、 便利であることは確かです。
近年、ブログが活発に行われたこともあって、CMS という形式のサイト作成が多くなってきています。 これは、簡単に言えば、タグを知らなくても、勝手に補完してウェブサイトを作成してくれる管理ツールです。 代表的な CMS としては「WordPress」や「Movable Type」といったものがあります。
この CMS によるサイト作成は、HTML 文書で記載した実際の中身をページ上で記述し、 見た目については Wordでやったように、画面上で選択して強調するアイコンを押したりして反映させます。 ただ、サイト全体のデザインについては、基本的には「テーマ」として設定されているため、 細かい修正をしたい場合には、専門的な知識が必要になります。
また、CMS を利用した場合でも、実際上使用されているのは HTML のタグと CSS のプロパティです。 ですので、こうした CMS を利用する場合でも、 HTML のタグを知っていれば、 微妙にレイアウトが崩れた場合などでも、簡単に修正することができますので、 やはり、HTML の基礎知識を持っておくにこしたことはありません。