神戸から全国対応・WEB集客サポートまねきねこ企画のブログ：CSSは何から覚える？超初心者が押さえる基礎ルール8選

ホームページ制作を学び始めたとき、おしゃれなCSSなどはつい検索して出てきたコードをコピペして済ませてしまいがちです。
でも、それだけでは「なぜそう書くのか」が腹落ちせず、いざ自分で書こうとすると手が止まってしまいます。

この記事では、CSSの基礎・全体像として、最低限覚えておきたいルールを8個に整理しました。

セレクタやプロパティ、ボックスモデル、優先順位など、仕組みさえ押さえればコピペに頼らずスタイルを組み立てられるようになります。
まずは全体像をつかんで、CSSを自分の言葉で理解するヒントになればと思います。

これだけ覚えて！8つの考え方

セレクタ ― 誰に効かせるか

CSSはまず「どの要素にスタイルを当てるか」を決めます。これをセレクタと言います。

• 要素名（p, h1, div）
• クラス（.className）
• ID（#idName）
• 擬似クラス（a:hover など）

があります。

 

プロパティと値 ― 何を変えるか

セレクタで対象を決めたら、次は「何をどう変えるか」。

プロパティは変えたい項目、
値はその内容。
文法は

プロパティ: 値;
color: #333333;

という形です。
 

優先順位（カスケード） ― どのルールが勝つか

同じ要素に複数の指定があると、強い方が適用されます。
強さは

インラインスタイル
↓
 IDセレクタ
↓
クラス/擬似クラス
↓
要素セレクタ。


さらに「後から書かれた方」が勝ちます。

 

ボックスモデル ― 要素は全部箱

CSSでは、すべての要素が「箱」として扱われます。

中身（content）
内側の余白（padding）
枠線（border）
外側の余白（margin）

の4層でできています。

 

display ― 並び方を決める

要素がどう並ぶかを決めるプロパティです。
block（縦に積まれる）
inline（横に並ぶ）
flex（柔軟な並び）
grid（格子レイアウト）

が代表的です。

 

position ― 位置を決める

要素の配置方法を指定します。
static（デフォルト）
relative（元の位置からずらす）
absolute（親を基準に配置）
fixed（画面に固定）
sticky（スクロールに合わせて張り付く）

があります。

 

単位と色 ― 表現の道具箱

長さの単位は
px, em, rem, %, vw/vh など。

色は名前（red）
16進数（#ff0000）
rgb/rgba、hsl

などで指定できます。

 

継承 ― 親から子へ伝わる性質

文字色やフォントは親から子へ受け継がれますが、
marginやpaddingは継承されません。

 

これからおぼえる一覧表

CSSのルールは膨大に見えても、仕組みを支えているルールのはこの8つ。

これらを一度腹落ちさせてしまえば、コピペに頼る必要はありません。

「なぜこのコードで動くのか」を理解できるようになり、修正も応用もずっとラクになりますよ～。