オンラインテキスト目次
Webページの作成目次

mizutani@rsch.tuis.ac.jp
参考書『インターネット時代のコンピュータリテラシー』（水谷正大、共立出版）

HTMLの整形表現

読みやすいWeb文書のための整形表現
目次
HTMLはWebページレイアウトを絶対的に指定しない
文の見出し<hn>...<hn>
HTML文書の文構造
横線、強制改行と段落
横線<hr>
強制改行 <br>
段落 <p>...</p>
文の引用 <blockquote>...</blockquote>
整形済テキスト <pre>...</pre>
箇条書
単純箇条書
列挙箇条書
見出し付箇条書
タグのネスティング
HTMLの特殊記号
アドレスタグ
文のグループ化 <div>...</div>
汎用タグ <span>...</span>
目次へ

HTMLはWebページレイアウトを絶対的に指定しない

HTMLはその表示について絶対的な規定をしていない。 つまり、HTML文書はそれを表示するWebブラウザやプラットホーム環境や表示ウィンドウサイズに応じて、活字の大きさ・種類や表示レイアウトなどWebページの『見た目』は大きく違ってくる。 一方、LaTeXでは使用するコンピュータ環境に依存することなく、印刷結果をLaTeXファイルが絶対的に指定しており、その内容と印刷出力は1対1に対応している。

HTMLは汎用のマークアップ言語であるSGMLに基づいて定められている。 HTML文書は文書の論理構造を伝えるための文書書式であって、元来、文書の仕上がり形態を指定するものではない。 また、Webブラウザの表示能力はHTMLのバージョンをどこまでサポートしているかによって大きく変わってくる。 したがって、Webページを書くときには、特定のWebブラウザの表示形態や機能だけに依存したHTML文書とするべきではない。

HTMLでは文書の論理情報を的確に伝えるために、表示したい文に対して、そのタイトルや文構造などの文書構造をタグを使ってマークアップし、Webブラウザはその情報構造を『反映』させるべく表示に努めるのである。 HTML文書はLaTeXのように出力結果とLaTeXファイルとが1対1に対応することを目的とはしていない。

実際、Webブラウザの種類によってHTMLファイルの表示は微妙に異なり、表示に使用するフォントの種類や大きさもブラウザごとに設定することが可能である。 WWWの成長とともにHTMLの表現力を求める声も高く、HTMLの規格についてもさまざまな提案がある。 HTMLバージョン4.0以降では、文書のレイアウト表現はHTMLでは行わずスタイルシートに任せるという方針をとっている。 スタイルシートを記述する言語としてはW3Cが取りまとめているCSS（直列スタイルシート： Cascading Style Sheets）が広く用いられている。

現在見えている結果は、あくまでも現在利用しているWebブラウザとその設定およびウインドウサイズに依存しており、万人が同じように見えているとは限らない。 情報の的確な提供という観点から、特定のWebブラウザに依存したWebページを書くべきではない。
Webページの作成にあたっては次の2点に留意することが大切である： 以下に、HTMLによる基本的な文書整形表現法を説明する。


目次へ

文の見出し<hn>...<hn>

HTMLでは、文の論理構造を指定するための見出し（Head line）は専用のタグ<hn>...</hn>で表す。 ここでnには6段階の見出しレベル を設定することができ、見出しレベルに応じて見出し文字列のフォントサイズを変化させることが（もしそれが用意されていれば）可能である。 しかし残念ながら、LaTeXにおける\section{...}のように、自動的に見出し番号をつける機能は現在のHTMLにはない。

見出しの指定は、一組のタグ<hレベル>と</hレベル>を使って、次のように行なう。 

<hn>この間の見出し文字は  n が小さいほど大きい</hn>

見出しレベルは数字 n = 1,2,3,4,5,6 によって指定する。 最も大きく強調される見出しタグは<h1>と</h1>であり、最も小さく弱い指定が<h6>と<h6>となる。 これらの見出しタグで文字列を挟むと、その前後で文は改行される。

