記事概要
CSSについて、まとめる。
CSSとは
- 正式名称は、Cascading Style Sheets
- HTMLを装飾する言語
- 拡張子は、
.css - HTMLファイルのhead要素に、CSSファイルを参照するように記載する
CSSの構成
セレクタ
CSSによる装飾を、どの部分のHTMLに適用するかを選択する
プロパティ
- セレクタで指定したHTMLの「何を変えるのか」を選択する
- 複数プロパティがある場合、順序は問わない
値
- プロパティで設定する内容を決める
- プロパティと値の間は
:で区切る - 値の後には
;を入力する
/* 下記2つは同じ意味 */
h1 {
color: red;
height: 100px;
}
h1 {
height: 100px;
color: red;
}
| コード | 説明 | |
|---|---|---|
| セレクタ | h1 | h1要素に適用する |
| プロパティ | color | 文字色を変える機能を追加する |
| 値 | red | 文字色を赤にする |
コメントアウト
コメントアウトする場合は、/*と*/で囲む
/* コメントアウト */
/* コメントアウトは
複数行に適用される */
CSSの記載方法
ファイルの記述
要素
- 指定したHTML要素全てに対して装飾する
-
要素 {}のように記載する
p {
color: yellow;
}
セレクタ
classセレクタ
- 特定のHTML要素だけに装飾をする
-
.class名 {}のように記載する
.hoge1 {
color: red;
}
idセレクタ
- 特定のHTML要素だけに装飾をする
-
#id名 {}のように記載する
#hoge2 {
color: blue;
}
CSSの特徴
リセットCSS
各ブラウザにデフォルトで設定されているCSSを打ち消す役割をもったCSS
- 各ブラウザは固有のCSSがデフォルトで指定されている
- デフォルトのCSSによって、自分で書いたCSSが意図しない表示になることがある
/* リセットCSS */
body {
font-size: 14px;
color: #333;
margin: 0 auto;
}
h1,h2,h3,h4,h5,h6,p {
padding: 10px 0;
margin: 0;
}
ul,li {
padding: 0;
margin: 0;
}
Viewport
- ブラウザで表示されている領域
- viewportを考慮した実装を行うと、画面サイズに応じて要素の大きさが