誰でも使える決定版 CSS ガイドで CSS をマスターする |パート1

美しくデザインされた Web サイトを見て、「どうやって作ったんだろう?」と疑問に思ったことはありませんか?さて、あなたは CSS の初心者からスタイリングのスーパーヒーローに変わる旅に出ようとしています。

CSS を Web 世界のファッション デザイナーとして考えてください。HTML が構造を提供する一方で、CSS は見た目を素晴らしいものにします。

目次

No.	Section	Link
1	Understanding CSS Fundamentals	Understanding CSS Fundamentals
2	Selectors and Specificity	Selectors and Specificity
3	The Box Model Explained	The Box Model Explained
4	Flexbox: Layout Made Easy	Flexbox: Layout Made Easy
5	CSS Grid: Two-Dimensional Layouts	CSS Grid: Two-Dimensional Layouts

---

CSS の基礎を理解する

基本から始めましょう。 CSS (Cascading Style Sheets) は、Web に命を吹き込む言語です。画家のパレットのように、Web ページに色、形、視覚効果を追加するツールを提供します。

構文の基本

基本的な CSS 構文は次のもので構成されます:

• セレクター: ターゲット HTML 要素
• プロパティ: スタイルを設定する内容を指定します
• 値: スタイルの設定方法を定義します

selector {
    property: value;
}

CSS を含める方法

HTML に CSS を追加するには 3 つの方法があります:

• インライン CSS: HTML 要素内で直接
• 内部 CSS: