HTML&CSS入門その５『CSSを使った装飾』

①プロパティと値

CSSで記述する装飾のルールは、一般的に規則と呼ばれる。
規則の基本はセレクタ、プロパティ、値の三つ。

〇形式
セレクタ{
　プロパティ: 値;
}

セレクタで、HTMLのどの部分を変更するかを指定。
プロパティで、選択した部分の何を変更するかを指定。
値で、どのように変更するかを指定。

プロパティを書いたら :（コロン）を打ち、値を書いたら ;（セミコロン）を打つ。

〇使用例
p{
　color: yellow;
}

②プロパティ

【color】
テキストの色を指定するプロパティ。
値には、色のコードまたはネームでテキストの色を指定する。

ネームは、yellow,black,whiteなど。
コードは、16進数と10進数（rgb値）による指定がある。

〇16進数による指定
yellow = #FFFF00
black = #000000（#000で短縮できる）
white = #FFFFFF（#FFFで短縮できる）

〇10進数（rgb値）による指定
yellow = rgb(255,255,0)
black = rgb(0,0,0)
white = rgb(255,255,255)

【background-color】
テキストの背景（paddingの余白）を指定するプロパティ。
値には、色のコードまたはネームでテキストの色を指定する。

【text-decoration】
リンク特有の下線。値noneで下線を非表示にする。

【font-family】
テキストのフォントを指定する。
　代表的なものにsans-serif（ゴシック体）やserif（明朝体）があり、これらを総称フォント名といい、ざっくりしたカテゴリを指定するもの。
　同じゴシック体でも「MS Pゴシック」や「メイリオ」など様々な種類があり、総称フォントを指定するとブラウザごとに設定されているデフォルトのフォントで表示される。
　フォントを具体的に指定する場合、固有のフォント名を指定する。この個別のフォント名のことをフォントファミリー名という。
　フォントファミリー名を指定する際は、' 'シングルクォーテーションまたは" "ダブルクォーテーションで囲む。

〇使用例
.font{
　font-family:"メイリオ";
}

【font-size】
テキストのサイズを指定する。値は様々だが、初めのうちはpxを用いて指定するといい。

【font-weight】
テキストの太さを設定する。値にはbold（太字）、lighter（今より一段階細く）、bolder（今より一段階太く）などを指定する。

【text-align】
テキストの水平方向への配置（行揃えの位置）を指定する。
値にはleft（左寄せ）、center（中央寄せ）、right（右寄せ）、justify（両端揃え）を指定する。
よく使われるのはcenter（中央寄せ）。

【width/height】
widthで内容領域の横幅、heightで高さを指定する。
divタグの大きさを調整したり、画像の大きさを変更する際によく使われる。
値にはこちらも初めのうちはpxを用いるといい。

〇使用例
.sample div{
　background-color: #faf006;
　width:300px;
　height:150px;
}