私のホームページへ - 前の授業へ - 次の授業へ

情報処理IIA(HTML入門)第4回

目次
  1. スタイルシート(2)
  2. 文書の内容を示すタグ
  3. 演習4
  4. レポート課題

スタイルシート(2)

同じ範囲に対して数種類のスタイルを指定する場合、今までは<div>タグや<span>タグを何回も書く必要がありました。 これを一つのタグにまとめる方法があります。 style属性の値をセミコロン(;)で区切って並べて書けば、そのタグに囲まれた部分に、それらのスタイルが同時に指定されます。

例4.1
<span style="color: blue">
<span style="background-color: aqua">
ABCDE
</span>
</span>

<span style="color: blue; background-color: aqua">
ABCDE
</span>
ABCDE ABCDE

<div>タグによるスタイルの指定と<span>タグによるスタイルの指定を組み合わせるときは、<div>タグにまとめるようにしてください。 <div>タグは、囲まれた範囲を前後と独立して表示させますが、<span>タグは、それだけでは何もしないからです。

例4.2
<div style="text-align: center">
<span style="color: navy">
abcdefghijklmnopqrstuvwxyz
</span>
</div>

<div style="text-align: center; color: navy">
abcdefghijklmnopqrstuvwxyz
</div>
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz

フォントを切り替えるタグ<tt>, <i>, <b>も、style属性にまとめることができます。 次の表にしたがってください。

表4.1 フォントの種類とstyle属性の値
フォントの種類タグの名前style属性の値
タイプライタ体ttfont-family: monospace
イタリック体ifont-style: italic
ボールド体bfont-weight: bold

例4.3
<span style="color: purple">
<i>
abcdefghij
</i>
</span>

<span style="color: purple; font-style: italic">
abcdefghij
</span>
abcdefghij abcdefghij

文書の内容を示すタグ

文書の内容と見栄え

ホームページには、見栄えが重要なページと内容が重要なページがあります。 大企業のトップページなどは、細かい情報を載せるよりも、画像やアニメーションなど人目を引くデザインに力を入れて、企業イメージを損なわないことが重要になります。

一方、マニュアルや、データの一覧、小説などのホームページでは、内容が重要であり、見栄えはそれほど問題になりません。 内容が重要なホームページでは、見栄えをブラウザに任せてしまい、作者は内容の構成に集中するのが理想的です。

HTMLには、文書の内容を示すタグが用意されています。 例えば、<p>タグは段落を表します。 ホームページの作者は、段落を<p></p>で囲みますが、段落をどう表示するかは気にしません。 ブラウザは、<p></p>に囲まれた部分を、あらかじめ決められた方法に従い、段落らしく表示します。 作者は、何回強制改行をすると段落に見えるかなどという、余計なことを考えなくてよいのです。

もちろん、ブラウザの用意している見栄えでは満足できない場合もあるでしょう。 スタイルシートを用いると、ブラウザが用意している見栄えを変更できます。 この授業では、style属性を使って見栄えを変更することにします。

見出し

典型的な本は、表紙に書名が書いてあり、本文はいくつかの章に分かれ、章はいくつかの節に分かれます。 章の始めには章見出しがあり、節の始めには節見出しがあります。 この、書名、章見出し、節見出しなどをまとめて見出しとよぶことにします。

ホームページにも見出しが付けられます。 レベル1の見出しからレベル6の見出しまで用意されています。 大規模なホームページでは、レベル1の見出しを書名、レベル2の見出しを章見出し、レベル3の見出しを節見出しのように使うとよいでしょう。 小規模のホームページでは、レベル1の見出しを表題、レベル2の見出しを節見出し、レベル3の見出しを小節の見出しのように使うとよいでしょう。

ブラウザは、HTMLファイルで<h1></h1>に囲まれた部分をレベル1の見出しと見なします。 <h2></h2>だと、レベル2の見出しです。 <h3></h3>でレベル3, <h4></h4>でレベル4, <h5></h5>でレベル5, <h6></h6>でレベル6です。

ブラウザは、レベル1の見出しを、前後と独立させて大きなボールド体で表示します。 レベル2の見出しは、同様にやや大きな字で表示されます。 レベル3, レベル4, レベル5, レベル6と順に字が小さくなります。

例4.4
<h1>JavaScript入門</h1>
<h2>はじめに</h2>
<h3 style="color: maroon">JavaScriptとは</h3>
JavaScript入門

はじめに

JavaScriptとは

段落

本の場合、見出しのあとはいくつかの段落が続きます。 ホームページでも同様に、見出しのあとに段落を並べます。

ブラウザは、HTMLファイルで<p></p>に囲まれた部分を段落と見なします。 ブラウザは、段落を、前後と独立させ、上下に余白を設けて表示します。

例4.5
<p>
JavaScriptは、WWWブラウザ上で実行できるスクリプト言語です。
スクリプトとは、簡易プログラムのことだと思ってください。
</p>
<p style="color: olive">
JavaとJavaScriptは、名前は似ていますが、まったく別物です。
</p>
JavaScriptは、WWWブラウザ上で実行できるスクリプト言語です。 スクリプトとは、簡易プログラムのことだと思ってください。