現在使っているWebブラウザでは、次のように表示される。 見え方は、使っているOS、インストールされているフォントやWebブラウザの種類によって異なる。

見出しタグとその表示
HTML記述 表示結果
<h1>これが h1 の大きさです</h1>
目立ちますね。

これが h1 の大きさです

目立ちますね。
<h2>h2 の見出しではこんな感じ</h2>
どんな感じですか。

h2 の見出しではこんな感じ

どんな感じですか。
<h3>これが h3 の見出し</h3>
段々、目立たなくなってきたかな。

これが h3 の見出し

段々、目立たなくなってきたかな。
<h4>h4 の見出しだとこうなります</h4>
細かくなってきたよね。

h4 の見出しだとこうなります

細かくなってきたよね。
<h5>h5 の見出しだよ</h5>
ほとんど使わないよ
h5 の見出しだよ
ほとんど使わないよ
<h6>h6 の見出しなんか使わないよ</h6>
大きさの区別もつかなくなる。
h6 の見出しなんか使わないよ
大きさの区別もつかなくなる。

見出しタグの使い方については、以下の点に注意する：

目次へ

HTML文書の文構造化

HTMLファイルは、LaTeXァイルと同じように、次のように見出しタグを使って文構造を明示するように書く（ただし、適当に文書を分割し互いにリンクしながら）。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<title>ファイルの表題</title>
<meta http-equiv="Content-Type" content="text/html">
<meta name="author" content="Joho Taro">
</head>
<body>
<h1>最初の主見出し</h1>
    .......
<h2>その副見出し</h2>
    .......
<h2>その副見出し</h2>
    .......
    .......

<h1>次の主見出し</h1>
    .......
<h2>その副見出し</h2>
    .......
<h2>その副見出し</h2>
    ......

<h1>最後の主見出し</h1>
    .......
<h2>その副見出し</h2>
   .......
<h2>その副見出し</h2>
    ....
    .......
<address>
.....
</address>
</body>
</html>

目次へ

横線、強制改行と段落

横線、強制改行や段落はHTML文書の基本的な論理的整形法である。

目次へ

横線<hr>

HTMLでは、Webページ内の文と文の間に横線を引くことができる。 横線を引きたい文の切れ目に単独にタグ <hr> をマークするだけ。 たとえば、

HTML記述 表示結果 
次の文の間に横線を入れる。
<hr>
横線の太さも変えることができる。
<hr size="5">
<hr size="10">
ページ幅に対する相対的な長さも指定できる。
<hr width="50%">
<hr width="80%" size="5">
のように横線が入る。
文の間に横線を入れると、横線を挟んだ
行と行の間隔がわずかに広がる。
次の文の間に横線を入れる。
横線の太さも変えることができる。
ページ幅に対する相対的な長さも指定できる。
のように横線が入る。 文の間に横線を入れると、横線を挟んだ行と行の間隔がわずかに広がる。

目次へ

強制改行<br>

しかし、全角空白文字を使ってWebページを整形表現すべきではなく、あくまでも定められたタグだけを使って論理的にページを書くべきである。
HTMLでは、ファイル中で文を改行したり、空白行を挟んだり、半角空白がいくつあったとしても、Webブラウザでページとして見ると連続した文として表示される。 半角空白・タブや改行を無視されるが、全角空白は『空白』として空く。

ページ内の文を強制改行するには、次のように文中の改行したい場所に単独で強制改行タグ <br> をマークする。 LaTeXの \\ に相当する。

HTML記述 
......と、ここまで続いてきた文章を強制改行
します。
<br>
ここからの文章は次の行に表示されます。.....
表示結果 ......と、ここまで続いてきた文章を強制改行します。
ここからの文章は次の行に表示されます。.....

現在使っているWebブラウザの状態や条件（ウィンドウ幅など）に基づいて勝手に強制改行を行なってはいけない。 強制改行タグを使うときには、なぜそこで強制改行しなければならないのかの必然性をよく考えてから使うべきで、強制改行タグは乱用しないこと。

目次へ

段落<p>...</p>

