roy > naoya > 情報リテラシーII > (9)HTML[4]

(9) 11/27の授業内容:HTML[4]-CSS

htmlとCSS

html言語で書かれたファイルをブラウザで閲覧することで、タグが解釈され図や表、ハイパーリンク等を表示することが可能となった。htmlの狙いはどこにいても、どのようなコンピュータ環境であっても、ネットワークにつながりさえすれば、同じ情報を入手、伝達できるというものである。

かつてはhtmlのタグの中には、文字の色や大きさを変える<font>タグや下線を引く<u>タグ等、単に見栄えを規定するものが含まれていた。現在はこれらのタグは非推奨要素とされ、Strict.dtdではそもそも利用できない。

見栄えを規定する要素を使用するべきではない理由として、以下のような状況でWebページを閲覧している人について考えてみよう。

  • 白黒のディスプレイを用いている
  • 画面の小さいディスプレイを用いている
  • テキストブラウザを用いている（画像が表示できない、文字の大きさを変更できない）
  • 読み上げブラウザを用いている（視覚障害者、画像や色が見えない）
  • 携帯電話で見ている（文字の大きさを変えられない）

こうした様々な閲覧方法がある中で、文章中の特定の部位が重要であることをどのように示せばよいだろうか。いくつか例を挙げてみよう。

要素名

使用例

用法

big

ここはとても重要です

<big>重要</big>

font

ここはとても重要です

<font color="red" size="+2">重要</font>

i

ここはとても重要です

<i>重要</i>

b

ここはとても重要です

<b>重要</b>

u

ここはとても重要です

<u>重要</u>

我々が目で見た場合、これらはいずれも重要であることがわかる。しかし、本来、赤色や下線、太字に重要であるという意味はない。それを見た人が勝手に重要であると判断しているに過ぎない。

このような方法はあまりよろしくない。というのも、白黒のモニタでは赤色は表現できないし、読み上げブラウザでも文字の色や下線を表現できない、携帯電話の場合は文字の大きさを変えることができないこともある。

この結果として、こうした環境下でWebページを閲覧している人に対して、重要であるという情報を伝達することができなくなってしまうのである。重要であることを伝えるためには、特定の部位を強調する<strong>タグや<em>タグを用いるのがよい。これにより、コンピュータは当該部位が強調されていると解釈できるため、何らかの表現方法（大きな声で読むとか、少し間を空けて読むとか）を用いて他の部分との差別化をはかることができる。

現在htmlは文章の構造を表すために用いられ、文章の見栄えを指定するためにhtmlは使用してはならないと規定されている。文章の見栄えを指定するのがCSS（カスケーディングスタイルシート）である。

CSS

CSSによるデザインの指定にはいくつかの方法があるが、ここでは1種類だけ取り上げて説明する。

これまで作成してきたindex.htmlとclass.htmlでは<head></head>の間に次のような部分があった。これがCSSであり、ここでデザインの指定をしている。

<style type="text/css">
<!--
body {
       background-color: #ffccff
     }
h1 {
       color: #cc0066
     }
address {
       text-align: right
     }
.normal {
       font-style: normal;
       font-weight:bold
     }
-->
</style>

CSSを指定する際の基本構造は次の通り。

CSSの指定方法

要素名 {プロパティ1:値; プロパティ2:値}

例えば

h1 {
       color: #cc0066
     }

はh1要素にcolorというプロパティを設定したもので、<h1>タグを使用した場合には、自動的に#cc0066という色にせよという指示をしている。なお、書き方について、上に書いたものは

