文字とテキストのスタイル
1.文字の大きさ(サイズ)
指定方法 { font-size : (フォントサイズ) ; }
h4 { font-size : 18pt ; }
.f-size { font-size : 70% ;
}
・・・ 略 ・・・
<h4>CSSの基礎知識</h4>
<p>スタイルシートは、<span class="f-size">ウェブページのデザイン</span>を定義、記述するための・・・</p>
↓
CSSの基礎知識
スタイルシートは、ウェブページのデザインを定義、記述するための・・・
◇フォントサイズで使用する主な単位
-
pt(ポイント)
- 1ポイント=72分の1インチ
- %(パーセント)
- 標準サイズに対する百分率
- 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)で指定する「行の高さ」 (フォントサイズと同じ単位を使う)
-
pt(ポイント)
- 1ポイント=72分の1インチ
- %(パーセント)
- 標準サイズに対する百分率
- em(エム)
- 1emはその時点における標準的な文字サイズ
◇配置(text-align)で指定するキーワード
- left
- 左揃え
- right
- 右揃え
- center
- センタリング
4.テキストの装飾(下線、取消線など)
指定方法 { 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
- 取消線