文章の段落ブロックを段落タグを<p>と</p>で挟む。 段落の切れ目の行間にわずかな隙間ができる。 LaTeXでは段落の切れ目とする文の最後の \par に相当する。 ただし、HTMLではスタイルシートで指定しない限りは、新しい段落が始まっても自動的に文字の字下げは行なわれない。 たとえば、次のように書く。

HTML記述 
<p>
Webブラウザはワードラップ機能を持っており、Webブラウザの
ウィンドウサイズを調節したとき、自動的に行を折り返してくれる。
</p>
<p>
HTMLでは、わざわざ特別なタグで指定しない限り改行は行なわれない
ので、この機能は欠かせない。
</p>
....
表示結果

Webブラウザはワードラップ機能を持っており、Webブラウザのウィンドウサイズを調節したとき、 自動的に行を折り返してくれる。

HTMLでは、わざわざ特別なタグで指定しない限り改行は行なわれないので、この機能は欠かせない。

....

目次へ

文の引用 <blockquote>...</blockquote>

<blockquote>と</blockquote>を使って文の表示位置を全体的にやや中心部に寄せて表示することができる。 LaTeXのquotation環境に相当する。 たとえば、次のように使う。

HTML記述 
金太郎の幼年期については、
<blockquote>
まさかりかついで　きんたろう<br>
くまにまたがり　おうまのけいこ
</blockquote>
で始まる石原和三郎氏の有名な唄（明治33年）が貴重な資料
となっている。
表示結果 金太郎の幼年期については、
まさかりかついで　きんたろう
くまにまたがり　おうまのけいこ
で始まる石原和三郎氏の有名な唄（明治33年）が貴重な資料となっている。

目次へ

整形済テキスト <pre>と</pre>

WebブラウザはHTML書式で書かれた文書をタグに従って整形表示する際、Webブラウザは半角空白・タブや改行は無視する。 タグ<pre>...</pre>を使うと、べた書きテキストとしてテキストをそのまま表示（preformatted）することができる。

LaTeXのverbatim環境に相当するが、<pre>と</pre>で挟まれているテキストには次の特徴がある。

<pre>...</pre>を使うに当たって、Webブラウザのウィンドウ幅やワードラップによる混乱などを考慮して、次の注意が必要である。 たとえば、次のように使う。 タグ<pre>と</pre>で挟まれたテキストが改行されていれば、その通りに改行されて表示されることに注意する。

HTML記述 表示結果 
サルとキジの好物は次の表にまとめられています。
<pre>
          ----------------
           家来   |  好物
          ================
           サル   |  <a href="cake.html">饅頭</a>
          ----------------
           キジ   |  <a href="dumpling.html">団子</a>
          ----------------
</pre>
詳しくは遠征計画書を参照のこと。

サルとキジの好物は次の表にまとめられています。
          ----------------
           家来   |  好物
          ================
           サル   |  饅頭
          ----------------
           キジ   |  団子
          ----------------
詳しくは遠征計画書を参照のこと。

このタグの主な用途には次のような場合が考えられる。

目次へ

箇条書

HTML文書には単純箇条書、列挙箇条書 そして 見出し付箇条書の3つの箇条書スタイルがあり、用途に応じて使い分ける。

WWWでは一つのページを長大にせずに、必要ならそこから別の情報にリンクするという情報の提示が方法論的特徴である。 したがって一つのWebぺージ内の文書はできるだけ簡素に表示すべきで、結果的にWebページは箇条書を多用するのである。

目次へ

単純箇条書

単純箇条書(UnOrdered List)とは箇条項目の順番を入れ替えても意味が成立する箇条書で、LaTeXのitemize環境に相当する。 単純箇条書は箇条項目の順番に意味がない場合に用いる。 構文は次の通り。 

<ul>
<li> 最初の箇条項目文</li>
  ....
<li> 最後の箇条項目文</li>
</ul>

HTML文書を記述するときには、半角空白やタブを使った字下げスタイルを利用し、文書構造が見やすいように工夫する。 各箇条項目(List Item)はタグ<li>と</li>で箇条文を挟む。

