CSSの基本(12)

文章に下線を付ける指定方法

枠線の機能を利用して、文章に二重線の下線や、点線の下線を付けて、
文章の中で特定の文字を強調することが出来ます。


赤色二重線の下線 ⇒ border-bottom: double 3px red
青色点線の下線   ⇒ border-bottom: dotted 2px blue

<HTML>
<HEAD>
<style type="text/css">
<!--

p {
line-height: 1.5;  
              /* 下線が下の文字に掛からない様に行間を広げます*/
font-size:16px;
font-family:serif;
}

strong.doubleline{              /* <p>の中で<strong=class> の所にCSSを適用する */
border-bottom:double 3px red;    
/* 下線を、二重線・3ピクセル・赤色で引く */
}
span.dotline{                
/* <p>の中で<span=class>の所にCSSを適用する */
border-bottom:dotted 2px blue;   
/* 下線を、点線・2ピクセル・青色で引く */
}

--></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上のサイズを見てください。)