CSS

CSSの書き方【基本文法・セレクタ・プロパティ】

CSSはスタイルシート言語と呼ばれる「言語」のひとつなので、基本の文法があります。

CSSの書き方の基本（文法・基礎知識）を整理してまとめました。

CSSの書き方ルール（文法）

CSSの書き方のテンプレートは以下のようになります。


セレクタ {
プロパティ：値
}

  • セレクタ（どこの）：デザインを変えたい場所を指定（タグ・class・idなど）
  • プロパティ（何を）：指定したセレクタの変更内容を指定（色・背景・線・余白など）
  • 値（どう変える）：プロパティをどのように変更するかを指定

CSSコード内では、半角スペース,Tab,改行を入れてもスタイルは変わらないので、見やすいように配置しながら作成できます。

【id】【Class】のルール-CSS

HTML要素全体にCSSを適用させるのではなく、更に細かくデザインする範囲を指定したい場合は、特定の要素を指定できる「id」と「class」を使います。

  • 「id」は、head,main,side,foot,などページ中で1つに特定できる場所を示すために使うため、1ページ中に1度しか使えません。
  • 「class」は、要素単位で指定するので、ページ中に何度でも使えます。

【margin】と【padding】違いと使い分け-CSS

  • 「margin」は、ボックス（枠線：border)外側の間隔（外余白）
    →要素の範囲を調整したい時に使います！
  • 「padding」は、ボックス（枠線：border)内側の間隔（内余白）
    →他の要素と距離を調整したい時に使います！

「margin」も「padding」も上（-top)・下（-bottom)・左（-left)・右（-right)それぞれ個別に指定できます。

【ブロック要素】と【インライン要素】違いと使い分け-CSS

  • 「ブロック要素」は見出しや段落など文章の骨組みになる要素で、スタイルを指定しない場合は、画面いっぱいの幅で前後が改行されたブロックを作ります。
  • 「インライン要素」は、リンクや太字など文字に意味を持たせる要素で、行の一部として扱われるため前後の改行は入りません。

「ブロック要素」の中に他の「ブロック要素（一部除く）」や「インライン要素」を含めることや、「インライン要素」の中に他の「インライン要素」を含むことはありますが、「インライン要素」の中に「ブロック要素」を含むことはありません。

「ブロック要素」や「インライン要素」でそれぞれ指定できる内容が異なるので、HTMLの定義を変えずに見た目だけ「インライン要素」⇄>「ブロック要素」に変えたい場合は以下を追加します。

  • display: inline;でインライン要素に変更
  • display: block;でブロック要素に変更

【セレクタ】の書き方-CSS

CSSでデザインする場合、まずセレクタでどの部分のデザインを変えるのか指定する必要があります。

セレクタの書き方は様々ありますのでよく使うものをピックアップして紹介します。

  • タグ名で指定
    div{〜}、p{〜}など
  • id名で指定(#の後に書く）
    #id名{〜}
  • class名で指定(.の後に書く）
    .class名{〜}
  • 属性名で指定
    ◯[属性名]{〜}、◯[属性名=”_値”]{〜}

覚えておくと便利な小技も色々あります。

  • 複数のタグ,class,idに対して同じCSSをまとめて適用させたいときは、カンマ区切りで並べれるだけでOK!
  • タグ名、id名、class名を半角スペースで区切って並べると、「◯の中の□に対してのみCSSを適用」など、並べた順番に適用範囲を絞り込み！

  • タグ名、id名、class名を半角スペースで区切って並べると、「◯の中の◯に対してのみCSSを適用」と並べた順番に適用範囲を絞り込みできます。
  • * {〜}：全要素を指定
  • ◯ * {〜}：◯の中の全要素を指定
  • □ > ◯ {〜}：1つ下の階層の子要素にのみCSSが適用
  • ◯ + ◯ {〜}：同じ階層のすぐ隣（後）の要素にのみCSSが適用
  • ◯ ~ ◯ {〜}：同階層の後につづく要素に適用
  • ◯:first-child {〜}：リストの最初の行にだけ適用
    ◯:last-child {〜}：リストの最後の行にだけ適用
  • ◯:first-letter {〜}：最初の文字にだけ適用
  • ◯:nth-child(odd) {〜}：表やリストの奇数番目の要素だけ適応
    ◯:nth-child(even) {〜}：表やリストの偶数番目の要素だけ適応
    ◯:nth-child(5n) {〜}：表やリストの5の倍数番目の要素だけ適応
  • ◯:not(◻) {〜}：◻以外の◯に適応
    ◯:not(◻):not(△){〜}など複数(何個でも）指定OK

    • リンクでは以下のセレクタをよく使います。

    • a:hover {〜}：カーソルをのせたとき
    • img:hover {〜}：画像の上にカーソルをのせたとき
    • a:active {〜}：クリックした瞬間
    • a:link {〜}：未訪問のリンク
    • a:visited {〜}：訪問済みリンク

    プロパティと値の書き方-CSS

    CSSのプロパティと値は、以下のように常にセットで記載します。

    • 文字の大きさを変える：セレクタ {font-size: ◯◯px or ◯◯em}
    • 文字の色を変える：セレクタ {color: 色名orカラーコード}
    • 文字の中央・左右寄せ：セレクタ {text-align: center or right/left}
    • 背景色を変える：セレクタ { background-color: 色名orカラーコード }
    • 線を使う：セレクタ {border: 線の太さ 色 種類}
    • 背景に画像を入れる：セレクタ {background-image:url("画像URL");}
    • マージン(間隔)を入れる：セレクタ {margin:◯◯pt;}
    • 横幅を指定する：セレクタ {width:◯◯px or ◯◯%;}

-CSS