CSSの基本 - To Be Continued

コードの中の文節・文章は、書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座のテキスト原稿を改変している。

CSS を適用させるには、3つの方法がる。 (P89)

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

    <head>
        <style>
            h1 { color: #f00; }
            p { font-size: 10px; }
        </style>
    </head>

    <body>
        <h1 style="color: #f00;">XXX</h1> }
        <p style="font-size: 10px;">YY ZZZ</p>
    </body>

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座のおすすめの方法は「CSSファイルを読み込んで適用させる」です。

ゆくゆくは React を使えるようになりたいと考えている。 React の JSX ではどの記法がおすすめなのでしょう?

CSSコードを書く

1行目には @charset "utf-8"; と書く。 (P92) この宣言より前にコードを書くとエラーになる。試しに次のコードを書いてみる。

* {
  margin: 0;
  padding: 0;
}
@charset "utf-8";

body {
  background-color: #fffeee;
}
h1 {
  color: #0bd;
}
P {
  font-size: 20px;
}

VSCode に、 at-rule or selector expectedcss(css-ruleorselectorexpected) と表示される。

ブラウザの開発ツールでは、エラーの表示は見つからない。

mdnを調べると @charset "UTF-8"; と大文字で書かれていた。大文字、小文字の違いに気を使わなくてよいらしい。

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座では、文字化けを防ぐために使うと書かれている。

MDN では別の理由が書かれている。

この at-規則は、content のような CSS プロパティで非 ASCII 文字を使う際に便利です。

セレクター、プロパティ、値の組み合わせで「どの部分の何をどう変えるか」を指定する。 (P94)

P {
  font-size: 20px;
}

上記の場合は、HTMLファイルのすべての <p> タグのフォントサイズを絶対指定で 20px に変える。単位の指定には、相対指定の rem なども使われる。 (P96)

Webはスマートフォンで見る時代。サイズの指定は相対指定で行われるのが主流?

rem : html要素に指定されたサイズを基準とした単位

パソコンを使ってGoogle Chrome で確認を行っている。次の HTML と CSS を指定し、検証ツールで確認する。 2つの文章は 20px となっている。

    <p class="case1">食う、寝る、遊ぶ。</p>
    <p class="case2">遊ぶ、寝る、食う</p>

.case1 {
  font-size: 20px;
}
.case2 {
  font-size: 1.25rem;
}

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座では半角空白で区切る選択方法が書かれている。

書籍を離れて MDN を参考にまとめる。

隣接兄弟結合子は + を用いる。

一般兄弟結合子は ~ を用いる。

子結合子は > を用いる。

子孫結合子は (半角空白)を用いる。

列結合子は実験的機能で || を用いる。

これらの 結合子 のコード例は上記のリンクを見ること。私は理解できていない。