テキスト装飾

文字の装飾はCSSで指定します。基本は下記のようになります。

span { 
　　font-size:12px; /*フォントサイズ*/
　　font-family:'ＭＳ Ｐゴシック'; /*書体*/
}

---

サイズ

サンプルあいうえお・aiueo

font-size: 2rem;

詳しくはこちらを

書体

サンプルあいうえお・aiueo

font-family:'ＭＳ Ｐゴシック';

文字色

サンプルあいうえお・aiueo

color:tomato;

イタリック体

サンプルあいうえお・aiueo

font-style:italic;

タグ<em>と同意ではありません。

メイリオなどの書体ではイタリック体が有効になりません。サンプルはfont-familyを'Times New Roman',Verdanaに指定しています。

斜体

サンプルあいうえお・aiueo

font-style:oblique;

メイリオなどの書体では斜体が有効になりません。サンプルはfont-familyを'Times New Roman',Verdanaに指定しています。

シャドウ

サンプルあいうえお・aiueo

text-shadow: 10px 10px 3px #EFB1B1;

1個目：横ずれ、2個目：縦ずれ、3個目：ぼかし具合

太字

サンプルあいうえお・aiueo

font-weight:bold;

タグ<strong>と同意ではありません。

デコレーション

サンプルサンプル/sample

text-decoration:line-through; /*取消線*/
text-decoration:underline; /*下にライン*/
text-decoration:overline; /*上にライン*/

text-decoration:blink; /*点滅*/については2013年には廃止しています。

罫線

サンプルあいうえお・aiueo

border:solid 1px tomato;

詳しくはこちらを

背景色

サンプルあいうえお・aiueo

backgorund-color:tomato;

背景画像

サンプルあいうえお・aiueo

background-image:url('画像');

スモールキャプチャ

サンプルあいうえお・aiueo

font-variant:normal; /*初期値*/
font-variant:small-caps; /*小文字を大文字で表示し、小さく表示する*/
font-variant:inherit; /*継承*/

 

関連記事