前回はCSSファイルの書き方について説明しました。今回から具体的な装飾方法について解説していきます。実際にご自身でも手を動かして確認をしながら読み進めてください。
font-size -文字サイズの指定-
文字のサイズを指定するにはfont-sizeプロパティを使用します。
h1{
font-size:2.4rem;
}
h2{
font-size:20px;
}値の指定の仕方にはいくつか方法がありますが、今回は「rem」と「px」を使用しています。「rem」は何もタグをつけないで文字を表示した際のサイズを1remとしたときの比率で文字サイズを決定します。「px」は絶対値で指定したいときに使用します。CSS適用前後の画像を比べてみてください。
文字サイズのバランスによりサイト全体の見やすさが随分変わります。また、文字サイズは２～５種類にするのが良いとされています。読む人の読みやすさを意識しながら文字サイズを決定していきましょう。
font-weight -文字の太さの指定-
文字を太くして特定の部分を強調したいときにはfont-weightプロパティを使用します。
p{
font-weight:bold;
}1～1000の値を指定することもできますが、「normal」や「bold」で指定するのが一般的です。使用しているフォントにより適用の可否が変わります。また、長い文章全体を太字にすると見づらくなってしまうため、強調したい部分など効果的に適用させていきましょう。
line-height -行の高さの指定-
行の高さを指定したい場合にはline-heightプロパティを使用します。値には数字を入力しますが1.5～1.9に設定するのが一般的となっています。あまり小さい値を入力すると文字が重なってしまうので注意しましょう。
p{
line-height:1.7;
}
text-align -テキストを整える-
テキストを整えるためのプロパティ。デフォルトは左揃えになっています。
p{
text-align: justify;
}サンプルコードの値「justify」は均等割り付けとなります。
少しわかりづらいかもしれませんが、適用させることでテキストの右側のラインがきれいに揃ったことが確認できます。「justify」以外にも値もいくつか紹介させていただきます。
「right」 テキスト全体が右揃いとなります。
「center」 テキストが真ん中を中心に配置されます。
他にもありますが、詳細はHTMLクイックリファレンスを参考にしてください。
color -文字に色を付ける-
文字に色を付ける場合にはcolorプロパティを使用します。文字の色の指定方法は3つの方法があります。
h1{
color:#0000ff; /* カラーコードで指定 */
}
h2{
color:RGB(255,0,0); /* RGB値で指定 */
}
p{
color:skyblue; /* 色の名前で指定 */
}上のコードを実行すると次のように表示されます。
カラーコード：「#」の後に6桁の16進数の数字を組み合わせて指定します。
RGB値：Red,Green,Blueの組み合わせで色を表現します。各0～255の値を指定でき、0が一番濃くなります。
色の名前：赤なら「red」、青なら「blue」など、直感的な名前で指定することができます。
まとめ
以上で、テキスト情報に関する主なプロパティをまとめさせていただきました。
次回は背景に色を指定したり画像を設定するプロパティを紹介します。
コメント