(8) 11/21の授業内容:HTML(4)　CSS

htmlとCSS

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

かつてはhtmlのタグの中には、太字にする<b>タグ、文字の色や大きさを変える<font>タグ等、意味を付加するのではなく、単に見栄えを規定するものが含まれていた。現在はこれらのタグは非推奨要素とされ、なるべく利用を避けることが求められている。この理由について考えるために、様々な利用環境を考えてみよう。例えば以下のような状況でWebページを閲覧している人がいることを考えてみる。

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

ここで、特定の部分が重要であることをあらわすために、<font>タグを用いて、赤色の大きな文字で書くことを考えてみよう

我々は、通常赤色で書かれた文章や、大きな文字で書かれた文章を見た場合、その部分が重要であると感じる。しかし、赤色そのものが重要であるという意味を持っているわけではないし、大きな文字が重要であることを意味しているわけではない。我々がその文章を見た場合に勝手に重要であると解釈しているだけである。

このように、重要であるかどうかは見た人が判断するという方策をとった場合、問題が生じることがある。白黒のモニタでは赤色の文字は見ることができないし、読み上げブラウザでも赤色を表現することができない。また携帯電話では文字の大きさが単一となるため、文字の大きさによる表現では違いをとらえることができなくなるし、テキストブラウザも同様である。

重要であるという意味を持つ<strong>タグや<em>タグを用いれば、コンピュータがその部分を重要であると解釈できるため、代替手段（大きな声で読む、少し間を空けて読む等）を用いた表現が可能になる。

文章の意味を表すhtmlに対し、文章の見栄えを指定するものとしてCSS（カスケーディングスタイルシート）がある。

CSS

タグに対してデザインを追加するのがCSSとなる。例えば下のケースを見てみよう。

  1. <p>何色で表示されるかしら</p>
  2. <p style="color:red">何色で表示されるかしら</p>
  3. <p style="color:#ff0000">何色で表示されるかしら</p>
  4. <strong>どんな風に強調されるかしら</strong>
  5. <strong style="color:#ff0000">どんな風に強調されるかしら</strong>
  6. <strong style="font-style:italic;font-size:20px">どんな風に強調されるかしら</strong>

  1. 何色で表示されるかしら

  2. 何色で表示されるかしら

  3. 何色で表示されるかしら

  4. どんな風に強調されるかしら
  5. どんな風に強調されるかしら
  6. どんな風に強調されるかしら

CSSを用いたデザインの指定方法はいくつかあるが、ここではstyle属性を使った方法について説明する。

<タグ名 style="プロパティ1:値;プロパティ2:値">

これがstyle属性を用いた指定方法になる。style=""の中でデザインを指定する。例えばstyle="color:red"は文字の色を赤くするというスタイル指定である。ここでcolorが文字色を指定するものでプロパティと呼ぶ。redが具体的な色でプロパティに対応する値となる。CSSではプロパティと値をコロン（：）でつないで示す。複数のプロパティを指定する場合はセミコロン（；）でつなぐ。

  • color:文字の色を指定する。値の指定方法は下記参照
  • font-style:文字のスタイルを指定する。値としてnormal（通常）、italic（斜体）が指定できる
  • font-size：文字の大きさを指定する。大きさの単位は下記参照

色の指定方法について

色の指定は"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 style="color:aqua">aquaにしてみました</p>
  • <p style="color:#cc66ff">#cc66ffにしてみました</p>

  • aquaにしてみました

  • #cc66ffにしてみました

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

大きさを変更する場合、様々な単位を使用することができる。

  • <p style="margin:0;padding:0;font-size:16px">16pxにしてみました</p>
  • <p style="margin:0;padding:0;font-size:2em">2emにしてみました</p>
  • <p style="margin:0;padding:0;font-size:3ex">3exにしてみました</p>

  • 16pxにしてみました

  • 2emにしてみました

  • 3exにしてみました

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

このページの背景は白色であるが、他の色に変更することもできる。また<p>タグや<h1>タグに背景色を指定することもできる。

  • <body style="background-color:yellow"><body>タグに黄色の背景色を指定しました（</body>はファイルの一番下に書かれるのでここでは省略）
  • <p style="margin:0;padding:0;background-color:lime"><p>タグの背景色をlimeにしてみました</p>
  • <body>タグに黄色の背景色を指定しました(本当はページ全体の背景が黄色になります)

  • <p>タグの背景色をlimeにしてみました

下線を引く（text-decoration）

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

  • <p style="text-decoration:underline">値にunderlineを指定しました</p>
  • <p style="text-decoration:line-through">値にline-throughを指定しました</p>
  • <p style="text-decoration:overline">値にoverlineを指定しました</p>

  • 値にunderlineを指定しました

  • 値にline-throughを指定しました

  • 値に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）

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

  • <p style="text-align:left">左揃えにしました</p>
  • <p style="text-align:center">中央揃えにしました</p>
  • <p style="text-align:right">右揃えにしました</p>

左揃えにしました

中央揃えにしました

右揃えにしました

課題

本日まで5回にわたってHTMLの授業を行ってきた。これにより文法的に正しく、かつデザイン性に富むページを作ることができるはずである。Webページ課題は、これまで作成してきた2つのhtmlファイルを提出してもらうというものである。なお、実際に添付ファイルで送信するのではなく、URLをメールで伝えればよい。

採点基準は、前回紹介したAnother HTML-lint gatewayの採点結果によって定める。2ページとも採点し、どちらか得点の高いほうを採用する。

  • 100点の場合：20点
  • 50〜99点：18点
  • 0〜49点：15点
  • マイナス：12点
  • 遅れ提出は上記から5点マイナスとする

採集提出期限は12月15日（金）とする。この日までに提出した場合を期限内提出とする。

今日の課題

HTMLを書いてみた感想をメールで送る。既に2ページとも作成が終わった場合は、この場で課題を提出しても良い。その場合はURL（2つとも）をメールに記載すると同時に、課題提出である旨本文中に記載すること。

  1. 提出先：naoya@e.koeki-u.ac.jp
  2. メールの件名（Subject）：literacy(8)
  3. 提出期限：授業終了時
  4. 電子メールの使い方に自信がない場合：Mewの主要コマンドについてを確認しよう