Webのお勉強 〜CSS〜

CSSとは
・簡単に言えばHTMLで作ったページを好きなようにレイアウトや色をかえることが出来る
・サイト自体が軽くなり、SEO(検索エンジンに上位表示)対策にもなる
・編集が簡単にできページを読み込むのがはやい
・デメリットはIEで表示に問題がある場合がある

ボックスモデル
・width→幅、height→高さ
　　　　枠線や背景色の幅、高さを指定できる

・padding(パディング)
　　　　文字の上下左右の内側の余白
　　　　文章の内容をを大きく見せることが出来る
　　　　上下左右まとめて指定する場合は"padding":A B C D;で指定できる(ショートハンドプロパティ)
　　　　(値が４つだった場合A→上、B→右、C→下、D→左と時計回りに指定される
　　　　 値が2つだった場合A→上下、B→左右に指定される)

・border(ボーダー)
　　　　文字などの周りに境界線を引ける、線の太さや色などの指定もできる
　　　　パディングとマージンの境界線にあたる
　　　　top、right、bottom、leftを追加することで上下左右個別に太さや色を指定できる
　　　　例)border-top: 2px red dotted;
　　　　↑文字の上に境界線2ピクセルの赤い点線という意味になる

・margin(マージン)
　　　　文字の上下左右の外側の余白
　　　　文章ごとにグループ、ブロック分けできて見やすく出来る
　　　　値の指定はパディングと同じ
　　　　※マージンを指定したブロックが上下に並ぶ場合は、隣接する垂直方向のマージンが相殺される場合がある
　　　　例)＜p＞この段落の bottom(下) マージンは...＜/p＞
　　　　　 ＜p＞...この段落の top(上) マージンによって相殺される。＜/p＞

CSSで色を指定
色を指定する場合3パターンある
　1.色のカラーネームを直接入力する
　　　redやgreen,whiteなどを入力することで指定できる
　　　例)color: red;
　
　2.16進数で色を指定(ヘックスカラー)
　　　16進数は[0123456789ABCDEF]の16の英数字で表現される
　　　0に近くなるほど黒く(暗く)なり、Fに近くなるほど白く(明るく)なる
　　　Hue（色相）・Brightness（明度） ・Saturation（彩度)
　　　RGBを2個ずつの数字で割り振る
　　　2個の数字の左が明度、右が彩度にあたる
　　　6桁で色は指定でき、#000000と指定する
　　　#000000は黒、#FFFFFFは白となる(アルファベットの場合大文字でも小文字でも大丈夫)
　　　例)color: #FF0000;

　3.10進数で色を指定
　　　CSSのみで使われる独自の指定方法(上の2つはHTMLと同じ指定方法にあたる)
　　　なので基本は使わないとおもわれる
　　　rgb(250,0,0)か、もしくはrgb(100%,0%,0%)などで指定出来る