CSSを使った文字の装飾(その2) ~無料ホームページの作り方~

HOME > 無料で作成講座 > 無料ホームページの作り方 > CSSを使った文字の装飾(その2)

無料ホームページの作り方
弊社では「自分で作成してみたい!」という方も応援しています

5.CSSを使った文字の装飾(その2)

文字装飾の種類

■ color
文字の色を指定します。値はカラーコードかカラーネームで指定することが出来ます。
WEBのカラー指定についてはこちらのサイト「CSS/HTML色見本」が役立つかと思います。
例: color: #0000ff; サンプル:このように表示されます

■ font-size
文字の大きさを指定します。値には単位(px、em、ex)を付けますがデザインする上でコントロールしやすいのはピクセル指定(px)かと思います。
ブラウザにもよりますが一般的には16px辺りが標準ですので、それを基準に指定すると良いかと思います。
例: font-size: 18px; サンプル:このように表示されます

■ font-weight
文字の太さを指定します。
最大で9段階の指定が出来ますが一般的なフォントでは9種類の太さを用意しているものはほとんど無いので、通常か太字かのどちらかしか変化しません。
normal = 通常(標準)
bold = 太字
例: font-weight: bold; サンプル:このように表示されます

■ background-color
背景色を指定します。
これもcolorと同様にカラーコードかカラーネームでの指定が可能です。
例: background-color: #eeeeee; サンプル:このように表示されます

それぞれを組み合わせてデザインしてみる

上記で紹介したものはCSSのほんの一部ですが、これだけでもある程度のデザイン的表現が可能です。
例えばこの2行だけでも下のようになります。
CSSの組み合わせでデザインする

どうですか?何かタイトルのようなデザインになりましたよね。
さらにCSSを使いこなしていくと、画像を使わなくてもこのように表現する事も可能になってきます。
CSSの組み合わせでデザインする

その他、非常に沢山の装飾指定が存在します。
とてもここでは書ききれないので、実際にはCSS関連の書籍を購入して覚えるのもひとつの手です。
また、ウェブ上にも「HTMLクイックリファレンス」といったサイトがありますので参考にしてみて下さい。