たいていのWebブラウザでは、各リスト項目を字下げして表示し、項目の前には●などのマークが付く。 このマークのデザインはWebブラウザによって異なる。

箇条項目の順番を変えると何か不都合がある場合には、項目の順番に意味がある。 そのときには次の列挙箇条書にするべきである。

目次へ

列挙箇条書

列挙箇条書(Ordered List)とは箇条項目の順番を入れ替えると意味をなさない箇条書で、LaTeXのenumerate環境に相当する。 列挙箇条書は箇条項目の順番に意味のある場合に用いる。 構文は次の通り。 

<ol>
<li> 最初のリスト項目文</li>
  ....
<li> 最後のリスト項目文</li>
</ol>

たいていのWebブラウザでは、各項目を字下げして表示し、項目の前には項目が登場した順番に従って数字番号が付く。

箇条項目間の順番を変えても不都合が起こらない場合には、項目が登場する順番には意味がなく、そのときには単純箇条書にするべきである。 単純箇条書と列挙箇条書とでは文書の論理的意味が大きく異なるので、両者を厳格に区別することが大切である。

目次へ

見出し付箇条書

見出し付箇条書とは、LaTeXのdescription環境に相当し、定義リスト(Definition List)ともいう。 構文は次の通り。 

<dl>
<dt> 最初の見出し</dt>
<dd> 見出しの説明文</dd>
  ....
<dt> 最後の見出し</dt>
<dd> 見出しの説明文</dd>
</dl>

たいていのWebブラウザでは、見出し部分と説明定義文の行を分け、項目定義文を字下げして表示する。 また、項目定義項目のタグ<dd>とその説明文を省力することも可能。

目次へ

タグのネスティング

HTMLで定められているタグには入れ子にして使えるものがある。 上の三つの箇条書スタイルは互いに入れ子にすることができ、それぞれの項目文として再び箇条書文を書いてネストしても構わない。 ネストされる列挙箇条書きの順序数の型指定についてはLaTeXとの比較を参照のこと。

たとえば、次のように書くことができる。 入れ子にするときには、字下げを使ってHTMLの文構造を明示させるように工夫すると分かりやすい。

HTML記述 
<ul>
<li><a href="map/fortress.html">鬼ヶ島</a>遠征のための食料
    <dl>
    <dt><a href="../food/cake.html">饅頭</a></dt>
        <dd>サルの好物。</dd>
    <dt><a href="../food/dumpling.html">団子</a></dt>
        <dd>キジとイヌの好物。</dd>
    <dt>総分量
        <dd><pre>
          -----------------
            饅頭  |  団子
          -----------------
          たくさん|いっぱい
          -----------------
         </pre></dd>
    </dl></li>
<li>遠征経路
    <ol>
    <li>あるところ村から<a href="map/sarutokoro.html">さるところ村</a>
        まで徒歩20里
        <ol>
        <li><a href="map/pass.html">一服峠</a>と
            <a href="map/morokosi.html">モロコシ里</a>までの3里は篭</li>
        <li><a href="map/sawa.html">カニ沢川</a>では馬による徒渉</li>
        </ol></li>
   <li>さるところ岬から<a href="map/island.html">鬼ヶ島</a>まで
      手こぎ船5里</li>
   </ol></li>
<li>支援組織
   <ul>
   <li><a href="../../work/kintaro.html">金太郎財団</a></li>
   <li><a href="adventure.html">サルかに大学探検部</a></li>
   </ul></li>
</ul>
表示結果
  • 鬼ヶ島遠征のための食料
    饅頭
    サルの好物。
    団子
    キジとイヌの好物。
    総分量 
              -----------------
            饅頭  |  団子
          -----------------
          たくさん|いっぱい
          -----------------
  • 遠征経路
    1. あるところ村からさるところ村まで徒歩20里
      1. 一服峠と モロコシ里までの3里は篭
      2. カニ沢川では馬による徒渉
    2. さるところ岬から鬼ヶ島 まで手こぎ船5里
  • 支援組織
    • 金太郎財団
    • サルかに大学探検部