JavaとJavaScriptは、名前は似ていますが、まったく別物です。

注意1: HTMLの非常に古い規格では、<p>タグは段落の終わりを表しました。 <br>タグと似た扱いだったようです。 もちろん、現在では<p>タグは段落の始めを表します。 古い文献を読むときは注意してください。

注意2: 規格上、終了タグ</p>は省略できます。 段落に関するタグの補正は比較的容易なので、こう定められたのでしょう。 しかし、ホームページの作者の思った通りに終了タグ</p>が補足されるとは限りませんので、なるべく省略しないほうがよいでしょう。

引用

文書を構成する際、他の参考資料などを引用する場合もあります。 引用文は、自分の書いた文章と区別する必要があります。

ブラウザは、HTMLファイルで<blockquote></blockquote>に囲まれた部分を、(長い)引用文と見なします。 ブラウザは、引用文を、前後と独立させ、上下左右に余白を取って表示します。

例4.6
<p>私の友人は次のように語ってくれた。</p>
<blockquote>
   <p>
   JavaScriptは、GUIプログラミングの入門に最適だろう。
   </p>
   <p>
   オブジェクト指向プログラミングもできるが、単純すぎるところがある。
   </p>
</blockquote>
私の友人は次のように語ってくれた。

JavaScriptは、GUIプログラミングの入門に最適だろう。

オブジェクト指向プログラミングもできるが、単純すぎるところがある。

箇条書き

いくつかの項目を並べる場合、それらを箇条書き(リスト)にすると分かりやすくなります。 HTMLには、箇条書きを表す方法が3種類用意されています。

第1の方法は、項目の順序にあまり意味のない場合の箇条書きです。 ブラウザは、<li></li>に囲まれた部分を、箇条書きの項目と見なします。 そして、項目の並びが<ul></ul>に囲まれると、その部分を番号なしリストと見なします。 ブラウザは、番号なしリストを、前後と独立させ、上下に余白を設けて表示します。 各項目は字下げされ、先頭に●などの記号が付きます。

例4.7
<p>JavaScriptのプログラムは、次の3か所に書けます。</p>
<ul>
   <li>外部ファイル</li>
   <li>&lt;script&gt;タグの中</li>
   <li>イベント属性の値</li>
</ul>
JavaScriptのプログラムは、次の3か所に書けます。

● 外部ファイル
● <script>タグの中
● イベント属性の値

注意: 規格上、終了タグ</li>は省略できますが、なるべく省略しないほうがよいでしょう。

第2の方法は、項目の順序に意味のある場合の箇条書きです。 ブラウザは、<li></li>に囲まれた部分を、箇条書きの項目と見なします。 そして、項目の並びが<ol></ol>に囲まれると、その部分を番号付きリストと見なします。 ブラウザは、番号付きリストを、前後と独立させ、上下に余白を設けて表示します。 各項目は、字下げされ、先頭に1., 2., ... と番号が付きます。

例4.8
<p>一般的に、プログラム開発は次の工程を経ます。</p>
<ol>
   <li>アルゴリズムやデータ構造の設計</li>
   <li>コーディング</li>
   <li>テストとデバッグ</li>
</ol>
一般的に、プログラム開発は次の工程を経ます。

1. アルゴリズムやデータ構造の設計
2. コーディング
3. テストとデバッグ

最後の方法は、定義リストとよばれるものです。 これは、用語の定義などに使われる箇条書きの方法で、項目とその説明、項目とその説明、…と並べるものです。

ブラウザは、<dt></dt>に囲まれた部分を、説明される項目と見なします。 <dd></dd>に囲まれた部分を、その説明と見なします。 そして、項目とその説明の並びが<dl></dl>に囲まれると、その部分を定義リストと見なします。 ブラウザは、定義リストを、前後と独立させ、上下に余白を設けて表示します。 各項目の説明は、字下げされます。

例4.9
<dl>
   <dt>算術演算子</dt>
      <dd>
      数値に対する演算を表す記号。
      +, -, *, /など。
      </dd>
   <dt>論理演算子</dt>
      <dd>
      論理値に対する演算を表す記号。
      &amp;&amp;, ||, !など。
      </dd>
   <dt>文字列演算子</dt>
      <dd>文字列に対する演算を表す記号。+など。</dd>
</dl>
算術演算子
数値に対する演算を表す記号。 +, -, *, /など。
論理演算子
論理値に対する演算を表す記号。 &&, ||, !など。
文字列演算子
文字列に対する演算を表す記号。+など。

注意: 規格上、終了タグ</dt>, </dd>は省略できますが、なるべく省略しないほうがよいでしょう。

アドレス

本に奥付けを設けるように、ホームページの最後にも、作者の氏名(組織名)、メールアドレス、ホームページの更新日、著作権情報などを書いておくのは良い習慣です。 このような、連絡先に類する情報をアドレスとよぶことにします。

