>>一回目  >>二回目  >>三回目  >>四回目  >>五回目  >>六回目  >>最終回 

あの人気ブログ、エロ流ブログの運営者エロ流さんによるデザイン講座第6回目です。素敵なデザインのブログです。

【前回のおさらい】
前回は背景色の設定ということで、設定の際の記述方法や色についての知っておくべき基礎知識をレクチャー頂きました。ウェブサイトを作成する際に、見せる力があるサイトというのを作れたらやはり集客力にも違いがでますね。今回はさらに文字の装飾に関するレクチャーです。
エロ流さんプロフィール
名前:HARU(ハル)
性別:年齢:28歳 職業:ITベンチャー勤務、
3流フォトグラファー
趣味:写真、読書、3流映画鑑賞、一人温泉旅
夢:フォトグラファー


 

文字のスタイルは、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"、"%"という単位で指定する方法もあります。
文字サイズを色々と試して見たい方は 以下のサイトなどを参考にしてください。

[ 文字サイズに関する参考サイト ]

 

行間の指定は、" 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>にリベンジする年です。

-------------------------------------------------------------------------------------

こうすることで、同じstrongタグでも2種類のスタイルを指定することができます。
もちろん、文字色だけでなく、サイズ、太さ、下線の有無などを指定することができます。

 

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