【CSS】初心者向け基礎知識！セレクタ・結合子・プロパティの基本！

HTML
CSS

【 2025/04/13 20:42 更新】

CSSとは？

CSS（Cascading Style Sheet）は、Webページのデザインを定義する言語です。
HTMLと組み合わせて使います。

HTMLとは

Webページの画面構造をコンピュータへ定義するためのマークアップ言語です。
詳しくは、こちらの記事をご参照ください。
【HTML】初心者向け基礎知識！HTML・作り方・タグを説明！ | こじはなNote

CSSのざっくりイメージ

【 HTMLファイル】


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>
        <style type="text/css">
            /* CSSはこんな感じに書きます！ */
            .text-red {
                color: red;
            }
        </style>
    </head>
    <body>
        <!-- HTMLの要素へCSSを反映 -->
        <p class="text-red">CSSで文字色が変わるよ！</p>
    </body>
</html>

上のHTMLをブラウザで表示すると、こんなかんじになります。

CSSで「できること」と「できないこと」

CSSで「できること」

Webページを自由に装飾できる。
Webページにある程度アニメーションを実装可能。

CSSで「できないこと」

CSS単体では何もできない。
精密なアニメーションが作れない。
細かい機能が追加できない。

CSSとHTMLを組み合わせれば、デザインは無限大！
それに、CSSだけで結構色んなアニメーションができるんだよ！

ポイント

精密なアニメーションや細かい機能も作り込む場合はJavaScriptやサーバーサイドも一緒に開発する必要があります。

CSSをHTMLへ反映させる方法大きく2つ

CSSをHTMLへ反映させる方法は大きく2つあります。

HTMLファイルに直接書く方法
CSSファイルを読み込む方法

1. HTMLファイルに直接書く

headタグ内にstyleタグを定義し、その中にCSSを書くことができます。

【 HTMLファイル】


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>

        <!-- ここにCSSを書けるよ！ -->
        <style type="text/css">
            .text-red {
                color: red;
            }
        </style>
    </head>
    <body>
        <p class="text-red">CSSで文字色が変わるよ！</p>
    </body>
</html>

2. CSSファイルを読み込む

別で用意したCSSファイルをHTMLへ読み込ませることができます。
CSSファイルは、拡張子が.cssのファイルでCSS専用のファイルです。

拡張子とは

ファイルの種類や形式を示す文字列で、ファイル名の末尾に付きます。
ドット.でファイル名と拡張子の間を区切ります。

Windowsで拡張子が表示されない場合

こちらを参考に、設定してみてださい。
Windows の一般的なファイル名拡張子

【 HTMLファイル】


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>こじはなNote</title>

        <!-- 読み込ませるCSSファイルを指定するよ！ -->
        <link rel="stylesheet" href="css/test.css">
    </head>
    <body>
        <p class="text-red">CSSで文字色が変わるよ！</p>
    </body>
</html>

【 test.css 】


.text-red {
    color: red;
}

rel="stylesheet"について
読み込ませるファイルがスタイルシートのファイルであることを示しています。
href="css/test.css"について
読み込ませるCSSのパスを指定しています。

注意

linkタグのhrefへ設定するパスは正しいパスを指定する必要があります。

パスとは

ファイルやディレクトリ（フォルダー）がある場所のことです。
パスについて詳しくは別で説明します。

「CSSファイルを読み込む」方法が一番使われている。

CSSファイルを読み込む方法が一番使われています。
理由としては、以下の利点があるからだと思います。

HTMLとCSSを明確に分けることでコードの管理がしやすい。
複数のページがある場合、共通のCSSファイルを読み込むことが可能。

こじはなも「CSSファイルを読み込む」方法で開発してるよ！

CSSセレクタの種類

セレクタとは、CSSとHTMLを紐づける名前や条件のようなものです。
CSSをHTMLへ反映させるためにセレクタは必須です。

タグセレクタ

HTMLのタグを直接指定するセレクタです。

【 test.css 】


p {
    color: red;
}

【 HTMLファイル】


<p>文字色が変わるよ！</p>
文字色が変わらないよ

このCSS・HTMLをブラウザで表示すると...

「タグ」セレクタで指定したタグの文字のみ、色が変わりました！

class（クラス）セレクタ

HTMLタグのclass属性を指定するセレクタです。
CSSでは.(クラス名)で指定します。

属性とは

