HTML初歩の初歩

〜その3〜
見出し、整形、引用

見出し

前節までは、フォントの大きさと色の変化によって、見出しを付ける仕組みを説明しました。本来の見出しとしては <h*>〜</h*> というタグがあります。

<h1>〜</h1>では次のようになります

Internet Explorer 5.5 以降で大見出しに影が付いて見えるのは、このシリーズに共通のスタイルシート(後述)が適用されているからです。他のブラウザではこの指定は無視されるだけで弊害はありません。

こんな大きな見出しになります

<h2>〜</h2>ではこうなります

こんな大きさです

ご覧のように前後が改行され太字になります。少し考えれば当然の事ですが、<h4>が先に来て<h1>が後に来るのは好ましくありません。注意すべきは<h*>が、単にフォントの大きさを変えるだけのものではなく「見出し」を付けるものだという事です。

またここで表示されているフォントの大きさは、私のサイト全体で統一されたスタイルシートの指示する大きさになっています。特別な指示が無い場合には、<h1>〜</h1>では上記より大きく、<h6>〜</h6>はより小さくなりますし、その中間の各タグによる見出しは段階的に大きさを変えられています。

しかし繰り返しますが<h*>は単にフォントの大きさを変化させるタグではなく、文章の見出しを「論理的に」付けるものなのです。その大きさはスタイルシートによって、いくらでも変えられます。こんな事は無意味ですが、<h1>〜</h1> の方が <h6>〜</h6> より小さいという指示もスタイルシートで決められます。[スタイルシートについては後述]

中央寄せ(センタリング)

上の見本はセンタリングされています。これもテキストの整形に良く用いられます。

単純に<center>〜</center>で囲むのは好ましくはないとされ、<div align="center">を使うか、スタイルシート(後述)を使うように勧められています。とりあえずは、

<p align="center"> divに挟まれるのはブロック要素です。 </p>

divは複数のブロック要素をまとめて指定するためのものですから、<div align="center">〜</div>を一連の文章の前後に付けるのは誤りです。正しくは<div align="center"><p>〜</p><p>〜</p></div>といった風に使います。しかし「見栄え」に関わるものは、スタイルシートでの適用がより好ましい事を知っておきましょう。

整形・引用

    いろいろな制約なしに、     とにかく入力した通りに表示させたい場合は、
    <pre>〜</pre>で囲みます。
        その範囲内では改行や
      空白         がテキスト通りで表示されフォントは等幅になります。

<blockquote>〜</blockquote> では、引用文を段落を変えて表示させます。

上下に1行分の空白が入り、左右にも1文字分の空白が開きます。テキストを上付き文字を書きたければ <sup> を、下付き文字は <sub> とします。引用文献名は <cite> で書くとこうなります。

<head>に書くもの

<head>〜</head>には、序文のようなものを書くと言ったが、<title>〜</title> 以外に何を書くのでしょうか。

先ず書き添えるべきなのは、
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
最後の部分は"x-sjis" としても良いが、これによっていわゆる「文字化け」が起きないようになります。

"Shift_JIS" の方が正式のようですが、ブラウザーによっては x-sjis の方を好むものもあるそうで、この辺は悩みどころです。

詳しくは <head> ;内に書くべきもののまとめをご覧下さい。

大事な事=書き出しの空白(インデント)

HTML では理科系の人がページを作ると、行冒頭に空白を置いていないものがほとんどです(少なくとも以下に述べるような簡単な指定をしていないページのなんと多い事か)。これが気になるのは当然の事ですし、気にならない方が「絶対におかしい」のです。

これには &nbsp; という正に呪文のような文字列を打つのが一つの解決法です。&nbsp; は空白文字を表します。ネットスケープでは(つまりインターネット・エクスプローラーには対応していない)独自のタグとして <spacer type> という命令があるそうですが、少なくとも私は打ったことがありません。

&nbsp;はキーワードによってコンピューターに指令する方法で、良く使われるASCIIによる表記では、&#160;となり、結果は同じです。どちらか覚えやすい方を使えば良いでしょう。ただし使ってみれば分かるように、3つか4つ続けて使わないと効果がはっきり分かりません。

もう少しスマートな方法は、とにかく文章を <p> で囲ってやって、indent をスタイルシートで指定してやる事です。(後述)


ここまでで、1ページの文章は書けるはずです。しかしWeb-Siteといえば、リンクによるジャンプが華ですね。それは次回です。


第1回  第2回  第4回  第5回  第6回  第7回  第8回  第9回  第10回  詳細目次  ページ冒頭



saiton.net/easy/html3.htm

©SAITO Toshiyuki