スタイルシートで文字装飾
「スタイルシート」とはフォント、テキスト、テーブルなどをそのスタイルの指定をパターン化し、まとまった形でドキュメントに適応させることができると言う機能です。
フォント変更タグ一覧
- font-family:フォントの種類;
- font-style:斜体表記;
- font-variant:大文字表記;
- font-weight:文字の太さ;
- font-size:文字サイズ;
font:斜体表記、大文字表記、文字の太さ、文字サイズ(/line-height)フォント名;
| フォント名 | impact、verdna、MS Serif、…その他多数 |
|---|---|
| 斜体表記 | normal、italic、oblique |
| 大文字表記 | normal、small-caps |
| 文字の太さ | normal、bold、bolder、lighter、100、200、300、400、500、600、700、800、900 |
| 文字サイズ | xx-small、x-small、small、medium、large、x-large、xx-large、larger、px、cm、pt、% |
font-family（フォントの種類）
font-familyはフォントの種類を変更するプロパティーです。
例：
impactフォント
HTML文書：
<p style="font-family:impact;">impactフォント</p>
例：
サンプル文字「Hello」
HTML文書：
<p style="font-family:verdna,'MS Serif';">サンプル文字「Hello」</p>
複数のフォントを指定することも可能で、優先順位の高い順に記述できます。
こうすることにより、ユーザ側の利用ブラウザに使用したいフォントが無くても、順に製作者の意図するフォントで表示させることができます。
フォント名に「スペース」が入る場合は'（クォーテーション）か"（ダブルクォーテーション） でくくってください。
font-style（斜体）
font-styleのプロパティーを変更すれば、文字を斜体にしたりすることができます。
例：
HTML文書：
<em style="font-style:normal;">これは普通</em>
例：
HTML文書：
<em style="font-style:oblique;">斜体です</em>
normal以外（italic、oblique）はどちらも斜体となります。
font-variant（大文字表記）
日本語で書くページにはあまり必要ありませんが、小文字を小さめの大文字表記したりする場合に用います。
例：
title
HTML文書：
<h1 style="font-variant:small-caps;">title</h1>
この例は<h1>なので大文字で記述した<h2>と同じ表示になります。
font-weight（文字の大きさ）
文字の太さを変えてアクセントをつけるのに用います。
太さの設定方法には二種類あり「数値」と「オプション」があります。
数値による指定では<b>と言った太さを変更するタグの影響を受けませんが、bolderとlighterでは指定された部分の初期値から相対的に文字の太さが変更されます。
例：
HTML文書：
<strong style="font-weight:lighter;">この文字と</strong>
例：
HTML文書：
<strong style="font-weight:bolder;">この文字を</strong>
例：
HTML文書：
<strong style="font-weight:900;">比較してみよう</strong>
font-size（フォントの大きさ）
フォントのサイズの変更も「数値」と「オプション」の二種類あります。
オプションである「larger」と「smaller」以外は絶対的な指定です。
「larger」と「smaller」は相対的な指定のため、前後のフォントサイズに比べて大きくさせたり、小さくさせたりすることが可能です。
例：
おはようこんにちはこんばんわ
HTML文書：
<style type="text/css">
span{font-size:larger;}
div{font-size:10pt;}
</style>
<span>おはよう<span>こんにちは</span>こんばんわ</span>
<div>さようなら>/div>
color:色名、色指定、RGB
通常の色指定以外にも、RGBの各色を数値で指定することができます。
この場合255を超える数値を指定しても、255として扱われます。同様に%での表現も100%を超える数値を指定しても100%として扱われます。
例：
これはマゼンタ色
HTML文書：
<span style="color:magenta;">これはマゼンタ色</span>
例：
これもマゼンタ色
HTML文書：
<span style="color:#f0f;">これもマゼンタ色</span>
例：
これだってマゼンタ色
HTML文書：
<span style="color:#ff00ff;">これだってマゼンタ色</span>
例：
これは初めて？
HTML文書：
<span style="color:rgb(100%,0%,100%);">これは初めて？</span>
background-color:背景色
web ページでは背景があるだけで、全く違ったイメージになります。backgroundプロパティでは、その背景を細かく設定することができます。
例：
HTML文書：
<em style="background-color:aqua;">背景が水色の文字です </em>
例：
ここだけ背景を表示することもできます。
HTML文書：
<span style="background-image:url(lib/back1.gif);">ここだけ<bg>背景を表示することもできます。</span>
spanを使えば、文字の箇所のみ、pを使えば、行ごとすべて背景色に変わります。
background-attachment、background-position
例：
スタイルシートを利用すれば、背景の繰り返しを制御できるだけでなく、 背景のスクロールも制御できます。
HTML文書：
<div style="background:#222244 url(lib/back1.gif) no-repeat fixed 30% 40%;">スタイルシートを利用すれば、背景の繰り返しを制御できるだけでなく、 背景のスクロールも制御できます。 </div>
文字の後ろに背景画像が表示されます。
背景色を濃青、back1.gifを繰り返し無し（no-repeat）で固定（fixed）し、左から30%、上から20%の位置に表示するように指定しています。
オススメ書籍
HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。