HTML要素の内容や動作を調整するために追加する値のこと。
要素の開始タグ内に配置され、「名前=値」の形式で書きます。

【 test.css 】


.text-red {
    color: red;
}

【 HTMLファイル】


<p class="text-red">文字色が変わるよ！</p>
<p>文字色が変わらないよ</p>
文字色が変わらないよ

このCSS・HTMLをブラウザで表示すると...

.(クラス名)で指定したクラス属性の要素のみ、文字色が変わりました！

ポイント

クラス属性には複数クラスを指定できます。
複数クラスを指定する場合、半角スペース区切りでクラス名を指定します。
例：class="classA classB classC"

id セレクタ

HTMLタグのid属性を指定するセレクタです。
CSSでは#(id名)で指定します。
idはclassと違い、1つのidにつき、1つのHTMLタグへしか反映できません。

属性とは

HTML要素の内容や動作を調整するために追加する値のこと。
要素の開始タグ内に配置され、「名前=値」の形式で書きます。

idは1つだけ

idセレクタを指定できるHTMLタグは1つのidにつき、1つだけです。
2つ以上HTMLタグに同じidセレクタを指定すると、正常にWebページが動作しなくなる可能性があります。

【 test.css 】


#text-red {
    color: red;
}

【 HTMLファイル】


<p id="text-red">文字色が変わるよ！</p>
<p>文字色が変わらないよ</p>
文字色が変わらないよ

このCSS・HTMLをブラウザで表示すると...

#(id名)で指定したid属性の要素のみ、文字色が変わりました！

属性セレクタ

HTMLタグの属性を指定するセレクタです。
CSSでは[属性名="値"]で指定します。

属性とは

HTML要素の内容や動作を調整するために追加する値のこと。
要素の開始タグ内に配置され、「名前=値」の形式で書きます。

【 test.css 】


[test="text-red"] {
    color: red;
}

【 HTMLファイル】


<p test="text-red">文字色が変わるよ！</p>
<p>文字色が変わらないよ</p>
文字色が変わらないよ

このCSS・HTMLをブラウザで表示すると...

[属性名="値"]で指定した属性・値が合致した要素のみ、文字色が変わりました！

全指定セレクタ

HTMLタグ内の全要素を指定するセレクタです。
CSSでは*で指定します。

【 test.css 】


* {
    color: red;
}

【 HTMLファイル】


<p>文字色が変わるよ！</p>
<p>文字色が変わるよ！</p>
文字色が変わるよ！

このCSS・HTMLをブラウザで表示すると...

全要素の文字色が変わりました！

よく使うセレクタ指定テクニック「結合子」

結合子：複数指定

複数のセレクタを指定する方法です。
CSSでは、セレクタ1つ目,セレクタ2つ目で指定します。

【 test.css 】

    
    .test01,  .test02 {
        color: red;
    }

【 HTMLファイル】


<p>文字色が変わらないよ</p>
<p class="test01">文字色が変わるよ！</p>
<p>文字色が変わらないよ</p>
<p class="test02">文字色が変わるよ！</p>

このCSS・HTMLをブラウザで表示すると...

class="test01"・class="test02"が設定された要素に反映されました！

結合子：子/孫

親セレクタを限定して、子要素または孫要素のセレクタを指定する方法があります。
CSSでは、親セレクタ(半角スペース)子要素または孫要素のセレクタで指定します。

【 test.css 】


.parent p {
    color: red;
}

【 HTMLファイル】


<div class="parent">
    <p>文字色が変わるよ！</p>
    <div>
        <p>文字色が変わるよ！</p>
    </div>
</div>
<div>
    <p>文字色が変わらないよ</p>
</div>

このCSS・HTMLをブラウザで表示すると...

class="parent"内のpタグが全て反映されました！

結合子：子

親セレクタを限定して、直後の子セレクタを指定する方法です。
CSSでは、親セレクタ>子セレクタで指定します。

ポイント

親要素直後の子要素のみが指定されます。
孫要素は指定されません。

【 test.css 】


.parent>p {
    color: red;
}

【 HTMLファイル】


<div class="parent">
    <p>文字色が変わるよ！</p>
    <div>
        <p>文字色が変わらないよ</p>
    </div>
</div>
<div>
    <p>文字色が変わらないよ</p>
</div>

このCSS・HTMLをブラウザで表示すると...

class="parent"直後のpタグのみ反映されました！

結合子：後続の弟

