CSSの基本(13)

文字の間隔を指定する方法

見出しやタイトル文字など、文字と文字の間隔を広げる方法です。
文字のサイズを変えずに、字間を調節します。

文字間隔を指定 ⇒ letter-spacing: **em;

<HTML>
<HEAD>
<style type="text/css">
<!--
h1 {
font-size:42px;
color:#993333;
font-family:sans-serif;

letter-spacing:0.7em;          
/* <h1> の文字と文字の間隔を0.7文字分空ける */
}
h2 {
font-size:20px;
color:#000099;
font-family:sans-serif;

letter-spacing:0.5em;          /* <h2>文字と文字の間隔を0.5文字分空ける */
}
p {
line-height: 1.5;  
       
font-size:16px;
font-family:serif;
}

strong.doubleline{           
border-bottom:double 3px red;
}
span.dotline{
border-bottom:dotted 2px blue;
}

--></style>
</HEAD>
<body>
<h1>紙の豆知識</h1>
<h2>
A判とB判</h2>

<p><strong class="doubleline">A判というサイズはドイツで生まれた、
工業規格で現在は国際規格。</strong>
<span class="dotline">B判は日本独自の規格で,
江戸時代の公用紙「美濃紙」のサイズに由来するもの。</span>
日本のお役所の書類にB判が多いのはそのせいとか。
書道で使う「半紙」は美濃紙を半分にしたものということからそう呼ばれるようになりました。</p>

<h2>紙のタテ・ヨコの比率のヒミツ。</h2>

<P><strong class="doubleline">A3の紙を半分に折るとA4に、</strong>
<span class="dotline">A4の紙をまた半分に折るとA5に</span>成ります.
B判でも何度折っても紙は相似形のまま半分の面積に、此れは紙の縦と横の比率が1:√2になっているから。
次々に半分に折っていっても、縦・横の比率が変わらず、紙に無駄が出ないようになっています。</P>

<h2>中性紙は保存性が高い。</h2>

<P>紙にはインクのにじみ防止のためにサイズ剤が使われています、
その時に使われる定着剤、<strong class="doubleline">硫酸バンドにより紙が酸性化。</strong>
長い年月の間に繊維か劣化し紙はボロボロになってしまいます。
一方<span class="dotline">中性紙は中性サイズ剤を使用しているので、繊維が酸性化せず</span>
良い状態で長期保存できます。</P>

</body>
</HTML>


(画面クリックでWEB上のサイズを見てください。)