color 文字に色を付けるためのプロパティです。 値にはカラーコード、色の名前、RGB値のいずれかが入ります。カラーコードでの指定が多いですが、透明度を指定したい場合はRGB値を用います。 カラーコードは#(半角シャープ)から書きはじめ、色ごとに決められた3桁または6桁のコードを入力します。覚えることは不可能なのでカラーピッカーなどを用いて確認しましょう。 RGB値はrgbまたはrgba(透明度を指定したい場合)から書きはじめ、赤、緑、青、透明度をそれぞれ,(カンマ)で区切って指定します。透明度は0～1の間で指定しましょう。こちらも覚えるのは不可能なので、カラーピッカーなどを用いて確認してください。
CSSの基本プロパティそのいち(テキスト関連・背景関連)
テンプレートの色を変えたい、デザインを変えたい――。こういった要望に対応するのがCSSです。しかし、HTMLに比べて指定する要素が多く、混乱してしまう人も多いです。わたしもそうでした。でも、今ではなんとか書籍を参照しながらある程度コードを理解することができるようになりました。
そんな初心者に毛の生えた程度な筆者が、毛が生える前の筆者に書くような気持ちで書いてみようと思います。
CSSの基本文法
CSSはセレクター・プロパティ・値の3つで構成されています。簡単な例を見てみましょう。
h1{
color: red;
}
この例では、
h1：セレクター
color：プロパティ
red:値
となります。
セレクターとは修飾する部分を記述します。この例ではすべてのh1タグを指定しています。
プロパティとは修飾する要素、わかりやすくいうと「何を変えるのか」を記述します。この例では文字色の変更を指示しています。
値とはどのように変えるかを記述します。この例では赤色に変えるように指定しています。
CSSの書き方にはいくつかルールが存在します。
このあたりは実際のコードを見ながら覚えていくとわかりやすいと思います。
それでは、基本中の基本を掴んだ気がするところで色々なプロパティを見てみましょう。
まずはテキスト関連のプロパティです。
テキスト関連のプロパティ
font-size
文字のサイズを指定するプロパティです。
単位はpx,em,rem,%など。
一般的なブラウザのfont-sizeは16pxであることが多いです。
本文部分はおおよそ14～18px程度が一般的です。
font-weight
文字の太さを指定するプロパティです。
値としてはnomal,bold,lighter,bolderなどのキーワードで指定するほうが一般的です。
通常はnomalです。また、フォントによっては設定しても反映されない(=フォントデータ内にバリエーションがない)ことがあります。
font-family
フォントの種類を指定するプロパティです。フォント名とキーワードの2つの値があります。
フォント名を指定するときは、日本語のフォント名と半角スペースが含まれているものは'シングルクォーテーション'または"ダブルクオーテーション"で区切って表記し、フォントの種類ごとに,(カンマ)で区切ります。ブラウザによっては日本語のフォント名を識別できないものがあるため、同時に英語表記のフォント名も指定しておくと安心です。また、先に指定したものから順に反映されます。
キーワードで指定するときは、
の中から指定します。何らかの原因で指定したフォントがすべて読み込めなかったときのために、ここも指定しておくと安心です。
line-hight
行間(行の高さ)を指定するプロパティです。
値に単位を含めないことができ、そちらでの指定が多いです。その場合、フォントサイズとの比率で行間が設定されます。
おおよそ1.5～1.9の間がきれいに見えやすいですが、フォントの種類によってやや異なります。
text-align
テキストを揃える位置を指定するプロパティです。
値はleft(左揃え),right(右揃え),center(中央揃え),justify(両端揃え)があります。
日本語の場合、デフォルトではleftです。
個人的には長文にはjustifyを設定すると左右が揃って見やすくなるイメージです。もちろんデザインとの兼ね合いの部分も大きいです。
color
文字に色を付けるためのプロパティです。
値にはカラーコード、色の名前、RGB値のいずれかが入ります。カラーコードでの指定が多いですが、透明度を指定したい場合はRGB値を用います。
カラーコードは#(半角シャープ)から書きはじめ、色ごとに決められた3桁または6桁のコードを入力します。覚えることは不可能なのでカラーピッカーなどを用いて確認しましょう。
RGB値はrgbまたはrgba(透明度を指定したい場合)から書きはじめ、赤、緑、青、透明度をそれぞれ,(カンマ)で区切って指定します。透明度は0～1の間で指定しましょう。こちらも覚えるのは不可能なので、カラーピッカーなどを用いて確認してください。
続いて、webサイトのデザインの中心となる背景関係のプロパティです。
背景関係のプロパティ
backgroud-color
背景に色をつけるためのプロパティです。
値にはcolorプロパティと同じくカラーコード、色の名前、RGB値のいずれかが入ります。
bodyタグに対して指定すればページ全体の背景に色が付けられるので覚えておきましょう。
backgroud-image
背景に画像を設置するためのプロパティです。
値にはurl(画像ファイルの相対/絶対パス)という形で指定します。
backgroud-repeat
背景画像の繰り返し表示をするかしないか、する場合はどの方向にするかを決めます。
デフォルトでは画像を縦と横に繰り返し表示し、画面いっぱいに画像を敷き詰めます。
値は以下になります。
backgroud-size
背景画像の大きさを設定するためのプロパティです。
値の指定方法は以下になります。
数値：px,em,rem,%などの単位を付ける
キーワード：cover,contain
coverは縦横の比率を守ったまま、表示領域を埋め尽くすように画像を表示します。画像が大きい場合は見切れます。
containは縦横の比率を守ったまま、画像をすべて表示できるようにします。表示領域のほうが大きい場合は余白ができます。
backgroud-position
背景画像を表示する開始位置を指定します。
値の指定方法は以下になります。
数値：px,em,rem,%などの単位を付ける
キーワード：横方向はleft(左),center(中央),right(右) 縦方向はtop(上),center(中央),bottom(下)
値は基本的に(横方向) (縦方向)の順で間に半角スペースを入れて表します。デフォルトの開始位置は左上(left top)です。
CSSのプロパティは膨大なので、記事の読みやすさを確保するためにいったんここで区切ります。
続きは後日ということで、ここはひとつご容赦ください。
それでは、また次の記事で。