CSS（Cascading Style Sheets）
CSSとは、HTMLの要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。
h1やpなどの意味付けはHTML
色や大きさやレイアウトなどはCSS
エンベットによる記述方法
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> </body> </html>
外部ファイルによる記述方法
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html>
CCSの記述ルール
最初に覚えるべきプロパティ
- color = 文字の色
- font-size = 文字の大きさ
- background-color = 背景の色
- width = 横幅
- height = 高さ
- margin = 要素の外側の空き
- padding = 要素の内側の空き
- border = 線の種類・太さ・色を指定する
主な線の種類
- solid = 1本線で表示されます。
- double = 2本線で表示されます。
- dashed = 破線で表示されます。
- dotted = 点線で表示されます。
Web Developer
1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っていて、非常に便利なのでぜひ導入しましょう。
margin
marginとは要素の外側に出来る隙間の事です。
padding
paddingとは要素の内側に出来る隙間です。
言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトではどちらでも結果として思い通りの形になるケースが多いため、上手く使い分けが出来ないままなんとなく使い続け、いざ複雑なレイアウトを始めると、使い分けが出来ていないせいで苦労する、というケースをよく目にします。なので、今のうちからmarginとpaddingの違いをしっかりと理解しておきましょう。
marginとpaddingは共に４つの方向別に指定する事が出来ます。
margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
また、ショートハンドという省略した形でコーディングしていく機会も多いので、ショートハンドの形も一緒に覚えて行きましょう。