h1 {color: #cc0066}

というように1行で書いても良い。また、複数のプロパティを指定する場合は、セミコロンでつないで示す。

h1 {
       color: #cc0066;
       text-decoration: underline;
       font-style: italic
     }
または
h1 {color: #cc0066; text-decoration: underline; font-style: italic}

となる。text-decoration: underlineは下線を引けという指示、font-style: italicは文字をイタリック体（斜体）にせよという指示になる。

いくつかCSSの適用例を見てみよう。いずれも<h3>はじめに</h3>と書いている。

表示結果

CSSの指定

はじめに

CSS指定なし

はじめに

h3 {color: #cc0066}

はじめに

h3 {text-decoration: underline}

はじめに

h3 {color:#0000ff; font-style: italic}

はじめに

h3 {background-color: #ffcccc}

class属性を用いたCSSの指定

これまで見てきた方法は、特定のタグを使用する際には全て共通のスタイルを適用するという方法である。しかし、場合によっては特定の場面でのみスタイルを適用したいということもある。このような時に使用するのがclass属性である。スタイルを指定する際に

class属性を用いたCSSの指定方法

.hoge {プロパティ1:値; プロパティ2:値}

というように、.○○という名称でスタイルを指定する。ここでは.hogeとしているが、名称は何でも良い。{}内のスタイルの指定方法はこれまでと同じである。その上で、

html内でのclass属性の使用

<要素 class="hoge">〜</要素>

というように、開始タグにclass属性を追加する。この際、.hogeの先頭の.(ドット)は記載しない。いくつかclass属性を用いたCSSの適用例を見てみよう。いずれも<h3>はじめに</h3>と書いている。

表示結果

CSSの指定

はじめに

CSS指定なし

はじめに

.green {color: #00ff00}として
<h3 class="green">はじめに</h3>

はじめに

.hogehoge {text-decoration: line-through}として
<h3 class="hogehoge">はじめに</h3>

はじめに

h3 {background-color: #ccccff}
.red {color: #ff0000}として
<h3 class="red">はじめに</h3>

はじめに

h3 {background-color: #ccccff}
.yellow {background-color: #ffff66; color: #ff0000}として
<h3 class="yellow">はじめに</h3>

上から4つ目の例では、h3要素へのスタイルとして水色の背景色を指定し、redというclassで赤色文字を指定している。この場合、要素に指定したスタイルとclassに指定したスタイルがいずれも適用される。

一番下の例ではh3要素へのスタイルとして水色の背景色を指定し、yellowというclassで赤色文字と背景色黄色を指定している。背景色の指定が要素とclassで競合しているが、要素に指定したスタイルとclassで指定したスタイルが競合する場合はclassで指定したスタイルが優先される。

色の指定方法について

色の指定は"red"や"blue"などの具体的な名称か、#ff0000のような形式で指定する。後者はR（赤）G（緑）B（青）の混色で色を表現するもので、#ff0000は先頭の2桁がR、中間の2桁がG、最後の2桁がBを指定している。ffは16進法で255をあらわすものである。RGBそれぞれについて00からffまでの256段階で光の強さを調整し、これらを混ぜた色を表示させている。#ff0000であれば、Rの強さが256、GとBは0なので、赤色が表示される。

具体的な色名で指定することができる色は下記の16色のみとなる。それ以外の色も表示できる場合があるが、環境によって異なる色になる場合があるため、使用は避けるのが無難である。

black

silver

gray

white

maroon

red

purple

fuchsia

green

lime

olive

yellow

navy

blue

teal

aqua

#ff0000のような方法による色指定では、2563種類の色を表すことができる。ただし、多くの色は環境によって表示される結果が異なってしまう。どのような環境でも共通して表示することができる216色をWeb Safe Colorと呼ぶ。以下がそのリストとなる。

#000000

#003300

#006600

#009900

#00cc00

#00ff00

#000033

#003333

#006633

#009933

#00cc33

#00ff33

#000066

#003366

#006666

#009966

#00cc66

#00ff66

#000099

#003399

#006699

#009999

#00cc99

#00ff99

#0000cc

#0033cc

#0066cc

#0099cc

#00cccc

#00ffcc

#0000ff

#0033ff

#0066ff

#0099ff

#00ccff

#00ffff

#330000

#333300

#336600

#339900

#33cc00

#33ff00

#330033

#333333

#336633

#339933

#33cc33

#33ff33

#330066

#333366

#336666

#339966

#33cc66

#33ff66

#330099

#333399

#336699

#339999

#33cc99

#33ff99

#3300cc

#3333cc

#3366cc

#3399cc

#33cccc

#33ffcc

#3300ff

#3333ff

#3366ff

#3399ff

#33ccff

#33ffff

#660000

#663300

#666600

#669900

#66cc00

#66ff00

#660033

#663333

#666633

#669933

#66cc33

#66ff33

#660066

#663366

#666666

#669966

#66cc66

#66ff66

#660099

#663399

#666699

#669999

#66cc99

#66ff99

#6600cc

#6633cc

#6666cc

#6699cc

#66cccc

#66ffcc

#6600ff

#6633ff

#6666ff

#6699ff

#66ccff

#66ffff

#990000

#993300

#996600

#999900

#99cc00

#99ff00

#990033

#993333

#996633

#999933

#99cc33

#99ff33

#990066

#993366

#996666

#999966

#99cc66

#99ff66

#990099

#993399

#996699

#999999

#99cc99

#99ff99

#9900cc

#9933cc

#9966cc

#9999cc

#99cccc

#99ffcc

#9900ff

#9933ff

#9966ff

#9999ff

#99ccff

#99ffff

#cc0000

#cc3300

#cc6600

#cc9900

#cccc00

#ccff00

#cc0033

#cc3333

#cc6633

#cc9933

#cccc33

#ccff33

#cc0066

#cc3366

#cc6666

#cc9966

#cccc66

#ccff66

#cc0099

#cc3399

#cc6699

#cc9999

#cccc99

#ccff99

#cc00cc

#cc33cc

#cc66cc

#cc99cc

#cccccc

#ccffcc

#cc00ff

#cc33ff

#cc66ff

#cc99ff

#ccccff

#ccffff

#ff0000

#ff3300

#ff6600

#ff9900

#ffcc00

#ffff00

#ff0033

#ff3333

#ff6633

#ff9933

#ffcc33

#ffff33

#ff0066

#ff3366

#ff6666

#ff9966

#ffcc66

#ffff66

#ff0099

#ff3399

#ff6699

#ff9999

#ffcc99

#ffff99

#ff00cc

#ff33cc

#ff66cc

#ff99cc

#ffcccc

#ffffcc

#ff00ff

#ff33ff

#ff66ff

#ff99ff

#ffccff

#ffffff

大きさや長さの単位について

大きさや長さをあらわす単位には相対単位と絶対単位がある。

  • px(相対単位）：ピクセル単位で指定する。ディスプレイは粒（ピクセル）の集合体によって構成されているが、その最小単位のピクセル数で表現する。コンピュータのディスプレイの解像度によって大きさは変化する。
  • em（相対単位）：デフォルトのフォントサイズを1とする単位。
  • ex（相対単位）：デフォルトのフォントのx-heightを1とする単位。アルファベットにはhのように上に突き出るもの、pのように下に突き出るものがあるが、aのように上下に突き出ないものもある。このaの高さをx-heightという。
  • cm（絶対単位）：センチメートル
  • mm（絶対単位）：ミリメートル
  • in（絶対単位）：インチ（1インチ=2.54cm）
  • pt（絶対単位）：ポイント（1pt=1/72インチ）
  • pc（絶対単位）：パイカ（1pc=12ポイント）

その他に%を使用できる場合もある。

CSSのプロパティについて

CSSのプロパティは多数ある。全てを網羅的に紹介しても使いこなすのは難しいので、ここではよく使われるプロパティを中心に説明する。より詳しく知りたい場合は以下のページを参照して欲しい。

CSSリファレンス

文字の色を変更する（color）

値として具体的な色を指定する。具体的な色名で指定できる16色か、Web Safe Colorを利用する。

  • p {color:#cc66ff} として <p>#cc66ffにしてみました</p>
    　#cc66ffにしてみました
  • .fuchsia {color:fuchsia} として <p class="fuchsia">aquaにしてみました</p>
    　fuchsiaにしてみました

文字の大きさを変更する（font-size）

大きさを変更する場合、様々な単位を使用することができる。また具体的に数値で指定するかわりに、キーワードで指定することもできる。

キーワードはxx-small、x-small、small、medium、large、x-large、xx-largeの7段階がある。標準はmediumになる。具体的な数字（絶対単位）で指定した場合は文字サイズを変更することができないが、相対単位やキーワードで指定すると、表示する文字の標準の大きさを変更することで、文字を大きくしたり小さくしたりすることができる。大きな字で読みたい人もいるので、文字サイズは固定しない方が良い。

  • p {font-size: 8pt} として <p>8ptにしてみました</p>
    　8ptにしてみました
  • .big {font-size:2em} として <p class="big">2emにしてみました</p>
    　2emにしてみました
  • .mid {font-size:medium} として <p class="mid">mediumにしてみました</p>
    　mediumにしてみました

背景の色を変更する（background-color・background-image）

background-colorは背景色を指定するプロパティである。これに対してbackground-imageは背景に画像を指定するプロパティとなる。background-imageを使用する場合は、あらかじめ画像を準備してpublic_htmlの中に保存しておく必要がある。なお、ページ全体の背景に色を指定するためにはbody要素に対してbackground-colorやbackground-imageの指定をすればよい。

  • p {background-color: #000000; color: #ffffff} として <p>こんな風に白黒反転させることもできます。</p>
    　こんな風に白黒反転させることもできます。
  • .image {background-image: url(orange.jpg)} として <p class="image">背景に画像を使用することもできます。</p>
    　背景に画像を使用することもできます。

下線を引く（text-decoration）

text-decorationプロパティは下線やその他の種類の線を引くことができる。

  • text-decoration:underline
    　値にunderlineを指定しました
  • text-decoration:line-through
    　値にline-throughを指定しました
  • text-decoration:overline
    　値にoverlineを指定しました

行間の幅を変える（line-height）

line-heightプロパティを指定すると読みやすくなる場合がある。

line-height:normal

line-heightプロパティを指定すると文章が読みやすくなる場合があります。ある程度行間は広いほうが読みやすいですが、逆に広くなりすぎると読みにくくなります。1行の文字数が少ない場合は狭いほうが読みやすいですが、文字数が多い場合はある程度広くしたほうが良いと思います。どれが一番読みやすいか比較してみましょう。

line-height:200%

line-heightプロパティを指定すると文章が読みやすくなる場合があります。ある程度行間は広いほうが読みやすいですが、逆に広くなりすぎると読みにくくなります。1行の文字数が少ない場合は狭いほうが読みやすいですが、文字数が多い場合はある程度広くしたほうが良いと思います。どれが一番読みやすいか比較してみましょう。

line-height:15mm

line-heightプロパティを指定すると文章が読みやすくなる場合があります。ある程度行間は広いほうが読みやすいですが、逆に広くなりすぎると読みにくくなります。1行の文字数が少ない場合は狭いほうが読みやすいですが、文字数が多い場合はある程度広くしたほうが良いと思います。どれが一番読みやすいか比較してみましょう。

行揃えをする（text-align）

右揃えや中央揃えを指定することができます。

  • 左揃え：　text-align: left
  • 中央揃え：　text-align: center
  • 右揃え：　text-align: right

左揃えにしました

中央揃えにしました

右揃えにしました

出席課題

先週の作業の続きを行う。本日新しく実施できるようになったのは以下の作業である。今日の内容を忘れないように以下を先に行っても良いし、先週までの未完成部分を先に行っても良い。

  • index.html、class.htmlの見栄えを良くする（CSSでスタイルを指定する）。

今日の課題：作業の進捗状況をメールで報告する。

  1. 提出先：課題提出用メールアドレス
  2. メールの件名（Subject）：literacy(9)
  3. 提出期限：授業終了時
  4. 電子メールの使い方に自信がない場合：Mewの主要コマンドについてを確認しよう