HTMLの文字レイアウト
普通のホームページを作る場合であろうが、Perl/CGIプログラムで何らかのページをインターネットエクスプローラなどのブラウザに出力させる場合であろうが、HTMLを使わないことには始まらないというお話を前回しました。
今回はもう少し突っ込んだ話で、実際に文字を表示させるとき使用するHTMLタグについての説明です。
今回説明するHTMLタグがわかっていれば、簡単なHTMLページの文字レイアウト（配置）を自由に指定できるようになります。
HTMLが難しいと思っている人たちの中には、自由に文字レイアウトができないことを理由にしている人が多いです。
普通のワープロソフトであれば、文字に改行を入れようと思ったら、「Enterキー」を一発押すだけで完了します。
空白を入れようと思ったら、「Spaceキー」を空白を入れたいだけ押せば、好きなだけ空白ができるわけです。
文字の右寄せ左寄せ、センタリング（中央表示）と思いのままです。
でもそれはワープロソフトだけの話で、HTMLでそれらを実現しようと思ったら、それぞれの機能をもったHTMLタグを知ってなくてはいけません。
はっきり言って、そこが面倒なんですよね～（笑）。
ですので、このページでも最低限の文字レイアウトHTMLタグしか説明しません。
HTML改行タグ
HTML改行タグを使用すると、HTMLで表示させた文字を指定の位置で改行させることができます。
あなたが普通にワープロソフトを使って文章を打ち込む際、適当に改行をはさみますよね。
でも、HTMLの場合だと、メモ帳などのテキストエディターで普通に改行を入れても、インターネットエクスプローラなどのブラウザでは「改行」を認識してくれません。
そこで、改行を入れたいところに「<br>」というHTMLタグを入れます。
このタグには、終了タグはありません。
この改行タグというのは、文章を読みやすくするために入れるもので、必ず入れなくてはいけないものではないです。
もし文字がダラダラ長くなってしまった場合は、改行タグを使用しなくても、ブラウザソフトの右端や、あらかじめ設定してあるデザインの右端で、自動的に折り返してくれます。
だらだら横に長くなってしまって、横スクロールしないと全文読めなくなるわけではないです。
では実際に、改行タグを試してみましょう。
<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>改行タグテスト</title>
</head>
<body>
改行タグを使って<br>
文章を読みやすくしましょう。<br>
</body>
</html>
この「<br>」タグを何度もいれると、その入れた分だけ改行されて余白ができます。
でも、本来 このタグはそういう使い方をするものではないので、ホームページのレイアウトだけのために多用するのは止めたほうがいいです。
たとえみばえのよいページができたとしても、検索エンジンが巡回したときに、改行タグばかりになって、あまりよい効果があるとはいえません。
どうしても一行ごとにある程度余白をはさみたい場合は、この後説明する段落タグや、スタイルシートというHTMLのデザインを指定できるファイルで指定するのが賢いです。
HTMLの段落タグ
次に、見た目的には改行と同じ作用を持っている段落タグについて説明します。
段落を現すHTMLタグは、「<p>」と「</p>」を使用して表します。
段落部分を、「<p>」と「</p>」ではさみます。
文章と、文章をわけるときなどに使います。
ただこの「段落」という言葉で表現してしまうと、文章の一まとまりをさしているように感じてしまいますが、ホームページ作成ソフトなどでは、一行ごとにこの「<p>」と「</p>」ではさむものもあります。
一般的なブラウザであれば、この「<p>」から「</p>」で囲まれた部分の前に改行されて、さらに、余白が入ります。
<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>段落タグテスト</title>
</head>
<body>
<p>段落タグを使って</p>
<p>文章を読みやすくしましょう。</p>
</body>
</html>
余白のスペースを細かく指定したい場合は、スタイルシートを使用するとよいでしょう。
段落タグの終了タグ「</p>」は、省略することができますが、省略しないのが一般的な使い方です。
段落タグも、先ほど説明した改行タグと同じように、「<p>」と「</p>」を何度もいれることで、余白を作ることができますが、その方法はあまり美しくないです（笑）。
HTMLの見出しタグ
次は、HTMLタグの中では結構重要な見出しタグについて説明します。
見出しタグは、そのページのテーマを完結に表した文章が入るタグなので、SEO（検索エンジン最適化）をする上でも、重要なタグの一つです。
ようは、使うとお得ということですね（笑）。
でも、乱雑に使用すると、検索エンジンスパムという悪質な方法だという扱いを受けてしまうので、注意です。
通常の文章でも、大見出し、中見出し、小見出しなどとあるように、見出しタグにも、１から６まで見出しレベルを指定することができます。
見出しレベル1「<h1>」「</h1>」。
見出しレベル2「<h2>」「</h2>」。
見出しレベル3「<h3>」「</h3>」。
見出しレベル4「<h4>」「</h4>」。
見出しレベル5「<h5>」「</h5>」。
見出しレベル6「<h6>」「</h6>」。
見出しタグを使うと、文字は太字になり、その前後に適度な空白が入ります。
一般的なブラウザであれば、指定する数字の小さい方が、文字が大きくなり、数字が大きくなると文字が小さく表示されます。
つまり見出しレベル１が最も大きく表示され、見出しレベル６が小さく表示されるということです。
フォントサイズ（文字のサイズ）の場合と逆になるので、間違わないようにしてください。
<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>見出しタグテスト</title>
</head>
<body>
<h1>見出し1</h1>
ほにゃらら…。
<h2>見出し2</h2>
ほにゃらら…。
<h3>見出し3</h3>
ほにゃらら…。
<h4>見出し4</h4>
ほにゃらら…。
<h5>見出し5</h5>
ほにゃらら…。
<h6>見出し6</h6>
ほにゃらら…。
</body>
</html>
この見出しタグも、文字の大きさや配置場所など、スタイルシートでまとめて指定するのが理想です。
見出しタグを使いこなすためのコツとしては、新聞と同じように見出しだけを読んでいったときに、そのページの全体がなんとなくわかるようにするとよいです。
<戻る>
HTMLの文字強調タグ
次にHTMLで表示する文字をピンポイントで強調させる方法についてお話します。
文字をピンポイントで強調させるためには、その文字を太字にしたり斜体にしたりなどして、他の文字と区別して表示させればよいわけです。
ここでは、文字の一部を「太字」や「斜体」にするためのHTMLタグについて説明します。
ワープロなどでは、「ボールド」とか「イタリック」などという言葉が使用されている場合があります。
むしろ、こちらの言葉のほうが、聞き覚えがあるかもしれませんね。
HTMLタグでも、「ボールド」と「イタリック」それぞれの頭文字をとって、HTMLタグに使用されていると考えたほうが、覚えやすくなります。
ボールド（太字）を表すためのHTMLタグは、「<b>」「</b>」です。
イタリック（斜体）を表すためのHTMLタグは、「<i>」「</i>」です。
これら強調タグは、本来なら、文章の特定の部分だけ「太字」や「斜体」にすることで、その文字を強調するという意味で利用するのですが、これら二つのHTMLタグには、注意が必要だという意見があります。
なぜかというと、この「<b>」も「<i>」も文字のスタイルを指定しているだけと考えられているからです。
どういうことかというと、普通にあなたのホームページを読んでくれている人のみに、アピールするだけでしたらこれでもよいのですが、SEO（検索エンジン最適化）という面から考えた場合、文字のスタイルだけの指定では若干弱くなるというのです。
本当かどうかは知りませんが（笑）。
だったら、人間にも、検索エンジンにも、キーワードとなる文字を強調するHTMLタグを使用すればいいだけですよね。
文字を強調させるために使用するHTMLタグには、以下のものがあります。
文字を太字で強調させるためのHTMLタグには、「<strong>」「</strong>」があります。
文字を斜体で強調させるためのHTMLタグには、「<em>」「</em>」があります。
でもですね、これは、人によって解釈が異なるわけですよ～。
「<em>は強調」で、「<strong>はさらに強調」だと言っている人もいます。
みなさん言いたいほうだいです（笑）。
こんな感じで使用します。
<html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<title>強調タグテスト</title>
</head>
<body>
<p>
文字を<b>太字</b>にしました。<br>
文字を<i>斜体</i>にしました。
</p>
<p>
文字を<em>強調</em>しました。<br>
文字を<strong>より強く強調</strong>しました。
</p>
</body>
</html>
一般的なブラウザでは、「<strong>は太字に」「<em>は斜体」で表示されます。
とりあえずこれが事実です。
HTMLの文字配置タグ
最後に、文字の位置を、中央・左・右に指定する方法について説明します。
前述した「改行」「段落」「見出し」などのHTMLタグは、それぞれ単独でも機能する要素でした。
しかし、今回説明する「左揃え」「中央揃え」「右揃え」は、それぞれの要素に付く属性にあたります。
「何のこっちゃ？」だと思うので、ちょい説明します。
ようするに…。
見出しを左そろえにするには、見出しタグに左寄せタグを付加するわけです。
段落を中央揃えにするには、段落タグに中央そろえのタグを付加するわけです。
ひとまとめにした要素を右揃えにするには、後述するひとまとめにするタグでひとまとめにしつつ、右そろえタグを付加するわけです。
イメージとしてはこんな感じです。
実践が一番ですから、HTMLタグで説明します。
まずは、見出しの位置の指定です。
見出しのHTMLタグ「<h>」の要素に、「align」または「aligen」の属性をつけて、見出しの位置を指定します。
<h1 align="left">見出し左寄せ</h1>
<h2 align="center">見出し中央</h2>
<h3 align="right">見出し右寄せ</h3>
次に、段落の位置を指定するHTMLタグです。
段落のHTMLタグ「<p>」の要素に、「align」または「aligen」の属性をつけて、段落の位置を指定します。
<p align="left">段落を左揃えにしています</p>
<p align="center">段落を中央揃えにしています</p>
<p align="right">段落を右揃えにしています</p>
最後に、文章などをひとまとめにして、位置を指定するHTMLタグについて説明します。
まず、文章などをまとめて扱いたいときは、「<div>」「</div>」というタグを使用します。
「<div>」から「</div>」で、囲むことで、その範囲をひとまとめにできます。
この「<div>」の要素に「aligen」または「align」の属性を付けることで、まとめて位置を指定することができます。
<div align="left"><p>文章を左にまとめています</p></div>
<div align="center"><p>文章を中央にまとめています</p></div>
<div align="right"><p>文章を右にまとめています</p></div>
こんな感じで使用しますが、これもそれぞれスタイルシートでまとめて指定することができるので、スタイルシートを使うのが理想です。
<戻る>