基点となるセレクタを限定して、基点以降に存在する同じ階層の弟セレクタ全てを指定する方法です。
CSSでは、基点セレクタ~弟セレクタで指定します。

ポイント

基点セレクタ~弟セレクタでは、基点セレクタより後続の弟要素全てに反映されます。

【 test.css 】


.base~p {
    color: red;
}

【 HTMLファイル】


<p>文字色が変わらないよ</p>
<p class="base">文字色が変わらないよ</p>
<p>文字色が変わるよ！</p>
<p>文字色が変わるよ！</p>

このCSS・HTMLをブラウザで表示すると...

class="base"より後続の弟pタグが全て反映されました！

結合子：先駆け兄

基点となるセレクタを限定して、基点より先に存在する同じ階層の兄セレクタ全てを指定する方法です。
CSSでは、基点セレクタ~兄セレクタで指定します。

【 test.css 】


p:has(~ .base) {
    color: red;
}

【 HTMLファイル】


<p>文字色が変わるよ！</p>
<p>文字色が変わるよ！</p>
<p class="base">文字色が変わらないよ</p>
<p>文字色が変わらないよ</p>

class="base"より先にある兄弟pタグが全て反映されました！

:has()とは

:has()は、先に定義されている兄要素・特定の子要素をもつ親要素を指定できます。
要素を逆引きするようなイメージです。
CSSの擬似クラスの1つです。

擬似クラスとは

要素の特定の状態を指定できるCSS特有の機能です。
:hover、:active、:first-child、:has()など様々な擬似クラスが用意されています。

結合子：隣接した弟（1つ）

基点となるセレクタを限定して、基点のすぐ隣に存在する同じ階層の弟セレクタ（1つ）を指定する方法です。
CSSでは、基点セレクタ+弟セレクタで指定します。

【 test.css 】


.base+p {
    color: red;
}

【 HTMLファイル】


<p>文字色が変わらないよ</p>
<p class="base">文字色が変わらないよ</p>
<p>文字色が変わるよ！</p>
<p>文字色が変わらないよ</p>

このCSS・HTMLをブラウザで表示すると...

class="base"の隣の弟pタグのみ反映されました！

CSSの基本的なプロパティ

CSSのプロパティとは、スタイル（装飾）の種類です。
1つのセレクタに対し複数のスタイルを指定可能で、「プロパティ:値」で指定します。

プロパティ：color

文字色を指定できます。

【 test.css 】


.text-red {
    color: red;
}
.text-blue {
    color: blue;
}
.text-original {
    color: rgb(141 51 234);
}

【 HTMLファイル】


<p>通常の文字</p>
<p class="text-red">赤色の文字</p>
<p class="text-blue">青色の文字</p>
<p class="text-original">rgbで指定した文字</p>

このCSS・HTMLをブラウザで表示すると...

文字色が指定通りに変わりましたね！

color: rgb(141 51 234)について
光の三原色であるRGB（Red、Green、Blue）のrgbです。
赤・緑・青の度合いを指定して色を表現しています。

ポイント

rgbの他にも#(16進数6桁)でも表現可能です。
上の「color: rgb(141 51 234);」を16進数で指定するとしたら、「color:#8d33ea;] となる。

プロパティ：font-weight

文字の太さを指定できます。

【 test.css 】


.font-bold {
    font-weight: bold;
}

【 HTMLファイル】


<p>通常の文字</p>
<p class="font-bold">太字</p>

このCSS・HTMLをブラウザで表示すると...

太字になりました！

プロパティ：font-size

文字の大きさを指定できます。

【 test.css 】


.font-big {
    font-size: 25px;
}
.font-middle {
    font-size: 16px;
}
.font-small {
    font-size: 10px;
}

【 HTMLファイル】


<p class="font-big">大きい文字</p>
<p class="font-middle">中くらいの文字</p>
<p class="font-small">小さい文字</p>

このCSS・HTMLをブラウザで表示すると...

指定通りの文字サイズになりました！

px（ピクセル）とは

画像や画面を構成する最小単位です。
pxの他にも、rem・em・%・vw・vhなどの単位があります。

プロパティ：border

枠線を指定できます。
プロパティの記載は「border: (種類) (太さ) (色)」のように指定します。

borderプロパティ値「種類」とは

枠線の表示デザインです。
直線"solid"・二重"double"・ドット"dotted"・点線"dashed"などがあります。

