文字とテキストのスタイル
１．文字の大きさ（サイズ）
指定方法 ｛ font-size : （フォントサイズ） ; }
div#menu {
font-size : 30px ; }
.f-size {
font-size : 150% ;
}
・・・ 略 ・・・
<
div id="menu">CSSの基礎知識<
/div>
<p>スタイルシートは、
<span class="f-size">ウェブページのデザイン<
/span>を定義、記述するための・・・</p>
↓
CSSの基礎知識
スタイルシートは、ウェブページのデザインを定義、記述するための・・・
◇フォントサイズで使用する主な単位
- px（ピクセル）
- 解像度の単位（ドット）
- %（パーセント）
- 標準サイズに対する百分率
- em（エム）
- 1emはその時点における標準的な文字サイズ
２．文字のスタイル（太字、イタリック）
太字 ｛ 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">abcde012345</span>」にできます。
↓
スタイルシートは、ウェブページのデザインを定義します。
半角文字をイタリック「abcde012345」にできます。
３．テキストのスタイル（行送り、配置）
行送り ｛ line-height : （行の高さ） ; }
配置 ｛ text-align : （キーワード） ; }
.line-h {
line-height : 200% ;
}
h4 {
text-align : center ; }
・・・ 略 ・・・
<
h4>CSSの基礎知識（センタリング）<
/h4>
<p>この段落は、行間隔を設定していません。・・・スタイルシートは、ウェブページのデザインを定義、記述するための・・・</p>
<p
class="line-h">この段落の文章は、行間隔を広げています。・・・スタイルシートは、ウェブページのデザインを定義、記述するための・・・</p>
↓
CSSの基礎知識（センタリング）
この段落は、行間隔を設定していません。・・・スタイルシートは、ウェブページのデザインを定義、記述するための・・・
この段落の文章は、行間隔を広げています。・・・スタイルシートは、ウェブページのデザインを定義、記述するための・・・
◇行送り（line-height）で指定する「行の高さ」 （フォントサイズと同じ単位を使う）
- pｘ（ピクセル）
- 解像度の単位（ドット）
- %（パーセント）
- 標準サイズに対する百分率
- em（エム）
- 1emはその時点における標準的な文字サイズ
◇配置（text-align）で指定するキーワード
- left
- 左揃え
- right
- 右揃え
- center
- センタリング
４．テキストの装飾（影・ぼかしなど）
指定方法 ｛ 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>
↓
見出しに黒いぼかしを入れます
テキストにグレーの影をつけます
５．テキストの装飾（下線、取消線など）
指定方法 ｛ 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
- 取消線