段落の整形

センタリング

一般のワープロと同様で、ブラウザでもブロック内の配置は左寄せになっています。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>

css 適用の効果をイメージ図で表します。下のボタンを押してください。

配置設定なし  配置設定あり 

説明図

下のリンクはそれぞれのページにリンクしています。ここに戻るときはブラウザの「もどる」ボタンを使ってください

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

一文字下げるインデント

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

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

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

text-indent:1em;

一文字出すインデント

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

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

text-indent:-1em;

行間隔の指定

日本語の場合、行間隔が狭く感じられる傾向にあります。これは英字に比べて日本語の文字が幅(高さ)をとるためです。これはブラウザの初期設定の問題なので将来は書かれている言語により行間を調整するようになるかも知れません。ここの段落は、わざと行間隔を狭くしてあります。

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

line-height: 150%;

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


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