【 test.css 】


.border-all {
    border: 2px solid red;
}
.border-top {
    border-top: 2px solid rgb(141 51 234);
}
.border-bottom {
    border-bottom: 2px solid blue;
}
.border-left {
    border-left: 2px solid green;
}
.border-right {
    border-right: 2px solid pink;
}

【 HTMLファイル】


<div class="border-all">枠線:全方向</div>
<br>
<div class="border-top">枠線:上</div>
<br>
<div class="border-bottom">枠線:下</div>
<br>
<div class="border-left">枠線:左</div>
<br>
<div class="border-right">枠線:右</div>

このCSS・HTMLをブラウザで表示すると...

枠線が上手に反映されました！

※border方向別の指定方法について本節の最後に説明しています。

px（ピクセル）とは

画像や画面を構成する最小単位です。
pxの他にも、rem・em・%・vw・vhなどの単位があります。

border方向別の指定方法

border: 値;	1つの値だけで全方向の枠線を指定します。
border-top: 値;	上方向の枠線を指定します。
border-bottom: 値;	下方向の枠線を指定します。
border-left: 値;	左方向の枠線を指定します。
border-right: 値;	右方向の枠線を指定します。

プロパティ：background-color

背景色を指定できます。

【 test.css 】


.bg-aqua {
    background-color: aqua;
}
.bg-original {
    background-color: rgb(226 197 255);
}

【 HTMLファイル】


<div class="bg-aqua">緑の背景色</div>
<div class="bg-original">rgbで指定した背景色</div>

このCSS・HTMLをブラウザで表示すると...

指定通りの背景色になりました！

background-color: rgb(226 197 255)について
光の三原色であるRGB（Red、Green、Blue）のrgbです。
赤・緑・青の度合いを指定して色を表現しています。

ポイント

rgbの他にも#(16進数6桁)でも表現可能です。
上の「background-color: rgb(226 197 255);」を16進数で指定するとしたら、「color:#e2c5ff;] となる。

例でdivタグを使った理由

適切な役割のタグに反映させたかったからです。
pタグは文章用のタグで、divタグは汎用的なタグで主にブロック要素として使用されます。
pタグでももちろん「background-color」は反映されます。
※「ブロック要素」については次節ご参照ください。

【 HTMLファイル】


<div class="bg-aqua">緑の背景色</div>
<div class="bg-original">rgbで指定した背景色</div>

プロパティ：display

要素の種類や表示を指定できます。
要素の種類というのは、HTMLタグの要素が分類される特性の種類のことです。
※要素の種類について本節の最後に説明しています。

【 test.css 】


.dsp-block {
    display: block;
}
.dsp-inline {
    display: inline;
}
.dsp-inline-block {
    display: inline-block;
}
.dsp-flex {
    display: flex;
}

【 HTMLファイル】


XXXXXXX
<div class="dsp-block">ブロック要素</div>
XXXXXXX
<div class="dsp-inline">インライン要素</div>
XXXXXXX
<div class="dsp-inline-block">インラインブロック要素</div>
XXXXXXX
<div class="dsp-flex">
    <div>アイテム01</div>
    <div>アイテム02</div>
</div>
XXXXXXX

上のHTMLをブラウザで表示すると、こんなかんじになります。

HTML要素の種類によって改行されたり横並びになったりするんだよ！

基本的なHTML要素の種類

block ブロック	箱のようなイメージ。要素の前後が強制的に改行される。
inline インライン	文章の一部分のイメージ。要素の前後は改行されない。
inline-block インラインブロック	blockだけど改行されないイメージ。要素の前後は改行されない。
flex フレックス	flex要素内にある複数の要素を1列に並べたり、並べ方をカスタマイズできるブロック要素。要素の前後が強制的に改行される。【詳しく知りたい方はこちら】 CSSのflexとは？Web画面必須なflexの基本的な使い方を詳しく解説！ \| こじはなNote

プロパティ：width・height

widthは要素の幅、heightは要素の高さを指定できます。
block系の要素（inlie-block・flexも含む）に効きます。

注意

inline要素には効きません。

【 test.css 】


.dsp-block {
    display: block;
    width: 200px;
    height: 200px;

    background-color: aqua;
}
.dsp-inline {
    display: inline;
    width: 200px;
    height: 200px;

    background-color: aqua;
}
.dsp-inline-block {
    display: inline-block;
    width: 200px;
    height: 80px;

    background-color: aqua;
}
.dsp-flex {
    display: flex;
    width: 150px;
    height: 150px;

    background-color: aqua;
}