箇条書スタイルに関して以下の注意をしておく。

目次へ

HTMLの特殊記号

HTMLで特別な意味を持つメタキャラクタは次の表にある4文字で、これらはタグに使われている。 これらのメタキャラクタを半角文字としてWebブラウザで表示するためには表のようにエスケープコードを使って書く。

HTMLの特殊文字の例
意味 メタ文字 記法
less than < &lt;
greater than > &gt;
アンパサント & &amp;
2重引用符 " &quot;
空白文字   &quot;

これらの特殊文字を使うときには、次の点に注意する。

ヨーロッパ系言語で使用する特殊文字を表示するために、拡張された8ビットASCII文字セットとして ISO-Latin-1(ISO-8859-1)が用意されている。 一方、日本語を表示できるWebブラウザは、2バイトの日本語文字として ISO-2022-JP(JIS)、UJIS(EUC)あるいはMS漢字コード(Shift JIS)のどれかを使う。 このために漢字を表示するWebブラウザでは、ISO-Latin-1の文字コードと抵触する状況が生じる結果、ISO-Latin-1の文字を正しく表示することができなくなる場合がある。

目次へ

アドレスタグ

Webページのクレジット指定を明記するためにアドレスタグが用意されている。 タグの組<address>と</address>の間にクレジットに関する記述を行う。 アドレスタグはHTMLでは何の働きもしない。 ただ、この部分にページ作者の署名などを記載するように期待されているだけである。

Webページの最後に、たとえばページの最後にタグ<hr>を使って横線を引いてから、アドレスタグを使って以下の項目についての記載をするとよい。

などを、たとえば次のように記入する。 

......
<hr>
<address>
情報太郎<br>
東京情報大学 情報システム学科<br>
このページへリンクされる場合は
<a href="mailto:s01987tj@edu.tuis.ac.jp">s01987tj@edu.tuis.ac.jp</a>
まで連絡お願いいたします。<br>
Last revised on 1st April 2001<br>
&copy; Joho Trao 2001 All Rights Reserved
</address>

Webページはインターネットを利用した世界に向けての電子出版であると考えることができる。 利用者が作成するすべてのWebページには、ページの作者（あるいは電子メールアドレス）や著作権表示、必要なら文書の取り扱いの注意などを記入すべきである。 強制されているわけではないが、ホームページの内容に関する取り扱いをめぐって多くの問題が予想される現在、このような措置は必要である。

目次へ

文のグループ化 <div>...</div>

1つ以上の段落などからなる文のまとまり・区分（division）を表すには<div>と</div>を使う。 div要素にclassやid属性を与えて、そのグループがどんな役割を持つかを示す。 スタイルシートで視覚的表現を設定することもできる。

<div>..</div>ブロックの前後で文章は改行される。 文をまとめてオプションalt属性によって位置を指定することもできる： 

<div align="位置">
文
<div>

たとえば、次のように利用する。

HTML記述 
<div align="left">
指定した範囲をまとめて<br>
位置を左寄せに指定する
</div>
<div align="center">
指定した範囲をまとめて<br>
位置を中央に指定する
</div>
<div align="right">
指定した範囲をまとめて<br>
位置を右寄せに指定する
</div>
表示結果
指定した範囲をまとめて
位置を左寄せに指定する
指定した範囲をまとめて
位置を中央に指定する
指定した範囲をまとめて
位置を右寄せに指定する

目次へ

汎用タグ <span>...</span>

<span>自身は特に何の意味も持たないタグである。 クラス属性を指定して<span class="クラス名">...</span>ブロックで囲まれた部分に、独自の論理的意味をもたせたり、あるいは スタイルシートを定義して視覚的表現を設定することに使われることがある。

同様なタグに<div>があるが、<div>は文章ブロック要素で前後に改行がはいるが、<span>ブロックははインライン要素で前後に改行が入らない。

Webページの作成目次
オンラインテキスト目次

mizutani@rsch.tuis.ac.jp