文字のデザイン

まずは文字のデザインをいろいろいじってみます。文字サイズ、スタイル、太さ、色、背景色などを変えるプロパティを紹介します。サイズをあらわす単位や、色をあらわす方法についても説明します。

目次

• フォントのサイズ
• 長さの指定方法
• フォントのスタイル
• フォント太さ
• 線を引く
• 文字色
• 色の指定
  • 色名で指定
  • rgb(x, y, z)の形式で指定
  • #xxyyzzの形式で指定
• 背景色
• デザインしてみよう

フォントのサイズ

文字(フォント)の大きさを変えるにはfont-sizeプロパティを使います。

値には「120%、1.2em、15px」など文字の大きさを指定する数値を入れます。「"em"や"px"って？？？」って人も大丈夫です。次の項でちゃんと説明します。

数値の代わりに"large"、"medium"、"small"を使うこともできます。

.a { font-size: 150%; }
.b { font-size: 1.3em; }
.c { font-size: large; }
.d { font-size: small; }
.e { font-size: 20px; }

font-size: 150%
font-size: 1.3em
font-size: large
font-size: small
font-size: 20px

長さの指定方法

いきなり見慣れぬ単位が出てきてしまったので、ここで紹介しておきます。

em

「エム」と呼びます。1emが基準の文字サイズの高さです。1.5emなら1.5倍、0.9emなら0.9倍になります。

px

「ピクセル」といい、1pxがディスプレイの1ドットに相当します。

%

サイズを百分率であらわします。何を基準にするのかはプロパティによって異なります。font-sizeプロパティであれば親要素のフォントサイズを基準にします。(つまりemと同じです。font-size:120%はfont-size:1.2emと同じ意味です。)

フォントのスタイル

font-styleプロパティを italic にするとイタリック(斜体)になります。

.a { font-style: normal; }
.b { font-style: italic; }

Alphabet (normal)
Alphabet (italic)
日本語フォント(ノーマル)
日本語フォント(イタリック)

Internet Explorerなどのブラウザだとem要素はイタリックで表示されますが、日本語のフォントはぎざぎざになって汚いですよね。というわけでem { font-style: normal; }にするのがお勧めです。

フォントの太さ

font-weightプロパティで太字(bold)にできます。

.a { font-weight: normal; }
.b { font-weight: bold; }

font-weight: normal
font-weight: bold

線を引く

文字に線を引くときにはtext-decorationプロパティです。underlineで下線を引く以外に、overlineで文字の上に線を引いたり、line-throughで文字の中心に線を引いたりできます。

text-decorationプロパティは値を複数指定することができます。たとえばtext-decoration: underline overlineとすれば、テキストの上下に線が引かれます。

.a { text-decoration: underline; }
.b { text-decoration: overline; }
.c { text-decoration: line-through; }
.d { text-decoration: underline overline; }

underline
overline
line-through
underline overline

文字色

たぶん一番重要な文字色の設定です。これにはcolorプロパティを使います。

まずは色の指定方法を覚えておきましょう。

色の指定

色の指定方法は三つあります。(1)色名で指定する方法、(2)rgb(x, y, z)の形式で指定する方法、(3)#xxyyzzの形式で指定する方法です。

背景色

文字色とセットで背景色も覚えておきましょう。背景色を設定するにはbackground-colorプロパティを使います。値はcolorプロパティのときと同じです。

body { background-color: silver; }としてページ全体の背景をシルバーにすることもできますし、strong { background-color: red; }として強調する一部分だけの背景を赤にすることもできます。

デザインしてみよう

それでは、これまでの知識を総動員して(といってもCSSのほんの一部ですが)ページをデザインしてみましょう。

body {
    background-color: #f0fff0;  /* ページの背景は薄い黄色 */
    color: #000000;             /* 文字色は黒 */
}
h1 {
    background-color: #ff6347;  /* レベル1の見出しの背景はオレンジ */
    color: #ffffff;             /* 文字色は白 */
    font-size: 1.5em;           /* 文字サイズは1.5倍 */
}
h2 {
    background-color: #f5deb3;  /* レベル2の見出しの背景は肌色 */
    color: #000000;             /* 文字色は黒 */
    font-size: 1.2em;           /* 文字サイズは1.2倍 */
}
em {
    font-style: normal;         /* 強調部分をイタリックにしない */
    font-weight: normal;        /* 太さも普通 */
    color: #daa520;             /* 文字色は金 */
}
strong {
    font-style: normal;         /* こっちもイタリックにしない */
    font-weight: bold;          /* 太くする */
    color: red;                 /* 文字色は赤 */
}
        

サンプルを表示

CSSの基本技しか使っていないのに、ちょっとホームページらしくなってきたと思いませんか？後は、みなさんの才能で素敵なページに改造してください。

まとめ

• 大きさの単位にはem、px、%がある
• 色をあらわすには(1)色名で指定(2)rgb(x, y, z)の形式で指定(3)#xxyyzzの形式で指定の三つの方法がある

Information