■ WSJ21[GHP]
- スタイルシート講座で覚えよう
■Section 3-3■良いホームページ作成講座■
▼GHP講座3.3 − CSSスタイルシートを覚える
◎ よいデザインのホームページを作るために最低限必要な知識(言語)
◎ ホームページを作るために覚えなくてはいけないんです。
◎ 頑張って覚えて下さいね＜他人事＞初めは見ながらでいいですからっ♪
◎ 簡単な英語ができるなら、かなり楽に覚えられますよ。
.
◇◆◇このページで、解説するCSS一覧◇◆◇
[font] font-style font-weight font-size font-family font
※スタイルシートを使用している都合上、文字のサイズなど実際の表示と多少異なります。
★font-style : 文字スタイル(斜体文字)
汎用例：font-style:<value>; [value] normal, italic, oblique
実用例：font-style:italic;
<span style="font-style:normal;">normal：通常文字</span><br />
<span style="font-style:italic;">italic：イタリック文字</span><br />
<span style="font-style:oblique;">oblique：傾斜文字</span><br />
↓ このように表示されます ↓
normal：通常文字
italic：イタリック文字
oblique：傾斜文字
★font-weight : 文字重み(太字文字)
汎用例：font-weight:<value>; [value] normal, bold
実用例：font-weight:bold;
<span style="font-weight:normal;">normal：通常文字</span><br />
<span style="font-weight:bold;">bold：太字文字</span><br />
↓ このように表示されます ↓
normal：通常文字
bold：太字文字
★font-size : 文字サイズ(フォントサイズ)
汎用例：font-size:<length>; [value] 10pt, 12px, 1em...
実用例：font-size:12px;
<span style="font-size:12pt;">12pt：フォントサイズ</span><br />
<span style="font-size:16px;">16px：フォントサイズ</span><br />
<span style="font-size:1em;">1em：フォントサイズ</span><br />
↓ このように表示されます ↓
12pt：フォントサイズ
16px：フォントサイズ
1em：フォントサイズ
★font-family : 文字の種類(フォント指定)
汎用例：font-family:<family-name>, <generic-family>;
実用例：font-family:ＭＳ ゴシック, serif;
<family-name>：日本語名や空白のある文字名の場合は「"〜"」でくくる。
Wordとかで使われるフォント名を記述する。指定フォントがない場合は代用フォントが使用される。
<generic-family>：「serif(セリフ)」「sans-serif(サンセリフ)」
「cursive(筆記体)」「fantasy(奇抜)」「monospace(等幅)」のいずれかを記述する。
<family-name>で指定したフォントがない場合に代用フォントが使用される。
<span style="font-family:"無いフォント",serif;">
font-family : 文字の種類：serif</span><br />
<span style="font-family:"無いフォント",sans-serif;">
font-family : 文字の種類：sans-serif</span><br />
<span style="font-family:"無いフォント",cursive;">
font-family : 文字の種類：cursive</span><br />
<span style="font-family:"無いフォント",fantasy;">
font-family : 文字の種類：fantasy</span><br />
<span style="font-family:"無いフォント",monospace;">
font-family : 文字の種類：monospace</span><br />
font-family : 文字の種類：指定無し
↓ このように表示されます ↓
font-family : 文字の種類：serif
font-family : 文字の種類：sans-serif
font-family : 文字の種類：cursive
font-family : 文字の種類：fantasy
font-family : 文字の種類：monospace
font-family : 文字の種類：指定無し
※下手なフォントを使うなら画像にして貼り付けるべきです。
→ フォントがない場合はデフォルトフォントが使用されるので表示がおかしくなってしまいます。
★font : 文字(フォント一括指定)
汎用例：font:<style>||<weight><size>||<family>;
実用例：font:italic bold 14pt times, serif;
必須値：<size><family>
上記の物を一括に指定します。でもあまり使っていない。
<span style="font:italic bold 14pt times, serif;">
italic bold 14pt times, serif</span><br />
↓ このように表示されます ↓
italic bold 14pt times, serif