Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

 文章の行間を整える

通常ホームページに入力した文字の行間などは、ワープロソフト等と違い、任意の間隔で変更することはできません。しかし、スタイルシートwp利用すると行間隔を調整することができます。ここでは、ホームページの文章を読みやすくするために行間隔を広く表示する方法を考えてみましょう。

■ 文字と行間の設定

HTMLのヘッダーで、文字の設定と行間を指定する属性を定義します。

<STYLE TYPE = "text/css">
<!--
.text1 {
font-size:12pt;color:#000000; line-height:150%
}
//-->
</STYLE>

例では、行間を広くするために「line-height」(行間隔)に150%を指定しています。
■ 行間を設定するための文章の定義

上で設定した文字と行間の設定「text1」を、表示する文章に定義します。

<DIV CLASS="text1">  堺の古墳といえば仁徳陵古墳を思い浮かべる方がほとんどだと思います。この古墳は百舌鳥の地に1基だけが造られているのではなく、4km四方の地域に100基以上の古墳が集まって築かれていました。この古墳の集まりを百舌鳥古墳群と呼びます。古墳群は、古墳の造営がはじまって100年程経った、古墳築造の最盛期である古墳時代中期を代表する古墳群で、日本の巨大古墳を象徴する古墳群でもあります。<br>
 百舌鳥古墳群の造営が終ってしばらくのあいだ、堺市域での古墳の造営は少なくなります。6世紀の中頃から再び盛んに古墳が造られるようになります。後期群集墳の造営の開始です。この時は、巨大な古墳を造るのではなく、20m前後の小形の古墳を何百基も密集して造ります。つまり数の上での最盛期と呼ぶべきものです。堺市域での後期群集墳の代表が陶器千塚古墳群です。この古墳群は日本最大の須恵器生産遺跡である陶邑中核部の陶器の地にあり、須恵器生産に携わった工人の首長の墓と考えられています。<br>
 企画展では、堺市域で今までに調査された中期を代表する百舌鳥古墳群と、後期群集墳の陶器千塚古墳群の出土品を中心に展示し堺の古墳を紹介します。</DIV>

■ 「line-height」属性

スタイルシートを利用すると「line-height」属性によって文章の行の高さを指定することができます。このとき「line-height=100%」で行間隔なしの設定になります。上の例では150%を指定しているので、フォントサイズの50%(半分)の大きさが次行との間隔として設定され、行間を広げることができています。そのため、100%より小さい値を指定すると、行が重なってしまうので注意が必要です。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box