CSSの基本(11)

蛍光ペン効果を指定する方法

紙に蛍光ペンでマーキングするように、
ホームページ上の文章の強調点に蛍光ペン効果を出します。


黄色の蛍光ペン効果 ⇒ background-coror: #ffff00; padding: 0.1em opx;
緑色の蛍光ペン効果 ⇒ background-coror: #00ff00; padding: 0.1em opx;
青色の蛍光ペン効果 ⇒ background-coror: #00ffff; padding: 0.1em opx;
赤色の蛍光ペン効果 ⇒ background-coror: #ff00ff;
padding: 0.1em opx;

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

p {
line-height: 1.5;  
            /* 蛍光ペンが上下の文字に掛からない様に行間を広げます*/
font-size:16px;
font-family:serif;
}
span.pen1{                
/* 1色目の蛍光ペンの指定 */
background-color: #ffff00;      
/* 蛍光ペンの色を指定 */
padding: 0.1em 0px;          
/* 蛍光ペンの太さを指定(上下=0.1em 左右=0px)*/
}
span.pen2{                
/* 2色目の蛍光ペンの指定 */
background-color: #00ff00;     
/* 蛍光ペンの色を指定 */
padding: 0.1em 0px;          
/* 蛍光ペンの太さを指定(上下=0.1em 左右=0px)*/
}

-->
</style>

</HEAD>
<body>

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

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

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

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

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


</body>
</HTML>


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