オリジナルテンプレートへの道のり

■ 実践!背景色の設定
あの人気ブログ「動画の桜」の運営者エロ流さんによるデザイン講座第六回目です。

【今回のお題】 前回は背景色の設定ということで、設定の際の記述方法や色についての知っておくべき基礎知識をレクチャー頂きました。ウェブサイトを作成する際に、見せる力があるサイトというのを作れたらやはり集客力にも違いがでますね。今回はさらに文字の装飾に関するレクチャーです。

文字スタイルの設定

文字のスタイルは、CSSの「body」要素に指定するとブログ全体に反映されますが、「p」「li」「h1」「h2」など、個別の要素にも反映させることが可能です。さらに独自でセレクタを作成することで、もっと細かく指定することも可能です。独自セレクタの作り方は、第三回で紹介しています。

今回は、「p」要素に対しての指定方法を見本として使います。

CSSファイル -----------------------------------------
p {
font-size: 12px; /* 文字のサイズの指定 */
color: #000000; /* 文字の色の指定 */
font-weight: bold; /* 文字を太くする */
font-weight: normal; /* 文字を標準の太さにする */
font-style: italic; /* 文字を斜体にする */
background-color: #CCCCCC; /* 文字の背景色の指定 */
text-decoration: underline; /* 文字に下線を表示する */
}
-------------------------------------------------------

以上のスタイルの基本的な指定方法を個別でご紹介していきます。

文字色の指定

文字色の指定は、「color」属性を変更します。例えば、文字色をオレンジ色に指定する場合はこうなります。
※その他の色を試してみたい方は、「背景色の指定」で紹介したカラーコードやカラーネームをご参照ください。

CSSファイル -----------------------------------------
p {
color: #FF9900;
}
-------------------------------------------------------

★ワンポイントアドバイス★
例えば、背景色が白の場合は、若干グレーの混ざった黒"#333333"、背景色が黒の場合は、白いに近いグレー"#CCCCCC"を指定すると、非常に読みやすくなります。また、格好よく見せたいときは、文字と背景を同系色にしてみてください。

文字サイズの指定

文字サイズの指定は、「font-size」属性を変更します。

CSSファイル -----------------------------------------
p {
font-size: 12px;
}
-------------------------------------------------------

★ワンポイントアドバイス★
文字サイズの単位はたくさんあるのですが、 一般的には「px」(ピクセル)で指定することが多いです。例えばIEのブラウザのサイズであれば以下のようになります。
大 ・・・ 16px
中 ・・・ 12px
小 ・・・ 10px
標準的な大きさは12pxとなります。その他、閲覧者がブラウザで文字サイズを自由に変更することが出来るようにしたいようであれば 「em」、「%」という単位で指定する方法もあります。文字サイズを色々と試して見たい方は 以下のサイトなどを参考にしてください。

[ 文字サイズに関する参考サイト ]
http://www.geocities.co.jp/SiliconValley-Bay/4726/fontsize.html

行間の指定

行間の指定は、「line-height」属性を変更します。

CSSファイル -----------------------------------------
p {
line-height: 150%;
}
-------------------------------------------------------

★ワンポイントアドバイス★
行間の単位もたくさんあるのですが、 一般的に「%」という単位で指定します。「%」で指定しておけば、大抵のPC環境でほぼ同様に表示されます。例えば、12pxの文字サイズ(IEの中サイズ)であれば、120%以上で指定してすると非常に読みやすくなります。何行にも渡る長文の場合は、150%以上で指定すると良いでしょう。

文字の大きさを指定

文字を太字に指定する場合は、「font-weight」属性を"bold"に変更します。

CSSファイル -----------------------------------------
p {
font-weight: bold;
}
-------------------------------------------------------

逆に、<h1>や<h2>タグの文字の太さを標準にしたい場合は、「font-weight」属性を"normal"に変更します。

CSSファイル -----------------------------------------
h1 {
font-weight: normal;
}
-------------------------------------------------------

同様に<strong>タグの太さを標準に変えることも出来ます。

★ワンポイントアドバイス★
CSSで太字を指定している場合でも、ポイントとなる文字には<strong>タグで強調しましょう。見た目には変わりませんが、SEO的には非常に有効になります。

文字のスタイルの個別指定

例えば、以下のように、阪神とロッテという文字が<strong>タグで囲まれているとします。

HTMLファイル -----------------------------------------
今年は<strong>阪神</strong>が、<strong>ロッテ</strong>にリベンジする年です。
-------------------------------------------------------

このような時、文字色だけを個別に変えたい場合は、以下のように独自のセレクタを作成し、阪神は黄色に、ロッテはグレーの文字色にそれぞれ変更してみましょう。

CSSファイル -----------------------------------------
strong.tigers {
color: #FFCC00;
}
strong.marines {
color: #666666;
}
-------------------------------------------------------

作成した独自のセレクタを<strong>タグに適用します。

HTMLファイル -----------------------------------------
今年は<strong class="tigers">阪神</strong>が、<strong class="marines">ロッテ</strong>にリベンジする年です。
-------------------------------------------------------

★ワンポイントアドバイス★
行間の単位もたくさんあるのですが、 一般的に「%」という単位で指定します。「%」で指定しておけば、大抵のPC環境でほぼ同様に表示されます。例えば、12pxの文字サイズ(IEの中サイズ)であれば、120%以上で指定してすると非常に読みやすくなります。何行にも渡る長文の場合は、150%以上で指定すると良いでしょう。

次回予告
今回は、前回背景色の設定で学んだ色の知識を活用した文字の指定でした。本でも、文字でずいぶん見え方が変わってしまうものですが、文字の種類、行間を読み手の気分になっていろいろ試してみてください。次回は、Webならではの手法、リンクの設定、装飾についての講座です。お楽しみに!

エロ流さんプロフィール

名前: HARU(ハル)
職業: ITベンチャー勤務、3流フォトグラファー
趣味: 写真、読書、3流映画鑑賞、一人温泉旅
夢: フォトグラファー