peeks-blog

自分用メモ

CSSはまず「記法」を抑え、その上でどの部分が
セレクタ、プロパティ、値と言えるのかを
きちんとアウトプット出来るようにする。

※参考：CSSのレイアウトについて

CSSの基礎知識

CSSを使えば、HTMLにデザインを適用することが出来る
いわゆる「見栄えがいいサイト」になる

CSSの最新バージョンは「CSS3」である
現在殆どのブラウザがCSS３に対応している
CSSについて調べる際は、旧バージョンの記述でないか注意した方がいい

CSSファイルはHTMLと同じく「テキストファイル」
なので、テキストエディタを使用して作成する

保存したファイルの拡張子を「.css」にする事で、
WebブラウザにCSSファイルとして認識される
このCSSファイルを「適用するHTMLファイル」と
同じサーバー上に保存して、HTMLファイルから参照する

※参考：HTMLとは？head要素やbody要素、属性について解説

CSSの記法

CSSは「HTML内の○○要素の△△を□□にする」のように記述する
（○○：セレクタ　△△：プロパティ　□□：値）
→この形を上から下へ幾つも書いていく感じ


CSSはセレクタ、プロパティ、値の３つで構成される
（詳細は後述）


・セレクタ
HTMLの「どの部分」にスタイルを適用するかを指定する

・プロパティ
「スタイルの種類」を指定する

・値
プロパティで指定された「スタイルの値」を指定する
終わりの「;」を忘れないように！


★CSSのコメント
HTMLと同様、CSSにも「コメントを書くための記法」がある
「/* ～ */」が、コメントを書くための記法である
コメントはブラウザからは無視されるので表示されない
この特性を活かして、CSSを書く人にメモ用途としてコメントを残す事ができる

セレクタとは？

定義：CSS命令を摘要するかを選択する部分のこと

「＜p＞～＜/p＞の間の文字色を#ff0000に指定する」といった文
「要素を指定している場所」をセレクタと言う

他にもHTMLのクラス名、ID属性、
子孫要素、複数のセレクタも指定できる


★要素全体のセレクタ
p要素やh1要素全体を指定したければ、p()、h1()と書けば良いが、
pやh1要素全てではなく特定の箇所だけ
デザインを適用する方法もある：下の２つ（. #）参照

★class属性で指定するセレクタ
p要素の中でも「特定のclass属性を持ったp要素」
のみをセレクタとしたい場合は「.」記号を利用する
「.記号」の後にクラス名を指定することで、
デザインを適用する範囲を限定する事ができる

★id属性で指定するセレクタ
「特定のid属性を持ったp要素」のみを
セレクタとしたい場合は「#」記号を利用する

★子孫セレクタ
HTML文書の構造に沿って指定するセレクタ

★擬似クラス
要素の中でも「ある状態になっている要素」を指定できる
（リンクテキストにカーソルを合わせた状態等）
リンクに関しては、以下の３種類の擬似クラスを使う事で対応が可能となる

　a:link：未訪問のリンク
　a.hover：要素にカーソルが乗っている状態
　a:visited：訪問済みのリンク

プロパティとは？

定義：セレクタによって指定された要素に対して適用するデザインの種類


例えば、「color」というプロパティは、
文字色を指定するためのプロパティ

この「color」以外にも多くのプロパティがある、
新しいプロパティ出てきたらリファレンスで確認すること


★テキスト関係のプロパティ
Font-size：文字の大きさを指定する
Font-weight：文字の太さを指定する
Text-align：文字の行揃え（左寄せ、中央寄せ、右寄せなど）を指定する
　※他にも「斜体をつけるプロパティ」「下線をつけるプロパティ」
　　「フォント自体を変更するプロパティ」等がある

★背景のプロパティ
Background-color：背景色の指定
Background-image：背景画像の指定

★ボックスモデルに関するプロパティ
Margin（マージン）：余白や外のサイズを指定する
Border（ボーダー）：境界線（ボーダー）のサイズを指定する
Padding（パディング）：余白や内のサイズを指定する
Width：コンテンツの横幅を指定する
Height：コンテンツの縦幅を指定する

★表示や配置に関するプロパティ
Display：要素の表示、非表示を指定する
Float：サイドバー等のコンテンツの配置を指定する
Position：コンテンツの配置を指定する
Overflow　：コンテンツがはみ出た場合の対応を指定する

値とは？

値は「それだけでは存在せず」「プロパティと対になって存在する」
つまり、プロパティによって指定できる値は異なる

colorという「文字色を指定するプロパティ」に対して、
40pxといった「長さの単位の値」を指定することは出来ない

CSSの優先順位とは

CSSのデザインの適用には、優先度がある


★下に書かれたものほど優先
CSSファイル内では下に書かれたものほど
優先されてデザインが適用される、前の色は後の色に上書きされる

★詳細なセレクタほど優先
より詳細に指定されたセレクタほどほど優先されてデザインが適用される