【 HTMLファイル】


XXXXXXX
<div class="dsp-block">ブロック200×200</div>
XXXXXXX
<div class="dsp-inline">インライン200×200</div>
XXXXXXX
<div class="dsp-inline-block">インラインブロック200×80</div>
XXXXXXX
<div class="dsp-flex">
    150×150
    <div>アイテム01</div>
    <div>アイテム02</div>
</div>
XXXXXXX

上のHTMLをブラウザで表示すると、こんなかんじになります。

ポイント

インライン要素は効いてないことが分かります。

px（ピクセル）とは

画像や画面を構成する最小単位です。
pxの他にも、rem・em・%・vw・vhなどの単位があります。

プロパティ：text-align

文字寄せの方向として、左（left）・右（right）・中央（center）のどれかを指定できます。
block系の要素（inlie-block・flexも含む）に効きます。

注意

inline要素には効きません。

【 test.css 】


.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}

【 HTMLファイル】


<p class="text-left">左寄せ</p>
<p class="text-center">中央寄せ</p>
<p class="text-right">右寄せ</p>

このCSS・HTMLをブラウザで表示すると...

指定した文字寄せの方向が反映されています！

プロパティ：padding

内部の余白を設定できます。
block系の要素（inlie-block・flexも含む）に効きます。

【内部余白】

内側への余白です。
※デフォルトはborder含めません。

注意

inline要素には効きません。

【 test.css 】


.padding-all-01 {
    padding: 10px;

    background-color: aqua;
}
.padding-all-02 {
    padding: 10px 20px;

    background-color: bisque;
}
.padding-top {
    padding-top: 10px;

    background-color: aqua;
}
.padding-bottom {
    padding-bottom: 10px;

    background-color: bisque;
}
.padding-left {
    padding-left: 10px;

    background-color: aqua;
}
.padding-right {
    padding-right: 10px;

    background-color: bisque;
}

【 HTMLファイル】


<div class="padding-all-01">padding: 10px</div>
<div class="padding-all-02">padding: 10px 20px</div>
<div class="padding-top">padding-top: 10px</div>
<div class="padding-bottom">padding-bottom: 10px</div>
<div class="padding-left">padding-left: 10px</div>
<div class="padding-right">padding-right: 10px</div>

このCSS・HTMLをブラウザで表示すると...

padding-right以外の内容が明確に反映されています。
※paddingの指定方法について本節の最後に説明しています。

ポイント

paddingはborder箇所については含めません。

「padding-right」が反映されない理由

block要素はwidthがデフォルトで100%になります。
widthが画面いっぱいになることで、padding-right:10pxが適用されていても明確に見えないだけです。

px（ピクセル）とは

画像や画面を構成する最小単位です。
pxの他にも、rem・em・%・vw・vhなどの単位があります。

paddingの様々な指定方法

padding: A;	1つの値だけで全方向の内部余白を指定します。
padding: A B;	Aの値は上下（垂直）、Bの値は左右（水平）の内部余白を指定します。
padding-top: A;	上方向の内部余白を指定します。
padding-bottom: A;	下方向の内部余白を指定します。
padding-left: A;	左方向の内部余白を指定します。
padding-right: A;	右方向の内部余白を指定します。

プロパティ：margin

外部の余白を設定できます。
block系の要素（inlie-block・flexも含む）に効きます。

【外部余白】

外部への余白です。
※デフォルトはborder含めません。

注意

inline要素には効きません。

【 test.css 】


.margin-all-01 {
    margin: 10px;

    background-color: aqua;
}
.margin-all-02 {
    margin: 10px 20px;

    background-color: bisque;
}
.margin-top {
    margin-top: 10px;

    background-color: aqua;
}
.margin-bottom {
    margin-bottom: 10px;

    background-color: bisque;
}
.margin-left {
    margin-left: 10px;

    background-color: aqua;
}
.margin-right {
    margin-right: 10px;

    background-color: bisque;
}

【 HTMLファイル】


<div class="margin-all-01">margin: 10px</div>
<div class="margin-all-02">margin: 10px 20px</div>
<div class="margin-top">margin-top: 10px</div>
<div class="margin-bottom">margin-bottom: 10px</div>
<div class="margin-left">margin-left: 10px</div>
<div class="margin-right">margin-right: 10px</div>

