文字とテキストのスタイル

1.文字の大きさ(サイズ)

指定方法 { font-size : (フォントサイズ) ;  }


div#menu  { font-size : 30px ; }
.f-size   { font-size : 60% ; }


・・・ 略 ・・・


<div id="menu">CSSの基礎知識</div>
<p>スタイルシートは、<span class="f-size">ウェブページのデザイン</span>を定義、記述するための・・・</p>

CSSの基礎知識

スタイルシートは、ウェブページのデザインを定義、記述するための・・・



 ◇フォントサイズで使用する主な単位

px(ピクセル)
解像度の単位(ドット)
%(パーセント)
標準サイズに対する百分率
em(エム)
1emはその時点における標準的な文字サイズ



2.文字のスタイル(太字、イタリック)

太字  { font-weight : bold ; }   ←→  標準字体 { font-weight : normal ; }  

イタリック { font-style : italic ; }  ←→  標準字体 { font-style : normal ; }


.f-bold   { font-weight : bold ; }
.f-italic   { font-style : italic ; }


・・・ 略 ・・・


<span class="f-bold">スタイルシート</span>は、ウェブページのデザインを<span class="f-italic">定義、記述するための</span> ・・・

スタイルシート
は、ウェブページのデザインを定義、記述するための・・・




3.テキストのスタイル(行送り、配置)

行送り { line-height : (行の高さ)  ;  }
配置  { text-align : (キーワード)  ;  }   


.line-h   { line-height : 150% ; }
h4  { text-align : center  ; }


・・・ 略 ・・・


<h4>CSSの基礎知識(センタリング)</h4>
<p>この段落は、行間隔を設定していません。・・・スタイルシートは、ウェブページのデザインを定義、記述するための・・・</p>
<p class="line-h">この段落は行間隔を少し広げています。・・・スタイルシートは、ウェブページのデザインを定義、記述するための・・・</p>

CSSの基礎知識(センタリング)

この段落は、行間隔を設定していません。・・・スタイルシートは、ウェブページのデザインを定義、記述するための・・・

この段落は、行間隔を少し広げています。・・・スタイルシートは、ウェブページのデザインを定義、記述するための・・・


 ◇行送り(line-height)で指定する「行の高さ」 (フォントサイズと同じ単位を使う)

px(ピクセル)
解像度の単位(ドット)
%(パーセント)
標準サイズに対する百分率
em(エム)
1emはその時点における標準的な文字サイズ

 ◇配置(text-align)で指定するキーワード

left
左揃え
right
右揃え
center
センタリング



4.テキストの装飾(影・ぼかしなど)

指定方法 { text-shadow : (影の色 右の距離 下の距離 ぼかし距離)  ;  }


#bokasi   {  text-shadow : black 0px 0px 5px ; font-size : 200%  ; }
#kage  {  text-shadow : darkgray 3px 3px 0px ; font-size : 160%  ; }


・・・ 略 ・・・


<div id="bokasi" >見出しに黒いぼかしを入れます</div>
<div id="kage">テキストにグレーの影をつけます</div>

見出しに黒いぼかしを入れます

テキストにグレーの影をつけます



5.テキストの装飾(下線、取消線など)

指定方法 { text-decoration : (キーワード)  ;  }


.kasen  { text-decoration : underline ; }
.torikesi  { text-decoration : line-through ; }


・・・ 略 ・・・


<h4 class="kasen" >CSSの基礎知識(下線)</h4>
<p>テキストの装飾で、<span class="torikesi">取消線</span>を使用します</p>

CSSの基礎知識(下線)

テキストの装飾で、取消線を使用します


 ◇テキストの装飾で指定するキーワード

none
何も装飾を付けない
underline
下線
overline
オーバーライン
line-through
取消線