段落の整形

センタリング

一般のワープロと同様で、ブラウザでもブロック内の配置は左寄せになっています。H1やH2だけでなく、Pタグの中もセンタリングできますが、何行にもわたる段落で最後の行がセンタリングになっているのもおかしいので、Pタグにはあまり使われません。

ここでは、H1をセンタリング、H2を右寄せにしてみます。もちろん見出しを右寄せにすることはあまりしないことです。

<HEAD>
<TITLE>情報処理のこと</TITLE>
<STYLE type="text/css">

<!--
 H1 {
   color :#660066;
   text-align:center;
 }
 H2 {
   color :#003399;
   background-color:#ffff66;
   text-align:right;
 }
 P  {
   color:#009999;
   margin: 0.5em 1em 0.5em 2em;
 }
 BODY {background-color:#fffff8;}
-->
</STYLE>
</HEAD>

元のページは
mergin+センタリング+右寄せ

一文字下げるインデント

日本語では段落の始めは一字分下げるのが習慣です。インデントといいます。これはPタグに text-indent を指定することで実現できます。行頭に全角スペースを入れればよいといえば、それもそうですが。

ワープロでは、行の途中で改行すれば、次の行から新しい段落(国語的には形式段落でしょうか)が始まりますが、html では、いままでの段落を</p>で終わらせ、<p>で新たな段落を始めます。エディタ内で改行しても無視されますから注意が必要です。

このようなインデントに指定にしたい場合は、次のように指定します。1em は1文字分下げるということです。もちろん 2em にすれば2文字分さがります。

text-indent:1em;

一文字出すインデント

◎逆にこのように一文字前に出すインデントもできます。日本語でただこれをしただけでは不恰好ですが、頭に◎や☆をつけると段落を目立たせることができます。

◎教科書はだいたいこのようにしてあります。このようなインデントに指定にしたい場合は、次のように指定します。

text-indent:-1em;

◎教科書では、◎や☆の代わりに●を使い、色を付ける方法を併用しています。

行間隔の指定

ここの段落は、わざと行間隔を狭くしてあるのですが、ブラウザの種類によってはなにもしなくても、行間隔が狭く感じられることがあります。これは英字に比べて日本語の文字が幅をとるのに、そのことの考慮がないためです。

そこで行間隔を広げるのは、以下のようにします。指定しないときの値は100%から120%あたり(インターネットエクスプローラ5.1で 112.4%強)になっていることが多いようです。%を使う時の基準は文字の高さが100%です。

line-height: 150%;

ただ、この指定は、画像と併用したり、古いブラウザだったりすると表示が乱れるので注意が必要です。文字だけの段落に限って使用するほうがいいでいょう。


聖愛高等学校
http://www.seiai.ed.jp/