このCSS・HTMLをブラウザで表示すると...

だいたい反映されていますが、少し違和感がある方もいるかもしれません。
※marginの指定方法について本節の最後に説明しています。

ポイント

marginはborder箇所については含めません。

marginが重複したら広い方が優先

marginは指定箇所が重複した場合広い指定の値が優先されます。
例えば、以下のような場合marginは50pxになります。

margin図

px（ピクセル）とは

画像や画面を構成する最小単位です。
pxの他にも、rem・em・%・vw・vhなどの単位があります。

marginの様々な指定方法

margin: A;	1つの値だけで全方向の外部余白を指定します。
margin: A B;	Aの値は上下（垂直）、Bの値は左右（水平）の外部余白を指定します。
margin-top: A;	上方向の外部余白を指定します。
margin-bottom: A;	下方向の外部余白を指定します。
margin-left: A;	左方向の外部余白を指定します。
margin-right: A;	右方向の外部余白を指定します。

まとめ

CSSはWebページのデザインを定義する言語
CSSとHTMLを組み合わせれば、装飾・アニメーションを実装できる。
CSSを反映させる方法は、「HTMLファイルに直接書く」よりも「CSSファイルを読み込む」方が管理しやすい。
タグセレクタ：HTMLのタグを直接指定するセレクタです。
classセレクタ：class属性を指定するセレクタで、.(クラス名)で指定。
idセレクタ：id属性を指定するセレクタで、#(id名)で指定。
属性セレクタ：属性を指定するセレクタで、[属性名="値"]で指定。
全指定セレクタ：全要素を指定するセレクタで、*で指定。
(結合子)複数指定：複数のセレクタを指定でき、セレクタ1つ目,セレクタ2つ目で指定。
(結合子)子/孫：子要素または孫要素のセレクタを指定でき、親セレクタ(半角スペース)子要素または孫要素のセレクタで指定。
(結合子)子：直後の子セレクタを指定でき、親セレクタ>子セレクタで指定。
(結合子)後続の弟：基点以降に存在する同じ階層の弟セレクタ全てを指定でき、基点セレクタ~弟セレクタで指定。
(結合子)先駆け兄：基点より先に存在する同じ階層の兄セレクタ全てを指定でき、基点セレクタ~兄セレクタで指定。
(結合子)隣接した弟（1つ）：基点のすぐ隣に存在する同じ階層の弟セレクタ（1つ）を指定でき、基点セレクタ+弟セレクタで指定。
color：文字色を指定できます。
font-weight：文字の太さを指定できます。
font-size：文字の大きさを指定できます。
border：枠線を指定でき、「border: (種類) (太さ) (色)」のように指定。
background-color：背景色を指定できます。
display：要素の種類や表示を指定でき、要素種類はdisplay・inline・inline-block・flexなどがある。
width・height：widthは要素の幅、heightは要素の高さを指定できます。
text-align：文字寄せの方向として、左（left）・右（right）・中央（center）のどれかを指定できる。
padding：内部の余白を設定できます。
margin：外部の余白を設定できます。

HTML
CSS

【 2025/04/13 20:42 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！

【CSS】初心者向け基礎知識！セレクタ・結合子・プロパティの基本！

CSSとは？

CSSのざっくりイメージ

CSSで「できること」と「できないこと」

CSSで「できること」

CSSで「できないこと」

CSSをHTMLへ反映させる方法大きく2つ

1. HTMLファイルに直接書く

2. CSSファイルを読み込む

「CSSファイルを読み込む」方法が一番使われている。

CSSセレクタの種類

タグ セレクタ

class（クラス）セレクタ

id セレクタ

属性 セレクタ

全指定 セレクタ

よく使うセレクタ指定テクニック「結合子」

結合子：複数指定

結合子：子/孫

結合子：子

結合子：後続の弟

結合子：先駆け兄

結合子：隣接した弟（1つ）

CSSの基本的なプロパティ

プロパティ：color

プロパティ：font-weight

プロパティ：font-size

プロパティ：border

border方向別の指定方法

プロパティ：background-color

プロパティ：display

基本的なHTML要素の種類

プロパティ：width・height

プロパティ：text-align

プロパティ：padding

paddingの様々な指定方法

プロパティ：margin

marginの様々な指定方法

まとめ

タグセレクタ

属性セレクタ

全指定セレクタ