文章の体裁を整える その1

文章の見た目をよくする代表的なタグを示していきます。実際に使ってみてください。

<p> 〜 </p> 段落を指定するタグ

小説のような長い文章の場合<br>タグでいちいち区切るのは面倒なので、<p>〜</p>の間を一つの段落と指定し、段落の終了で改行するという機能を持つタグです。

<nobr> 〜 </nobr> 改行させないタグ

通常ブラウザの両端に達すると自動的に改行されますが、絶対に改行させたくない文章があるときにはこのタグで指定します。

<pre> 〜 </pre> エディタで入力した形で改行するタグ

エディタ通りに改行させたい場合このタグを用います。<br>タグの代用です。

<blockquote> 〜 </blockquote> 文章を引用するタグ

文章を引用するタグということですが、実際には横に一段下げて文章を書きたいときによく使います。

<h1> 〜 </h1> 表題を示すタグ

このタグで囲まれた部分は「題名」として表示されます。<h1>の1は1〜6に変更でき、文字の大きさを指定できます。<h1>が最も大きく<h6>が最も小さくなります。フォントタグと似た機能を持っていますが、数字と文字の大きさの関係が全く逆順になっています。なお、このタグの後強制的に改行されるので<font>タグと違い文章の途中では使えません。align属性をつけることで右(right)・中央(center)・左(left)に設置することも出来ます。<h2 align="right"> 〜 </h2>とすると、文字が右側に寄ります。

<div align="center"> 〜 </div> コンテンツの配置を決定するタグ

<div> 〜 </div>で囲まれた部分を左寄り(left)、中央配置(center)、右より(right)に出来ます。

HTMLでは残念ながら、左から何センチにしたいという微妙な調整は不可能で、中央・左・右のみでデザインを決定していきます。<div>タグで</div>を書き忘れると文字化けを引き起こしやすいので絶対に閉じ忘れしないようにしてください。

<hr size="" width="" align=""> 横線を加える

横罫線を加えます。属性として「横幅"width"」と「太さ"size"」も指定できます。

コラム %指定とピクセル指定について

ホームページを見る人の環境によってホームページの見え方は全然異なります。たとえば、ブラウザを画面最大にして見る人もいれば、画面の1/4の大きさにして見る人もいます。ピクセル指定でwidth=500として画面半分くらいの横線を書いたつもりでも、ブラウザの大きさによっては画面全体の幅の横線になってしまったりします。%指定とピクセル指定どちらがよいとも言えないのですが、時にはブラウザの大きさを変えて見たりして、誰が見てもデザインのいいホームページを目指しましょう。widthなどの属性は設定しなくてもOKですが、ブラウザによって初期値が異なることもあります。そのため、ブラウザによってデザインが異なることもあるので、出来るだけ属性を加えておくことをおすすめします。