情報処理 I - 第６回

今回の目標

スタイルシートによるレイアウト制御について知る
表の作成方法について知る

教科書１５４～１５５ページ

１．ホームページ制作（スタイル編）

１．１　カスケーディングスタイルシート (CSS)

HTML によるマークアップによって，Web ブラウザは文書の要素をレイアウトするための手がかりを得ます．要素のレイアウト方法は，スタイルシートによって指定します．このスタイルシートには，以下の３つがあります．

Web ページ作成者によって設定されたスタイルシート: Web ページ作成者がレイアウトを指定するために設定したスタイルシートです．
利用者（読者）によって設定されたスタイルシート: 利用者が Web ブラウザの表示設定などを行うことによって設定されるスタイルシートです．

Web ブラウザ自体が持っているスタイルシート: Web ブラウザ自身が持っているスタイルシートは，利用者や Web ページ作成者による指定がなかったときに用いられる，最も標準的なレイアウトを指定します．

Web ブラウザ上のレイアウトは，この３つのスタイルシートの組み合わせによって決定されます．通常，最初の「Webページ作成者によって設定されたスタイルシート」が最も優先され，次に「利用者（読者）によって設定されたスタイルシート」が使用されます．この組み合わせ処理をカスケード処理と呼びます．

１．２　長さの指定

文書の要素をレイアウトする際には，文字の大きさや欄の幅のような値を指定しなければならないことがあります．このような値のことを，ここでは「長さ」と呼ぶことにします．この「長さ」は符号付きの実数値に単位識別子を付けて表します．また「長さ」の単位には，実際の長さを指定する絶対単位と，他との関係で長さを指定する相対単位があります．

絶対単位の識別子
in	インチ（例 0.5in -3in）
cm	センチメートル（例 0.5cm 2.4cm）
mm	ミリメートル（例 10mm 20.5mm）
pt	ポイント，1pt = 1/72 in（例 10pt 12pt）
pc	パイカ，1pc = 12pt（例 2pc 3.5pc）

絶対単位を用いても，（現状では）それが実際に表示されるときの長さは利用者が Web の閲覧に使用する環境に依存します．

相対単位の識別子
em	エム，大文字の M の高さ＝そのフォントの高さ（例 1em -2.5em）
ex	エックス，小文字の x の高さ（例 0.5ex 2.4ex）
px	ピクセル，ディスプレイ上の点（画素）の大きさ（例 10px 500px）

相対単位のうち px は，画素の大きさという物理的な大きさとの比較になるので，ウィンドウサイズや基本となるフォントのサイズが変化しても不変な固定値になります．

１．３　割合の指定

何らかの対象に対する割合を百分率で指定して，長さなどの値として用いる場合もあります．

百分率単位の識別子
%	パーセント，何らかの比較対象に対するパーセンテージ（例 100% 50% 120%）

Web ページは印刷物等とは異なり，利用者によってウィンドウサイズや表示に使用する文字の基準となる大きさが変更されることを前提としなければなりません．したがって，できるだけ em や % などの相対的な長さを用い，かつ美しくレイアウトするよう心がけるべきでしょう．

１．４　 Web ページに CSS を組み込む

それでは前回作成した profile.html のレイアウトを CSS で制御してみましょう．Web ページの作成者が HTML ファイルのレイアウトを CSS によって制御するには，HTML ファイルのヘッダ部に <meta http-equiv="Content-Style-Type" content="text/css"> というタグを置き，<style type="text/css">～</style>タグの間でスタイルのプロパティ（特性値）を設定します．

はじめに Netscape の新しいウィンドウかタブを作成し，そこに profile.html を表示してください．次にターミナルを開き，シェルのカレントディレクトリを前回作成した html に移してください．そこで emacs を使って profile.html を開き，下線部の内容を追加してください．タイピングに時間がかかるようなら，下線部の内容を Netscape から emacs のバッファにコピー＆ペーストして構いません．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      dt {
        font-weight: bold;
      }
      -->
    </style>
  </head>

  <body>

    <h1>自己紹介</h1>

    <dl>
          <dt>名前</dt>       <dd>和歌山健太郎</dd>
          <dt>出身地</dt>     <dd>和歌山県和歌山市</dd>
          <dt>生年月日</dt>   <dd>昭和52年6月23日</dd>
          <dt>趣味</dt>       <dd>美食</dd>
          <dt>メッセージ</dt> <dd>美食サークルメンバー募集中</dd>
    </dl>

  </body>

