【入門 #2】CSSまとめ

はじめに

こんにちは。このページは初学者である僕が以下の本を消化したものと不明だった点や補足情報との融合物です。

• ｢ゼロから覚えるHTML&CSSの基本｣

基礎の基礎

HTML と CSS はWebサイトを作るための言語であり、厳密にはプログラミング言語ではないです。

• HTML : Webページの構造を指定する言語
• CSS : Webページのデザインを指定する言語

CSSの用語

ここで使われる用語について軽く説明します。

css

p {color: aquamarine}

上記の p は セレクタ でスタイルの適用対象、今回は <p> タグの意味、color はプロパティ、aquamarineは 値 です。詳細はW3SchoolsのCSSリファレンスを見てください。CSS Reference

セレクタの分類

• 【要素型セレクタ】 p, h1 など HTML のタグ名を示す
• 【idセレクタ】#myHeader など # の後に書き id を示す
• 【classセレクタ】.intro など . の後に書き class を示す
• 【疑似クラス】a: hover カーソルが乗っている状態 などを示す
• 【疑似要素】h1::first-letter h1の1文字目 などを示す
• 【子孫セレクタ】p span #marked などスペースを入れて子孫を示す
• 【複数の要素の指定】p,span,#marked などカンマを入れる
• 【全称セレクタ】* この記号ですべての要素を示す

CSS を HTML に適用する

主に2種類の方法があります。

インラインスタイルシート

html

<h3 style="color: red">学割について</h3>

このように HTML に直接記述できますが効率が悪いです。知っておいて損はないと思いますが。

リンキングスタイルシート

html

<link rel="stylesheet" href="sample.css">

これを HTML の head に記述します。

css

@charset "UTF-8";
/*h3 {color: blue}*/

CSS側では文字コードを指定して終わりです。特に書く順番とかはないです。また /*なんちゃら*/ がコメントです。

覚えるべきプロパティ

書くのやめました。公式リファレンスを参照する方が圧倒的に効率的です。CSS Reference

ボックス概念

CSS のレイアウトを指定するための概念について、下記4つを指定します。

https://www.w3schools.com/css/css_boxmodel.asp より

レスポンシブデザイン

html

<meta name="viewport" content="width=device-width, initial-scale=1">

css

@media (max-width: 600px) {

}

それぞれ書き加えます。ここでは端末の横幅が600px以下の場合 @media 内のコードが適用されます。