第7回 Webページの製作技術（HTML)
7.1 今週の目標
学習内容
- Webページを記述するための言語であるHTML(Hyper Text Markup Language)を学ぶ
- 教材で指定されたHTML要素を用いて自分のWebページを作成する
- スタイルシートを適用することで，文章の構造と，スタイル（見ばえ）の区別を意識しながらHTML文書を作成する
学習の目的
今週はいよいよ自分オリジナルのWebページの作成に入ります．まずWebページ内文章の構造を記述するための言語であるHTMLを学びます．HTMLは文章の構造を規定する言語であるので，自分が作成するページの内容を構造化し，それに応じたHTML要素をきちんと用いることが試されます．
続いて作成したページにスタイルシートに適用してデザインを加えていくことも行い，今週の内容でWebページを制作するための基本技術が網羅されます．
キーワード
HTML(Hyper Text Markup Language)，要素(element)，属性(attribute)，マークアップ(markup)，マークアップ言語(markup language)，World Wide Web Consortium（通称W3C），スタイルシート(style sheet)，CSS(Cascading Style Sheets)，RGB
7.2 HTMLとは何か
HTML
このオンライン教材のように，リンクによってある文書と別の文書を繋いであると，関連する内容をいちいち探さずとも，すぐに参照できたりして便利ですね．このように文書と文書がリンクによって結ばれた構造を持つ文書をハイパーテキスト(Hyper Text)と言います．
世界中を繋いでいるWebでこのハイパーテキストを用いて情報を公開するためには誰でも受け取れる共通の記述言語が必要となります．そのために開発されたのがHTML(Hyper Text Markup Language)で，Webページの大半はこのHTMLという言語で書かれています．
試しに現在のページのHTMLの記述を見てみましょう．
- [表示]→[ページのソース]を実行します．
- 新しいウィンドウが開き，HTML記述が表示されます．
- このウィンドウを閉じるには，ウィンドウの左上隅をクリックしてメニューを出し，[Delete] を実行してください．
どのWebページでもこのようなHTMLによる記述がなされています．このHTMLの記述をそのページのページソースまたは単にソースといいます．
| HTMLの例 |
|---|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> ←開始タグの例
<title>My Test Home Page</title>
</head> ←終了タグの例
<body>
<p>
Hello HTML World!
</p>
<table border="1"> ←属性の例
<tr><td>
これはHTMLのテストです．
</td></tr>
</table>
</body>
</html>
|
HTMLは「見出し」や「段落」などといった文章の構造を要素(element)というもので指定して表現します．例えば段落を表すのはpという要素になります．
- 要素は，開始タグ (start tag)，内容，終了タグ(end tag)によって構成されます．開始タグと終了タグに挟まれた内容の部分が，実際に表現される情報となります．
- p や bodyといった要素名を「<」と「>」で囲んだものが開始タグ，「</」と「>」で囲んだものが終了タグです．
上の例の4行目にあるページのタイトルを表す titile の場合，４行目全体が title要素となり，開始タグは<title>，終了タグは </title> で，内容が「My Test Home Page」となります．
- 要素名については， 大文字と小文字の区別はされません．つまり，
<title>
<TITLE>
<Title>
の三つは全て同じ意味になります．
- 要素には，開始タグだけで，内容も終了タグも無いものがあります．
- 要素には，さらに細かい指定をするための属性(attribute)を指定することができます．
属性の指定は，開始タグの中に「属性名="値"」の形で書きます．例えば，table 要素の border 属性の値を1にするには，<table border="1"> と書きます．
どのような属性があるかは，要素によって違います．
HTMLのように，文章の構造を要素によって指定して行くことをマークアップ(markup)といい，このような言語をマークアップ言語(markup language)と呼びます．
W3C (World Wide Web Consortium)
HTMLの書き方には色々と流儀があり，人によって様々です．しかし世界中の人が誰でもアクセスするWeb上において，みんなが好き勝手な方法でHTML記述してしまうと，先程述べたように，自分が使っているブラウザで見える通りに，相手に見えていなかったり，場合によってはページそのものが表示されないこともあり得ます．
そこで，HTMLなどWeb上の技術の使い方を標準化するために，World Wide Web Consortium（通称W3C） という機関があります．この機関はWebの産みの親であるティム・バーナーズ・リー氏らが1994年に設立し，マサチューセッツ工科大学(MIT)，INRIA(フランス国立情報処理オートメーション研究所)，そして，ここ慶應義塾大学(SFC)の3組織が運営している非営利団体です．
HTMLに関してはW3Cから勧告という形でその仕様が発表されます．強制力はありませんが，W3Cの勧告に従ったHTMLの書き方をするのが望ましいとされています．
詳しいことはW3Cのページを参照してください．
準備
CNSでは、ホームディレクトリの下のpublic_htmlというディレクトリの下に置かれたファイルだけがWebに公開されます．まず，このディレクトリをつくります．
以後はこのディレクトリの下で作業しますので，cdでこのディレクトリの下に移動しておきましょう．
注意
~/public_html のアクセス権は，「その他」に対して読み出しと実行を許可するように設定します．通常は，ディレクトリを作った時点でこの設定になるので，自分で設定する必要はありません．他人が読めないように設定すると，Web サーバも読めないので，表示できなくなります．
→3.5 ファイルのアクセス権
SFC では，~/public_html というディレクトリの下にあるファイルはWeb上に公開されますが，どこからもリンクされていないので，ただWebページを作成しただけではそのページのURLを知らない限りアクセスする方法がありません．そのためSFCには，「個人のホームページ一覧」というものが用意され，希望者はそこに登録してもらうことができます．詳しくは個人のホームページ一覧への登録と削除の方法を見て下さい．
Webページ作成開始
それではとりあえずWeb ページを作ってみましょう．
まず始めに，~/public_html の下に index.html という名前のファイルを作ります． ファイルの内容は，以下の例に従って書いてください．
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISP-2022-JP">
<title>My Test Home Page</title>
</head>
<body>
<p>
Hello HTML World!
</p>
<p>
これはHTMLのテストです．
</p>
</body>
</html>
|
上の内容を保存したら，次にこのファイルを mozilla で見てみます．CNSでの個人のページの URLは以下のように指定します．
http://web.sfc.keio.ac.jp/~ログイン名/パス名
パス名の部分は ~/public_html からの相対パス名(→3.3 ファイルパス)です．例えば~/public_html/index.htmlをWebで見たいならば，そのURLはhttp://web.sfc.keio.ac.jp/~ログイン名/index.htmlです．
- mozilla で[ファイル]→[Navigator ウィンドウ]を実行して，新しいウィンドウを作ってください．
- ツールバーの「場所：」の右側に，現在表示されているページの URL があります．ここをマウスでクリックすると，文字が入力できるようになります．現在の URL を消去して，自分のページの URL に書き換えてReturnキー を押します．
http://web.sfc.keio.ac.jp/~t03000tf/index.html
HTML文書の構造
HTML文書には要素の使用方法について細かく規定した規格が3種類あります．W3C推奨の正式な HTML 文書では，文書の一番最初の行に，これから書くHTML文書はその3種類の規格うちのどれに従ったものなのかを宣言することになっています．
- HTML 4.01 規格に厳密に従っている文書 strict.dtd
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 古い書き方も許す規格に従っている文書 loose.dtd
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- ブラウザ画面を分割するフレーム機能を含む規格に従っている文書 frameset.dtd
（フレーム機能についてはCNSガイドを参照してください．）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
授業では原則として1番目のstrict.dtdに従ってHTMLファイルを作成します．
それぞれの規格による具体的な違いなどは，宣言文の中にあるURLを参照してください．
HTML Validator
自分が作成したHTML文書が，自分が選択した規格にあっているかどうかを自動的に判定してくれるHTML Validation Serviceというサービスが，前ページで紹介したW3CのWebサイトにあります．余力のある人は試しに自分のHTML文書をチェックしてみましょう．
宣言の後に文書本体を書きますが，これは全体が html 要素になっていて， その内容はヘッダ部分を表す head 要素と本文を表す body 要素から構成されています．
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
ヘッダ部分
</head>
<body>
本文
</body>
</html>
|
このHTML文書のタイトルはヘッダ部分に title 要素によって記入します．具体的には前例で作ったように <title>タグと</title>タグによって挟まれた部分がタイトルになります．HTML 文書には，必ずタイトルを付けます．このタイトルは，ブラウザのウィンドウ一番上に表示されたり，ブックマークの名前などに使われます．文書の一部として表示されるわけではありません．
タイトルには，日本語ならば15文字程度，英語なら4, 5ワード程度までの長さで文書の内容を簡潔に表すものをつけるようにしましょう．
注意
ブラウザやウィンドウシステムによっては，日本語のタイトルが表示できない場合があります．
● 練習問題
先ほど作ったHTMLファイルの<p>と</p>の間の部分を自分でいろいろ変えてみてどのように変化するか確認してみましょう．
HTMLでの要素にはそれぞれ文書構造上での役割が決められており，その役割に応じて使っていくことで意図する内容が伝わりやすいページを作ることができます．みなさんもこれから要素を用いてページを加工していく際は，それぞれの要素が持つ役割を意識しながら使うようにしましょう．
段落や見出し，表組みなどHTMLで表現する上での基本的な要素を以下に紹介します．これらで一通りの表現ができるようになります．このオンライン教材も原則的にここで紹介した要素のみを使って本文を作成しています．
注意
HTMLの要素にはこれ以外にも様々なものがありますが，中にはバージョンが古い時代のものであったり特定の環境でしか表示がうまくいかないものなどがあります．本科目ではHTMLを通して文章の構造化の学習を目標としています（詳しくは→第9回 Webページの設計で扱います）ので，以後授業で作成するWebページは今週紹介した要素のみを用いるようにしてください．
改行と改段落 --- <p> <br> <hr>
文章の基本構造の一つとして，段落というものがあります．この段落に対応するのが p 要素です．
<p>最初の段落です．</p>
<p>2番目の段落です．
ここは，まだ2番目の段落です．</p>
<p>3番目の段落です．</p>
|
HTML では，改行は空白と同じものとして扱われます．また，空白も単語を区切る意味しか持ちません．ブラウザが表示するときには，元のファイルの改行とは無関係に，そのときのウィンドウの幅に合わせて適当な箇所で改行をします．
段落の中で強制的に改行したい場合には，br 要素を使用します．br 要素は開始タグだけで，内容も終了タグもありません．また，hr 要素で，区切りの横線を入れることができます． hr 要素も開始タグだけです．
例えば，以下のような HTML ファイルは，
<p>これは，HTMLの改行のテストです．<br>
この行のように br がないと，
HTMLファイルで改行をしていても無視されます．<br>
また，このように区切り線を指定すると，
<hr>
横方向の線ができます．</p>
|
次のように表示されます．
これは，HTMLの改行のテストです．
この行のように br がないと，
HTMLファイルで改行をしていても無視されます．
また，このように区切り線を指定すると，
横方向の線ができます．
|
見出し --- <h1> 〜 <h6>
段落と並んで重要なものとして見出しがあります．適切な見出しを文章中につけると，情報を効率よく相手に伝えることができます．見出しには6段階あり，h1 から h6 の要素を使用します．最大の見出しが，h1 で，数が増えるに従って小さくなります．
例えば，以下のようなHTMLファイルは，
<h1>情報処理授業計画 </h1>
<p>情報処理は以下の全13回の構成を予定している</p>
<h2> 第0回 はじめに</h2>
<h3>0.1 はじめに </h3>
<h4>科目の目的 </h4>
<p>履修者各自がCNSのUnix環境を利用して，他人の閲覧にたえるWebサイトを制作することを，本科目の目的とします</p>
<h4>科目の内容 </h4>
<p>本科目では，Webサイトの制作を通して，コンピュータを用いたデジタルコンテンツ制作の基礎を学びます．</p>
<h3>0.2 CNS利用上のマナー </h3>
<h3>0.3 演習で使うコンピュータ </h3>
<h3>0.4 アカウント </h3>
<h2> 第1回 CNSを使う</h2>
<h3>1.1 今週の目標 </h3>
<h3>1.2 コマンド </h3>
<h3>1.3 ブラウザの使い方 </h3>
<h3>1.4 タイピング </h3>
<h3>1.5 テキストエディタ </h3>
|
情報処理授業計画
情報処理は以下の全13回の構成を予定している
第0回 はじめに
0.1 はじめに
科目の目的
履修者各自がCNSのUnix環境を利用して，他人の閲覧にたえるWebサイトを制作することを，本科目の目的とします
科目の内容
本科目では，Webサイトの制作を通して，コンピュータを用いたデジタルコンテンツ制作の基礎を学びます．
0.2 CNS利用上のマナー
0.3 演習で使うコンピュータ
0.4 アカウント
第1回 CNSを使う
1.1 今週の目標
1.2 コマンド
1.3 ブラウザの使い方
1.4 タイピング
1.5 テキストエディタ
|
と表示されます．
注意
フォントの設定によっては，違うレベルの見出しが同じ大きさで表示されることがあります．あまりいろいろな見出しを多用すると，そのような設定で見ている人には文書の構成が分かりにくくなります．
● 練習問題
- 自己紹介という見出しをつけ，見出しの後に横線の区切りを入れた後，自己紹介文を一段落書きなさい．
- 先ほど作成したHTML文書のタイトルは 「My Test Home Page」でした．このタイトルを自分が作成した内容に合ったものに変えなさい．
変更した結果をブラウザで確認するには，変更を保存した後，Mozilla の「Reload」ボタンを押すと新しい内容が反映されます．
箇条書き --- <ul> <ol> <li> <dl> <dd> <dt>
HTMLでは，番号無し，番号付き，説明付きの3つのスタイルで箇条書きを指定することができます．
- 番号無し
- ul 要素の中に各項目を li 要素で書いていきます．
<ul>
<li>環境情報学部</li>
<li>総合政策学部</li>
<li>看護医療学部</li>
</ul>
|
と指定すると，以下のようになります．
- 番号付き
- ul 要素の代わりに ol 要素を使うと，各項目の前に番号が付きます．
<ol>
<li>履修申告をする．</li>
<li>講義に出席し課題をこなす．</li>
<li>期末試験を受験する．</li>
<li>成績が付き単位取得．</li>
</ol>
|
と指定すると，以下のようになります．
- 履修申告をする．
- 講義に出席し課題をこなす．
- 期末試験を受験する．
- 成績が付き単位取得．
|
- 説明付き
- 説明付きの箇条書きとは， 辞書のように， 各項目が用語とその説明からなるようなリストのことです． dl 要素の中に dt 要素と dd 要素を交互 に書いていきます．例えば，
<dl>
<dt>WWW</dt>
<dd>World Wide Web の略</dd>
<dt>URL</dt>
<dd>Uniform Resource Locator の略</dd>
</dl>
|
と指定すると，以下のようになります．
- WWW
- World Wide Web の略
- URL
- Uniform Resource Locator の略
|
また，箇条書きは入れ子にして階層構造を持たせることもできます．次のように書くと，どのような表示になるでしょうか．ブラウザで確認してみると同時に，どのタグがどこで始まってどこで終わっているのかも確認しましょう．
<ul>
<li>オーケストラ
<dl>
<dt>弦セクション</dt>
<dd>弦楽器により構成</dd>
<dt>パート</dt>
<dd>
<ol>
<li>第一ヴァイオリン</li>
<li>第二ヴァイオリン</li>
<li>ヴィオラ</li>
<li>チェロ</li>
<li>コントラバス</li>
</ol>
</dd>
</dl>
</li>
</ul>
|
表組み --- <table> <tr> <td> <th>
表を作るときは，table 要素を使います．表の中の各行は tr 要素で表わし，その中の各項目は td 要素で表します．td 要素を tr 要素の中にいくつも書くことで，項目を横にどんどん増やして行くことが出来ます．また，上端や左端に見出しを書きたい場合は，td 要素の代わりに th 要素を使います．
<table>
<tr>
<th>コマンド</th>
<th>機能</th>
</tr>
<tr>
<td> pwd </td>
<td> カレントディレクトリの表示 </td>
</tr>
<tr>
<td> cd </td>
<td> ディレクトリの移動 </td>
</tr>
<tr>
<td> ls </td>
<td> ディレクトリの内容表示 </td>
</tr>
</table>
|
| コマンド | 機能 |
|---|
| pwd | カレントディレクトリの表示 |
| cd | ディレクトリの移動 |
| ls | ディレクトリの内容表示 |
|
- 枠線を付けるためには，table 要素の開始タグに border 属性を書きます．値は枠線の太さです．
<table border="1">
<tr>
<th>コマンド</th>
<th>機能</th>
</tr>
<tr>
<td> pwd </td>
<td> カレントディレクトリの表示 </td>
</tr>
<tr>
<td> cd </td>
<td> ディレクトリの移動 </td>
</tr>
<tr>
<td> ls </td>
<td> ディレクトリの内容表示 </td>
</tr>
</table>
|
| コマンド | 機能 |
|---|
| pwd | カレントディレクトリの表示 |
| cd | ディレクトリの移動 |
| ls | ディレクトリの内容表示 |
|
- 縦に数段抜きのマスを作りたいときは th 又は td 要素の開始タグに rowspan 属性を書きます．値は何段抜きにするかを指定します．
- 横に数段抜きのマスを作るときも同様に， th 又は td 要素の開始タグに colspan 属性を書きます．
<table border="1">
<tr>
<th>旧省庁名</th>
<th>新省庁名</th>
</tr>
<tr>
<td>大蔵省</td>
<td>財務省</td>
</tr>
<tr>
<td>厚生省</td>
<td rowspan="2">厚生労働省</td>
</tr>
<tr>
<td>労働省</td>
</tr>
<tr>
<td colspan=2>外務省</td>
</tr>
<tr>
<td>通産省</td>
<td>経済産業省</td>
</tr>
</table>
|
| 旧省庁名 | 新省庁名 |
|---|
| 大蔵省 | 財務省 |
| 厚生省 | 厚生労働省 |
| 労働省 |
| 外務省 |
| 通産省 | 経済産業省 |
|
● 練習問題
自分の時間割表をHTMLで作りなさい．
他の情報へリンクを張る --- <a>
HTMLはハイパーテキストの一種なので，文書中に他の情報へのリンクを持たせることができます．他の情報へのリンクは a 要素で表し，href属性の値として，リンク先の情報の位置を示す URL を指定します．例えば，SFCのホームページへのリンクを自分のページの中に作る場合は，以下のようにします．
<a href="http://www.sfc.keio.ac.jp/">SFCのホームページ</a>
|
a 要素の内容をソースアンカー (source anchor)と言い，そこをクリックすると指定された情報に飛ぶ ようになります．
現在のページと同じウェブサーバ上にあるページの URL は，ホスト名などを省略することができます．
- Webサーバが起点とするディレクトリ（CNS では，SFC のホームページのあるディレクトリ）からの相対パス名を指定する方法：パス名の最初に「/」をつけます．
- 現在のページのあるディレクトリからの相対パス名を指定する方法：そのまま相対パス名を書きます．
<ul>
<li><a href="next.html">同じディレクトリの別のファイル</a>
<li><a href="/index.html">このサーバのトップへ</a>
<li><a href="http://www.keio.ac.jp/index.html">慶應義塾のホームページ</a>
</ul>
|
特殊な文字 --- < > & "
HTMLでは「<」や「 >」は特別な意味を持っているのでそのまま書くことはできません．これらの文字を表示したい時は以下のように書きます．
| < | < |
| > | > |
| & | & |
| " | " |
| (半角スペース) | |
フォーマット済みテキストの指定 --- <pre>
空白や改行を入力した通りに表示してほしいことがあります． 例えば，以下のような HTML ファイルは，
明日，７時から飲み会やります．
│ ↑
│ 北
駅
│◎ここ
│
|
以下のように表示されます．
|
明日，７時から飲み会やります．
│ ↑
│ 北
駅
│◎ここ
│
|
これではどこに行けばいいのか分かりません．
このような時は pre を使います．pre 要素の内容は，文字幅が一定のフォントを使い，空白・改行もその通りに表示されます．
<pre>
明日，７時から飲み会やります．
│ ↑
│ 北
駅
│◎ここ
│
</pre>
|
文章中の特定部分の指定 --- <div> <span>
文書の中のある部分をひとまとめにし，周りとは区別して扱いたいときに使うのがdiv要素とspan要素です．主に次ページ（→7.5 スタイルシート）で紹介するスタイルシートを使って色や文字の位置などを指定したい時に使います．
- span 要素：前後の文章とつながって同じ行に表示されます．
- div 要素：前後の文章とは独立した行に表示されます．
具体的な使用例などは次ページを参照してください．
HTMLの基本的な要素によって様々な表現ができるようになりました．しかし文書の構造が表現できるだけではまだ物足りないですね．みなさんの中には文字に色をつけたいとか，幅や高さを指定したいと思った人もいるでしょう．
HTML はもともと学術的な情報交換のために開発されました．従って読む人がどんなコンピュータを使っていようと，その環境に左右されることなく内容を正しく伝えることが重要であり，文書の見栄えはあまり気にしていませんでした．しかし，世の中の多くの人がウェブを使うようになると，文章だけではつまらないので，文書のデザインを気にする人たちも現れました．そこで，HTML の限られた機能を使って美しくページをデザインするために次のような工夫が考え出されました．
- レイアウトのために表(<table>)を使う．
- テキストの代わりに文字を画像にした文字イメージを使う
- HTML を勝手に拡張する
ところが，このような工夫はページを複雑にして処理を遅くするだけでなく，ブラウザの種類や設定によって意味不明の表示になったり，テキスト読み上げソフトを使っている視覚障害者を困らせたりすることになります．
さらにデザインを意識するあまり，HTMLによって意味のまとまり毎に規定していた文章の論理構造が崩れてしまい，その結果，外見は綺麗だけど内容が伝わりにくいページが増えてしまいました．
スタイルシート(style sheet)は上のような問題を解決するための，ページのデザインを指定する仕組みです．HTML は文章の論理的な構造を表すマークアップを担当し，色や文字の大きさといったデザインに関するマークアップはスタイルシート言語で書きます．スタイルシート言語にはいくつかありますが，普通は CSS(Cascading Style Sheets)を使います．
注意
スタイルシートの解釈はブラウザによってまちまちであったり，ブラウザによっては対応していなかったりで，スタイルシートによる指定が，必ずその通りに表示されるという保証はありません．
CSS によるマークアップの基本的な書き方は「属性名 : 値」です．複数ある時は「;」で区切ります．例えば，12ピクセルサイズの青い文字を使いたい場合は
font-size: 12px; color: blue
というふうに書きます．
色の指定
ページの背景や文字の色を指定するためには，16進数で表現される，RGB カラーモデルを使います．色を赤(R)，緑(G)，青(B)の三原色に分解し，それぞれの明るさを数値化する方式です．書き方はいくつかありますが，前に「#」を付け，2桁の16進数(00〜FF)に数値化して並べる書き方がよく使われます．例えば，赤色は #FF0000 と表わされます．またよく使う色などは予め名前が与えられており，その名前で指定することもできます．例えば先程の赤色は" red "となっていてこれはRGBの #FF0000と同じです．赤色のように色を名前で指定できるのは以下の16色です．
| 色の名前 | 対応するRGB表記 | 色の名前 | 対応するRGB表記 |
|---|
| | 赤(R) | 緑(G) | 青(B) | | 赤(R) | 緑(G) | 青(B) |
|---|
| black | # | 00 | 00 | 00 | white | # | FF | FF | FF |
| red | # | FF | 00 | 00 | blue | # | 00 | 00 | FF |
| yellow | # | FF | FF | 00 | green | # | 00 | 80 | 00 |
| purple | # | 80 | 00 | 80 | aqua | # | 00 | FF | FF |
| gray | # | 80 | 80 | 80 | silver | # | C0 | C0 | C0 |
| maroon | # | 80 | 00 | 00 | lime | # | 00 | FF | 00 |
| olive | # | 80 | 80 | 00 | navy | # | 00 | 00 | 80 |
| fuchsia | # | FF | 00 | FF | teal | # | 00 | 80 | 80 |
これら以外の色を使いたいときはRGBで自分で指定します．
色を指定できる対象には以下のような属性があります．
- color属性：前景色（文字の色）
(例) color: #FF0000
- background属性：背景色（文字の背景や画面の背景の色）
(例) background: white
文字に関する指定
文字に関して指定できる属性には以下のようなものがあります．
- font-size属性：文字の大きさを指定．指定方法はpt(ポイント),px(ピクセル)のように数値を指定する場合と，直前までの文字に対して相対的な大きさを指定する，emなどがあります．
(例)
- font-size: 12pt
- font-size: 2em
- font-weight属性：文字の太さを指定します．値にはbold,normalなどがあります．
(例)
- font-style属性：文字の傾きを指定します．値にはitalic, oblique, normalなどがあります．
(例)
- text-decoration属性：下線などの文字装飾を指定します．値にはunderline(下線),overline(上線),line-through(打ち消し線)などがあります．
(例)
- text-decoration: underline
- text-align属性：文字の水平位置を指定します．左に寄せたいならleft,中央に寄せたいならcenter, 右に寄せたいならrightと指定します．
(例)
これら以外にもfont-familyやfont-variantなどがあります．
HTMLでのCSSの使い方はインライン指定，style 要素，外部スタイルシートの3通りがあります．
(1) インライン指定
HTML 文書の中のある特定の要素について，スタイルシート言語で書いたマークアップ（以後，「スタイル指定」と呼ぶことにします）を行いたい場合は，その要素の style 属性の値としてスタイル指定を書きます．例えば，ある段落を12ポイントの青い文字で書きたい場合は以下のようにします．
<p style="font-size: 12pt; color: blue">12ポイントの青い文字</p>
また，head 要素の中に，どのスタイルシート言語を使うか書いておく必要があります．例えば，CSS の場合は
<META http-equiv="Content-Style-Type" contnt="text/css">
と書いておきます．
(2) style 要素
HTML 文書の中のある種類の要素全部についてスタイル指定を行いたい場合は，style 要素を使います．
- style 要素は必ず head要素の中に書きます．
- type 属性で使用するスタイルシート言語を指定します．CSS の場合は "text/css" です．
- style 要素の中には「要素名 { スタイル指定 }」の形で，それぞれの要素に対するスタイルを指定していきます．
例えば，h1 要素の文字を赤色にし，下線を付け，中央揃えにするためには以下のように記述します．
<head>
<style type="text/css">
h1 {color: red; text-decoration: underline; text-align: center}
</style>
</head>
|
こうしておいた上で，本文で h1 要素を使うと下のようになります．
class 属性
上の例では，文書中のすべての h1 要素に対して同じスタイルを指定します．しかし，同じ種類の要素でも何種類かのスタイルを指定したいことがあります．そのような場合は，必要に応じて要素に class 属性を付けておき，特定の class 属性の値を持った要素に対して「要素名.クラス属性の値 { スタイル指定 }」でスタイルを指定することができます．
例えば，h1 要素で class 属性の値が test-ni-deru のものだけ上と同じスタイルを指定するには
<head>
<style type="text/css">
h1.test-ni-deru {color: red; text-decoration: underline; text-align: center}
</style>
</head>
<body>
<h1 class="test-ni-deru">重要そうな章</h1>
<h1>あんまり重要でなさそうな章</h1>
</body>
|
とします．
span と div 要素
前ページで紹介したdiv 要素や span 要素を使い，それらにクラス属性を付けることで，文書の中の任意の部分にスタイルを指定することができます．以下の例では，段落と表組がまとめて中央に寄せられ，その次の段落では文章の一部分の色が変わっています．
<head>
<style type="text/css">
div.center {text-align: center}
span.blue {color: blue}
</style>
</head>
<body>
<div class="center">
<p>この段落は中央に寄っている．</p>
<table border="1">
<tr><td>この表も中央に寄っている．</td></tr>
</table>
</div>
<p>ここは普通の文章<span class="blue">ここだけ青い文字</span>そしてもとに戻る．</p>
</body>
|
(3) 外部スタイルシート
今までのスタイルの指定のし方は各HTMLファイル固有のものでした．しかし例えばこの情報処理のテキストのように，共通のスタイルを複数の HTML ファイルで指定する場合，HTMLファイル毎にいちいち同じstyle指定をするのは大変です．そこでスタイル指定をHTMLファイルとは独立した別のファイルに書き，各 HTML ファイルの中の link 要素で外部スタイルシートの指定をします．こうすることで，複数のHTMLファイルで共通のスタイル指定が使えるようになります．
ひとつの HTML ファイルに複数の外部スタイルシートを指定することができますが，ここではひとつのスタイルシートファイルだけを使うことにします．
まず，HTMLファイルとは別に共通で指定したいスタイルだけをまとめて書いた，CSSファイルを作り保存しておきます．
pagestyle.css ファイル
span.blue {color: blue}
div.center {text-align: center}
|
続いてHTMLファイルの head 要素内に新たにlink 要素を作り，以下の属性を設定します．
- rel 属性は "stylesheet" という値にします．
- href 属性で外部スタイルシートの URL を指定します．
- type 属性でスタイルシート言語の種類を指定します．CSS の場合は "text/css" です．
<head>
<link rel="stylesheet" href="./pagestyle.css" type="text/css">
</head>
<body>
<div class="center">
<p>この段落は中央に寄っている．</p>
<table border="1">
<tr><td>この表も中央に寄っている．</td></tr>
</table>
</div>
<p>ここは普通の文章<span class="blue">ここだけ青い文字</span>そしてもとに戻る．</p>
</body>
|
これで，いちいちHTMLファイルでスタイルを指定しなくても pagestyle.cssで指定したスタイルが適用されます．他のHTMLファイルで同じスタイルを適用したい時は，同様に link 要素を指定します．
● 練習問題
スタイルシートを使って，自分が作ったWebページの見栄えを良くしてみましょう．
● 宿題
先週の宿題としてみなさんに用意してもらった自分が作りたいWEBページ企画書の内容をHTMLで記述しWebページとして表現してください．
HTMLファイル名は"plan.html"とし，それをpublic_htmlディレクトリ以下の自分が適切と思う場所（必要があれば新規にディレクトリを作成してもよい）に配置し，そのURLを電子メールで先生とTA/SAに送りなさい．