</html>

追加できたら C-x C-s でバッファを保存し，Netscape の再読み込みボタンをクリックしてみてください．リストの見出しの部分が太字に変化します．しなかったらどこかに問題がありますので，調べてみてください．わからなければ聞いてください．

上記のスタイル指定は，<dt>～</dt>でマークアップされた要素の font-weight（文字の太さ）というプロパティ（特性値）に， bold（太字）という値を設定するものです． は本来は不要ですが，プロパティは HTML ではないため，これを付けることによって CSS に対応していない Web ブラウザでプロパティが文字として画面に表示されることを防ぎます．

１．５　フォント（字体）を変更する

フォントを制御するプロパティには font-weight のほかに font-style などいくつかのものがあります．font-style は文字のスタイルを指定するプロパティです（そのまんまやんけ）．italic はフォントのスタイルをイタリック体にします．ただし，日本語の文字にはイタリック体の字体がありませんから，ほとんどの Web ブラウザでは斜体で表示されるようです．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      dt {
        font-weight: bold;
        font-style: italic;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

次に，文字の大きさを変えてみましょう．文字の大きさは font-size というプロパティで指定します．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．larger は通常の文字の大きさに比べて大きくするという指定です．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      dt {
        font-weight: bold;
        font-style: italic;
        font-size: larger;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

最後に font-family を使って字体を変更してみましょう．ここでは一般的なフォントファミリー名である serif（セリフ，明朝体のようにセリフの付いた字体）のみを指定します．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      dt {
        font-weight: bold;
        font-style: italic;
        font-size: larger;
        font-family: serif;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

なお，font を用いれば，これらのプロパティを一括して指定できます．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      dt {
        font: bold italic larger serif;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

フォントを制御するプロパティ

font-family
使用するフォント（字体）を指定します．ただし，これは利用者が Web の閲覧に使用している環境に依存している（利用者が使用しているオペレーティングシステムや Web ブラウザなどの違いで使えるフォントが異なる）ため，正直言ってこれが指定してあるとマイナーな環境の利用者がムカツクことがあります．なお，フォントは複数指定でき，その中から使用可能なものが使われます．この最後のフォントには一般的ファミリー名（serif，sans-serif，cursive，fantasy，monospace）を指定することが推奨されています．
font-style
フォントのスタイルを指定します．normal（通常），italic（イタリック体），oblique（斜体）が指定できます．
font-valiant
フォントの異形体を指定します．normal（通常），small-caps（小文字が大文字と同じ字形でサイズが小さいもの）が指定できます．
font-weight
フォントの重み（太さ）を指定します．normal（通常），bold（太字），bolder（現在の weight よりも太く），lighter（現在の weight よりも細く），100，200，300，400，500，600，700，800，900（数字が大きいほど太くなり，normal=400，bold=700 に相当する）が指定できます．
font-size
フォントのサイズを指定します．xx-small，x-small，small，medium，large，x-large，xx-large（絶対サイズ指定），smaller，larger（相対サイズ指定），長さが指定できます．
font
フォントの family, style, variant, weight および size を一括して指定します．

１．６　テキストの配置などを制御する

今度はテキストの配置を変えてみましょう．<h1>～</h1>でマークアップした見出しの位置を，中央に移動します．それには h1 において text-align というプロパティに center を指定します．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      dt {
        font: bold italic larger serif;
      }
      h1 {
        text-align: center;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

次に，この見出しに下線を付けてみましょう．下線などのテキストの修飾を行うには，text-decoration というプロパティを用います．これに underline を指定すれば，テキストに下線を付けることができます．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      dt {
        font: bold italic larger serif;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

テキストの配置・修飾を制御するプロパティ

word-spacing
単語の間隔を指定します．normal（通常）あるいは長さが指定できます．
letter-spacing
文字の間隔を指定します．normal（通常）あるいは長さが指定できます．
text-decoration
文字の修飾を指定します．none（なし），underline（下線），overline（上線），line-through（取り消し線），blink（点滅）が指定できます．
vertical-align
テキストの垂直方向の位置を指定します．baseline（標準），middle（中間の高さ），sub（下付き文字），super（上付き文字），text-top（上端揃え），text-bottom（下端揃え），top（上寄せ），bottom（下寄せ）が指定できます．
text-align
テキストの水平方向の位置を指定します．left（左寄せ），center（中央揃え），right（右寄せ），justify（両端揃え）が指定できます．
text-indent
テキストのインデント（字下げ）の大きさを指定します．長さあるいは %（百分率単位）
text-transform
テキストの文字の変換方法を指定します．none（そのまま），capitalize（各単語の最初の１字だけ大文字に変換），uppercase（全部大文字に変換），lowercase（全部小文字に変換）が指定できます．
line-height
行送り幅を指定します．normal（通常），数値，長さ，%（百分率単位）が指定できます．数値を指定したときは，現在のフォントのサイズにその値を掛けたものを行送り幅に用います．これが 2 なら行間に１行分の間隔が空きます．

１．７　枠線を描く

マークアップした要素には枠をつけることができます．<dl>～</dl>でマークアップしたリスト全体に枠をつけるなら，dl において border というプロパティを指定します．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      dl {
        border: solid;
      }
      dt {
        font: bold italic larger serif;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

枠線の種類には solid（実線）のほか dotted（点線），dashed（破線），inset（へこみ），outset（出っ張り）などがあります．下線部を変更した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      dl {
        border: inset;
      }
      dt {
        font: bold italic larger serif;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

thin（細線），medium（標準），thick（太線）あるいは長さの指定を追加すれば，枠線の太さを制御できます．下線部は枠線の太さを5ピクセル（画面の点5個分）に設定します．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      dl {
        border: inset 5px;
      }
      dt {
        font: bold italic larger serif;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

<body>～</body>タグでマークアップされた Web ページの本文全体に対して，枠線を付けることも可能です．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．Web ブラウザのウィンドウが小さいと，期待通りに枠線が付かない場合があります．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      body {
        border: outset 8px;
      }
      dl {
        border: inset 5px;
      }
      dt {
        font: bold italic larger serif;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

枠は長方形ですが，その一辺のみに対してプロパティを設定することもできます．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      body {
        border: outset 8px;
      }
      dl {
        border: inset 5px;
      }
      dt {
        font: bold italic larger serif;
        border-top: dotted thin;
        border-bottom: dotted thin;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

枠線を制御するプロパティ

border-style
枠線のスタイルを指定します．スタイルには none（付けない），dotted（点線），dashed（破線），solid（実線），double（二重線），groove（溝），ridge（峰），inset（へこみ），outset（出っ張り）があります．スタイルは１～４個指定でき，１個指定した場合はすべての辺にそのスタイルが適用され，４個指定した場合は左からそれぞれ上，右，下，左の辺の順に個々のスタイルが適用されます．
border-width
枠線の太さを thin（細線），medium（通常），thick（太線），あるいは長さで指定します．太さは１～４個指定でき，１個指定した場合はすべての辺にその太さが適用され，４個指定した場合は左からそれぞれ上，右，下，左の辺の順に個々の太さが適用されます．
border-top-width
枠線の上辺の太さを指定します．
border-bottom-width
枠線の下辺の太さを指定します．
border-left-width
枠線の左辺の太さを指定します．
border-right-width
枠線の右辺の太さを指定します．
border-top
枠線の上辺の太さ，スタイル，色（後述）を指定します．
border-bottom
枠線の下辺の太さ，スタイル，色（後述）を指定します．
border-left
枠線の左辺の太さ，スタイル，色（後述）を指定します．
border-right
枠線の右辺の太さ，スタイル，色（後述）を指定します．
border
枠線の４辺全部の太さ，スタイル，色（後述）を指定します．

１．８　継承について

字体やテキストの配置，枠線などを含む多くのプロパティは，文書中のたいていの要素で指定できます．たとえば <body>～</body>タグでマークアップした要素（すなわち本文全体）は，その内側にある <dl>～</dl> タグでマークアップした要素の親要素になります．親要素で指定したプロパティの中には，その子要素に継承されるものがあります．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      body {
        border: outset 8px;
        line-height: 2;
      }
      dl {
        border: inset 5px;
      }
      dt {
        font: bold italic larger serif;
        border-top: dotted thin;
        border-bottom: dotted thin;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

上記の例では，<body>～</body>タグでマークアップした要素に対して設定したline-height（行送り幅）というプロパティは，その子要素である<h1>～</h1>タグや<dl>～</dl>タグでマークアップした要素にも継承され，これらにも同じ行送り幅が設定されます．なお枠線などは継承されません．

１．９　間隔を調整する

要素間の間隔を設定するプロパティには，要素と境界（枠線がひかれるところ）との間隔を設定する padding と，境界と隣接する要素との間隔を設定する margin があります．まず <dl>～</dl>タグでマークアップした要素に padding を設定して，要素と外枠との間隔を調整してみましょう．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      body {
        border: outset 8px;
        line-height: 2;
      }
      dl {
        border: inset 5px;
        padding: 1.5em;
      }
      dt {
        font: bold italic larger serif;
        border-top: dotted thin;
        border-bottom: dotted thin;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

上の変更で，要素（この場合，自己紹介の項目）と外枠との間に間隔が空くはずです．それでは，次に margin を設定して，外枠と隣接する要素（この場合は<body>～</body>タグでマークアップした本文全体に付けた外枠）との間隔を調整してみましょう．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      body {
        border: outset 8px;
        line-height: 2;
      }
      dl {
        border: inset 5px;
        padding: 1.5em;
        margin: 1em;
      }
      dt {
        font: bold italic larger serif;
        border-top: dotted thin;
        border-bottom: dotted thin;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

<body>～</body>タグでマークアップした要素，すなわち本文全体に margin を設定すれば，本文と Web ブラウザの表示領域との間に間隔を空けることができます．また width や height というプロパティを指定して，要素そのものの幅や高さを指定することもできます．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      body {
        border: outset 8px;
        line-height: 2;
        margin-top: 3em;
        margin-left: 5%;
        margin-right: 5%;
        height: 30em;
      }
      dl {
        border: inset 5px;
        padding: 1.5em;
        margin: 1em;
      }
      dt {
        font: bold italic larger serif;
        border-top: dotted thin;
        border-bottom: dotted thin;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

間隔を制御するプロパティ

padding
要素と外枠との間隔を auto あるいは長さ，%（百分率単位）で指定します．auto を指定したときは，他の間隔や要素の幅との関係をもとに決定されます．間隔は１～４個指定でき，４個指定した場合は左からそれぞれ上側，右側，下側，左側の間隔として適用され，１個指定した場合はすべての側にその間隔が適用されます．
padding-top
要素と外枠との間隔を auto あるいは長さ，%（百分率単位）で指定します．
padding-bottom
要素と外枠との間隔を auto あるいは長さ，%（百分率単位）で指定します．
padding-left
要素と外枠との間隔を auto あるいは長さ，%（百分率単位）で指定します．
padding-right
要素と外枠との間隔を auto あるいは長さ，%（百分率単位）で指定します．
margin
外枠と隣接する要素あるいは親要素との間隔を auto あるいは長さ，%（百分率単位）で指定します．auto を指定したときは，他の間隔や要素の幅との関係をもとに決定されます．間隔は１～４個指定でき，４個指定した場合は左からそれぞれ上側，右側，下側，左側の間隔として適用され，１個指定した場合はすべての側にその間隔が適用されます．
margin-top
外枠と上側に隣接する要素あるいは親要素との間隔を auto あるいは長さ，%（百分率単位）で指定します．
margin-bottom
外枠と下側に隣接する要素あるいは親要素との間隔を auto あるいは長さ，%（百分率単位）で指定します．
margin-left
外枠と左側に隣接する要素あるいは親要素との間隔を auto あるいは長さ，%（百分率単位）で指定します．
margin-right
外枠と右側に隣接する要素あるいは親要素との間隔を auto あるいは長さ，%（百分率単位）で指定します．
width
外枠の幅を auto あるいは長さ，%（百分率単位）で指定します．無指定時は auto です．
height
外枠の高さを auto あるいは長さ，%（百分率単位）で指定します．無指定時は auto です．

１．１０　色の指定

CSS において色を指定する場合は，aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，yellow のいずれかのキーワード，あるいは数値（10進数あるいは16進数）を用います．数値による色指定は，次のようなものです．

色の表現には光の三原色（赤:Red，緑:Green，青:Blue ～ RGB）の混合比を用います．
これを rgb(R, G, B) で表現します．
R, G, B の各色成分の明るさは10進数の 0～255 の整数値で表し，0 がもっとも暗く，255 がもっとも明るくなります．
たとえば rgb(0, 0, 0) は全部がもっとも暗いので黒，rgb(255, 255, 255) は RGB 全部がもっとも明るいので白になります．また rgb(255, 0, 0) は R だけが明るいので赤，rgb(0, 255, 0) は G だけが明るいので緑，rgb(0, 0, 255) は B だけが明るいので青になります．
16進数で表す場合は，# に続けて16進数2桁で表した明るさを，RGB の順に並べます．
16進数は次のようなものです．

10進数	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
16進数	0	1	2	3	4	5	6	7	8	9	a	b	c	d	e	f

たとえば16進数の「34」は10進数では3×16+4=52，16進数の「ff」は10進数では15×16+15=255になります．
したがって #000000 は RGB 全部がもっとも暗いので黒，#ffffff は RGB 全部がもっとも明るいので白になります．また #ff0000 は R だけが明るいので赤，#00ff00 は G だけが明るいので緑，#0000ff は B だけが明るいので青になります．

別のページに色のサンプルを用意しています．

１．１１　文字の色を設定する

要素の色を指定するには，color プロパティを用います．body の color プロパティの設定は子要素に継承されるため，これにより Web ページ全体の要素の色を設定できます．それでは，それに濃い緑色(#003300)を設定してみましょう．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      body {
        border: outset 8px;
        line-height: 2;
        margin-top: 3em;
        margin-left: 5%;
        margin-right: 5%;
        height: 30em;
        color: #003300;
      }
      dl {
        border: inset 5px;
        padding: 1.5em;
        margin: 1em;
      }
      dt {
        font: bold italic larger serif;
        border-top: dotted thin;
        border-bottom: dotted thin;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

もちろん，要素の色は要素ごとに指定できます．見にくいですが，見出しにクリーム色(#ffffcc)を設定してみてください．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      body {
        border: outset 8px;
        line-height: 2;
        margin-top: 3em;
        margin-left: 5%;
        margin-right: 5%;
        height: 30em;
        color: #003300;
      }
      dl {
        border: inset 5px;
        padding: 1.5em;
        margin: 1em;
      }
      dt {
        font: bold italic larger serif;
        border-top: dotted thin;
        border-bottom: dotted thin;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
        color: #ffffcc;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

１．１２　背景の色を設定する

背景色の設定には，background-color というプロパティを用います．body の背景色を設定すれば，Web ページ全体の背景色になります．これに少しグレーがかった緑 (#669966) を設定してみます．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      body {
        border: outset 8px;
        line-height: 2;
        margin-top: 3em;
        margin-left: 5%;
        margin-right: 5%;
        height: 30em;
        color: #003300;
        background-color: #669966;
      }
      dl {
        border: inset 5px;
        padding: 1.5em;
        margin: 1em;
      }
      dt {
        font: bold italic larger serif;
        border-top: dotted thin;
        border-bottom: dotted thin;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
        color: #ffffcc;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

背景色も要素ごとに指定できます．dl や dt に対して background-color プロパティを設定すれば，リスト部分やキーワード部分の背景色を個別に変更できます．リスト全体の背景色には見出しと同じクリーム色(#ffffcc)，リストのキーワード部分の背景色には (#bbeebb) を設定してみます．下線部を追加した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      body {
        border: outset 8px;
        line-height: 2;
        margin-top: 3em;
        margin-left: 5%;
        margin-right: 5%;
        height: 30em;
        color: #003300;
        background-color: #669966;
      }
      dl {
        border: inset 5px;
        padding: 1.5em;
        margin: 1em;
        background-color: #ffffcc;
      }
      dt {
        font: bold italic larger serif;
        border-top: dotted thin;
        border-bottom: dotted thin;
        background-color: #bbeebb;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
        color: #ffffcc;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

なお，背景色は継承されません．子要素の背景色が変化しているのは，背景色を指定してしない要素の背景色が transparent（透明）だからです．

色を設定するプロパティ

color
要素の色を設定します．通常，その要素の文字の色となります．
background-color
要素の背景の色を設定します．transparent を指定すれば透明になります．
border-color
要素の枠線の色を設定します．色は１～４個指定でき，１個指定した場合はすべての辺にその色が適用され，４個指定した場合は左からそれぞれ上，右，下，左の辺の順に個々の色が適用されます．border-color を設定しなければ，color で設定した色が枠線の色として用いられます．

ここまでで下のような見掛けになります．字体などは必ずしもこの通りにならないかもしれません．

ちなみに前回作成した profile.html の見かけは，こう↓でした．<body>～</body>タグ内の HTML の本文に違いはありません．

１．１３　外部スタイルシート

ここまでくると，CSS だけで結構な長さになりました．そこで，この部分を別のファイルに保存します．C-kなどを使って網掛けの部分を削除し（スタイル指定だけを残して），C-x C-w で profile.css というファイル名を付けて保存してください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      body {
        border: outset 8px;
        line-height: 2;
        margin-top: 3em;
        margin-left: 5%;
        margin-right: 5%;
        height: 30em;
        color: #003300;
        background-color: #669966;
      }
      dl {
        border: inset 5px;
        padding: 1.5em;
        margin: 1em;
        background-color: #ffffcc;
      }
      dt {
        font: bold italic larger serif;
        border-top: dotted thin;
        border-bottom: dotted thin;
        background-color: #bbeebb;
      }
      h1 {
        text-align: center;
        text-decoration: underline;
        color: #ffffcc;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

次に C-x C-f で再度 profile.html を開き，今度は <style type="text/css">～</style> の部分を削除して次の１行に書き換えてください．書き換え終えたらバッファを保存し，Netscape で再読み込みしてください．レイアウトは変化しないはずです．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Profile</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <link rel="stylesheet" type="text/css" href="profile.css">
  </head>

  <body>

  （中略）

  </body>

</html>

CSS を別のファイルで設定することのメリットには，HTML ファイル自体を変更せずにスタイルの変更が行えること，複数のファイルで同じスタイルが共有できることなどが挙げられます．たとえば，index.html ファイルのヘッダ部に上記と同じ内容を追加すれば，このファイルにも同じスタイルが適用されます．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>Kentaro's page</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <link rel="stylesheet" type="text/css" href="profile.css">
  </head>

  <body>
    <h1>和歌山健太郎のホームページ</h1>
    <p>和歌山健太郎のホームページへようこそ．</p>
    <ul>
      <li><a href="profile.html">自己紹介</a></li>
      <li>時間割</li>
    </ul>
  </body>

</html>

２．ホームページ制作（テーブル編）

２．１　表を作成する

表は，セル（マス目）の内容を <td> ～ </td> または <th> ～ </th> でマークアップし，それらの１行分を <tr> ～ </tr> でマークアップして，全体を <table> ～ </table> でマークアップします．<th> ～ </th> は表の見出し欄に使います．例えば，３行４列の表（うち１行と１列は見出し）を書くには，次のように記述します．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>TABLE</title>
  </head>

  <body>

    <table>

      <tr>
        <th></th>
        <th>第１列</th>
        <th>第２列</th>
        <th>第３列</th>
      </tr>

      <tr>
        <th>第１行</th>
        <td>第１行第１列</td>
        <td>第１行第２列</td>
        <td>第１行第３列</td>
      </tr>

      <tr>
        <th>第２行</th>
        <td>第２行第１列</td>
        <td>第２行第２列</td>
        <td>第２行第３列</td>
      </tr>

    </table>

  </body>

</html>

それでは実際にこの表を作成してみましょう．まず pwd コマンド等でカレントディレクトリがホームディレクトリの下の html にあることを確認してください．次に emacs を使って table.html というファイルを作成し，上記の内容を打ち込んでください．タイピングに時間がかかるようなら，上記の内容を Netscape から emacs のバッファにコピー＆ペーストして構いません．打ち込み終わったら C-x C-s でバッファを保存し，table.html を Netscape で読み込んでください．下のような表が表示されたでしょうか？

２．２　枠線を表示する

表に枠線を引くには HTML の属性を指定する方法もありますが，ここでは CSS を使ってみます．table に対して border プロパティを指定すれば，表に外枠が描かれます．下線部を追加した後 C-x C-s でバッファを保存し，Netscape の再読み込みボタンをクリックしてみてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>TABLE</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      table {
        border: outset;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

セルの枠線を描くには td（データセル）や th（見出しセル）に対してborder プロパティを指定します．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>TABLE</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      table {
        border: outset;
      }
      td {
        border: inset;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>TABLE</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      table {
        border: outset;
      }
      td {
        border: inset;
      }
      th {
        border: inset;
      }
      -->
    </style>
  </head>

  <body>

  （中略）

  </body>

</html>

２．３　複数の列にまたがったセルを作る

２列以上にまたがったセルを作るには，そのセルに colspan="数値" という属性を指定します．数値はまたがる列数です．下線部を変更した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

  <head>
    <title>TABLE</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
      <!--
      table {
        border: outset;
      }
      td {
        border: inset;
      }
      th {
        border: inset;
      }
      -->
    </style>
  </head>

  <body>

    <table>

      <tr>
        <th></th>
        <th colspan="2">第１列と第２列</th>
        <th>第３列</th>
      </tr>

      <tr>
        <th>第１行</th>
        <td>第１行第１列</td>
        <td>第１行第２列</td>
        <td>第１行第３列</td>
      </tr>

      <tr>
        <th>第２行</th>
        <td>第２行第１列</td>
        <td>第２行第２列</td>
        <td>第２行第３列</td>
      </tr>

    </table>

  </body>

</html>

２．４　複数の行にまたがったセルを作る

同様に２行以上にまたがったセルを作るには，そのセルに rowspan="数値" という属性を指定します．数値はまたがる行数です．「第２行第２列」のセルが削除されていることに注意してください．下線部を変更した後バッファを保存し，Netscape で再読み込みしてください．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
  <title>TABLE</title>
</head>

<body>

  <table border="10" cellspacing="7" cellpadding="5">

    <tr>
      <th></th>
      <th colspan="2">第１列と第２列</th>
      <th>第３列</th>
    </tr>

    <tr>
      <th>第１行</th>
      <td>第１行第１列</td>
      <td rowspan="2">第１行と第２行の第２列</td>
      <td>第１行第３列</td>
    </tr>

    <tr>
      <th>第２行</th>
      <td>第２行第１列</td>
      <td>第２行第３列</td>
    </tr>

  </table>

</body>

</html>

課題

（１）表（<table>タグ）を使って，自分の時間割を timetable.html というファイル名でディレクトリ html の中に作成してください．また，index.html から timetable.html にリンクを張ってください（テーブルの補足）．

（２）スタイルシートを使って自分の Web ページのレイアウトを変更してください．

HTML に関する情報

より詳しい情報を得たければ，インターネットで検索してみてください．多分「山のように」情報が得られると思います．オリジナルの情報は W3C (World Wide Web Consortium) にありますが，とりあえず Yahoo Japan の HTML に関するリンク集あたりから探し始めるとよいでしょう．

HTMLの仕様等

HTML 4.01 Specification （邦訳 by HTML 4仕様書邦訳計画）

Web Content Accessibility Guidelines 1.0 （邦訳 by ZSPC）

Techniques for Web Content Accessibility Guidelines 1.0 （邦訳 by ZSPC）

XHTML 1.0 The Extensible HyperText Markup Language (Second Edition)（邦訳 by SUGAI, Manabu さん）
HTMLHelp.com

Webページ作成全般

ZSPC
とほほのWWW入門
初めてのホームページ講座
Academic HTML
SMART! ウェブ講座
初心者のためのホームページ作り-Web for beginner ホームページ作成支援
1と2の間辺りからはじめるHTML講座
NEXTindex（SUGAI, Manabu さん）
PC Tips（厳しいけど正論だと思う）

CSS関連（CSSの解説は上記のサイトにもあります）

CSS1仕様書（邦訳 by どら猫本舗さん）
CSS2仕様書（邦訳 by 九州大学大学院システム情報科学研究院情報工学部門計算機ソフトウェア研究グループ）
CSS解説
スタイルシートの裏の裏

情報処理 I - 第６回

今回の目標

１．ホームページ制作（スタイル編）

１．１ カスケーディングスタイルシート (CSS)

１．２ 長さの指定

１．３ 割合の指定

１．４ Web ページに CSS を組み込む

１．５ フォント（字体）を変更する

１．６ テキストの配置などを制御する

１．７ 枠線を描く

１．８ 継承について

１．９ 間隔を調整する

１．１０ 色の指定

１．１１ 文字の色を設定する

１．１２ 背景の色を設定する

１．１３ 外部スタイルシート