ブラウザは、HTMLファイルで<address></address>に囲まれた部分を、アドレスと見なします。 ブラウザはアドレスをイタリック体で表示します。

例4.10
<p>JavaScriptを使って、色々なプログラムを作成してください。</p>
<hr>
<address style="color: teal">
konishi@twcu.ac.jp 小西 善二郎<br>
2000年5月11日更新<br>
Copyright 2000 Zenjiro Konishi.
All rights reserved.
</address>
JavaScriptを使って、色々なプログラムを作成してください。

konishi@twcu.ac.jp 小西 善二郎
2000年5月11日更新
Copyright 2000 Zenjiro Konishi. All rights reserved.

強調など

文書を作成していると、一部の語句を強調したり、より強く強調したりしたくなることがあります。 英語などの場合、強調する語句はイタリック体、より強く強調する語句はボールド体を用いるのが習わしです。 しかし、この慣習を覚えておいて<i>タグや<b>タグを使うのでは、あまり文書の内容に集中しているとは言えません。 作者は強調を示すタグで語句を囲むだけにして慣習を意識せず、ブラウザが慣習に基づいてその語句をボールド体で表示するのが理想的です。

ブラウザは、このようなフォントの慣習をいくつか知っています。 この主なものを表に示します。 語句の意味が表にあるものならば、なるべく対応するタグを使いましょう。

表4.2 語句の意味を表すタグ
語句の意味タグの名前使われるフォント
強調emイタリック体
より強い強調strongボールド体
文献参照citeイタリック体
定義語句dfnボールド体
プログラムコードcodeタイプライタ体
出力例sampタイプライタ体
キー入力kbdタイプライタ体
変数varイタリック体
例4.11
<p>
<strong>Don't write</strong>
<code>if (x = y)</code> ....
A single equal sign (<code>=</code>) is used
in an <em>assignment statement</em>.
</p>
Don't write if (x = y) .... A single equal sign (=) is used in an assignment statement.

整形済みテキスト

HTMLファイルでスペースや改行をいくら続けて書いても、ブラウザはそれをひとつのスペースと見なします。 多くのテキストではそれで問題ないですが、プログラムコードなどでは、改行や字下げがプログラマにとって重要な情報になります。 また、電子メールなどで、文字を使って簡単な図や表を書くことはよくありますが、この場合も、勝手に改行されたり、並んでいるスペースを一つにされたくはありません。 このように、スペースや改行を用いて文字の位置合せがなされているテキストを、整形済みテキストとよびます。

ブラウザは、HTMLファイルで<pre></pre>に囲まれた部分を、整形済みテキストと見なします。 ブラウザは、整形済みテキストを、前後と独立させ、タイプライタ体のフォントで、勝手に改行したりせず、改行は改行のまま、スペースの並びはスペースの並びのまま表示します。

例4.12
<pre>
           1997   1998   1999
------------------------------
Section 1  6,875  5,270  5,076
Section 2    943  1,155  1,004
Section 3  3,983  3,487  3,974
</pre>
           1997   1998   1999
------------------------------
Section 1  6,875  5,270  5,076
Section 2    943  1,155  1,004
Section 3  3,983  3,487  3,974

注意<pre></pre>に囲まれた部分がそのまま表示されるわけではありません。 特殊文字<, &などを表示したい場合は、今まで通り&lt;, &amp;などで置き換える必要があります。


演習4

以下のテキスト(http://www.twcu.ac.jp/~konishi/ex4.htmlにあります)にタグを追加して、HTMLファイルを完成させてください。 追加するタグは、見出し、段落、箇条書きなど、文書の内容を表すものにしてください。


                     JavaScript入門


JavaScriptとは


  JavaScriptとは、WWWブラウザ上で動くスクリプト言語です。ス
クリプトとは、簡易プログラムだと思ってください。多くのスクリ
プト言語と同様、JavaScriptはインタプリタで動きます。
  JavaとJavaScriptは、名前は似ていますが、まったく別物です。
ただし、表面上の類似点は数多くあります。
  JavaScriptのプログラムは、基本的にHTMLファイルの中に書きま
す。具体的には、次の3か所に書けます。

    ●HTMLファイルで指定した外部ファイル
    ●<script>タグの中
    ●イベント属性の値


データ型と演算子


  JavaScriptの扱えるデータ型には、数値、論理値、文字列などが
あります。それぞれに対する演算子は次の通りです。

算術演算子
      加算(+), 減算(-), 乗算(*), 除算(/)など。
論理演算子
      論理積(&&), 論理和(||), 否定(!)。
文字列演算子
      結合(+)のみ。

  JavaScriptを使って、色々なプログラムを作成してください。
 -----------------------------------------------------
2000年5月11日更新


レポート課題

今日の演習4にしたがってHTMLファイルを作成し、konishi@twcu.ac.jpあてにメールでそのURIを報告してください。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。


私のホームページへ - 前の授業へ - 次の授業へ
このページの複製は、東京女子大学学内に限り許可します。 このページへのリンクを許可します。
2000年5月11日更新
製作・著作:小西善二郎<konishi@twcu.ac.jp>