WEBサイト作成中にPCやスマホやタブレットで別のCSSを当てる時の メディアクエリのメモとしてこちらでご紹介します。 1. スタイルシート（CSSファイル）に記述する link要素として記述するのではなく、CSSファイルに直接 画面ごとの別のcssを記述します。 sample.css @media screen and (min-width:480px) { /* 画面サイズが480pxまで */ p { color: red; } } @media screen and (min-width:760px) and ( max-width:960px) { /* 画面サイズが760pxから960pxまで */ p { color: red; } } @media screen and (min-width:960px) { /* 画面サイズが960px以上*/ p { color: red; } } ・ブラウザ上では上から順に読み込まれる。 ・このように小さい画面から順番に指定していく事を 「モバイルファースト」という。 以上で終了です ご覧いただきありがとうございました。
WEBサイト作成中にPCやスマホやタブレットで別のCSSを当てる時の メディアクエリのメモとしてこちらでご紹介します。
link要素として記述するのではなく、CSSファイルに直接 画面ごとの別のcssを記述します。
@media screen and (min-width:480px) { /* 画面サイズが480pxまで */ p { color: red; } } @media screen and (min-width:760px) and ( max-width:960px) { /* 画面サイズが760pxから960pxまで */ p { color: red; } } @media screen and (min-width:960px) { /* 画面サイズが960px以上*/ p { color: red; } }
・ブラウザ上では上から順に読み込まれる。 ・このように小さい画面から順番に指定していく事を 「モバイルファースト」という。
以上で終了です ご覧いただきありがとうございました。
最近、 DBに保存されているフォーム(HTMLコード)と、これまたDBに保存したユーザーの回答データを画面上に表示する、という機能に触ることがありました。 その時にHTMLエンティティ変換の煩わしさとXSSの沼にハマったので、配慮するべきポイントについてまとめておきます。 {!! $html !!}について form.blade.php // $html = '<p>XSS</p>' // {!! $html !!} // $xss = "<script>alert('かかったな!');</script>"; {!! $xss !!} ↑のようにすることで展開した変数が文字ではなくコードとして意味を持ち得るコードになる。 `` DBから取得し、変数に格納したHTMLコード この辺りは公式:エスケープしないデータの表示 ①HTMLエスケープはhtmlspecialchars($value, ENT_QUOTES, 'UTF-8', $doubleEncode) htmlspecialcharsはENT_QUOTESを付けないとシングルクォート ` をエスケープしてくれません。 $no_escape = htmlspecialchars($single_quote); echo $no_escape; // ' と表示 $escaped = htmlspecialchars($input, ENT_QUOTES, 'UTF-8'); echo $escape; // ' と表示(HTML上では ` で表示) HTMLでは値の区切りに"を使うのがセオリーなのですが、シングルクォートも使えます。 <?php $xss = '\'/><script>alert(\'XSS\');</script>'; ?> <input type="text" value='<?php echo $xss; ?>'> 誰かがうっかりシングルクォートを使ったフォームを作成してしまってもいいように、ENT_QUOTESは忘れずに付けましょう。 Laravelのe()を使うor参考にする Laravelを使っているならヘルパ関数e()を使えばこの辺りに配慮した対応をしてくれます。 使ってない方でも、e()の中身を参考にHTMLエスケープするといいでしょう。 /Illuminate/Support/helpers.php if (! function_exists('e')) { /** * Encode HTML special characters in a string. * * @param \Illuminate\Contracts\Support\Htmlable|string $value * @param bool $doubleEncode * @return string */ function e($value, $doubleEncode = true) { if ($value instanceof Htmlable) { return $value->toHtml(); } return htmlspecialchars($value, ENT_QUOTES, 'UTF-8', $doubleEncode); } } ちなみに、第３引数のエンコーディング規格を指定しない場合、各バージョンのPHPによって自動的に規格が適用されます。 公式では明示的に指定することを推奨しています。 ②htmlentities()は基本、使わない htmlentities()も文字列をHTMLエンティティにしてくれますが、コードとしての意味を持たない(XSSリスクに関係ない)文字列まで変換します。 参考:PHPのhtmlentities()とhtmlspecialchars()の違いと適切なエンティティ変換 NGではないですが、オーバースペックな関数です。 htmlspecialchars()とデコードのための関数が異なる=デコード間違いによるバグのリスクを生む可能性があるため、特別な理由がない限りは使わないでいいでしょう。 ③適切なデコード関数を使うはhtmlspecialchar_decode()を使う htmlspecialchars($value, ENT_QUOTES, 'UTF-8', $doubleEncode); でデコードした文字列はhtmlspecialchar_decode()を使ってデコードしましょう。ENT_QUOTEを忘れずに! php htmlspecialchar_decode($str, ENT_QUOTE); ②のhtmlentities()を使った文字列に対してはhtml_entity_decodeを使います。 html_entity_decode($str, ENT_QUOTE); ④DBに保存する情報はそのままでOK '><script>alert('XSS');</script>みたいな入力がされたからといって、それが即有害な文字列だとはいい切れません。 DBにvarchar型で保存されたり、CSVファイルに出力される分には実害はありません。情報はHTMLにレンダリングされるとは限らないのです。 XSSに用いられるような文字列表現が無条件に有害とはいえない、といえます。 (その意味で、サニタイズ(消毒)という言葉は不適切であり、セキュリティワードに繊細な方からは敬遠されているんだとか) 仮にDBから引っ張ってきたエスケープ文字列をvue.jsのdata()に入れて表示させると、エスケープされたままの文字列が表示されてしまいます。 文字列をエスケープした状態でDBに保存したりすると、HTML以外に出力する時全てのケースでデコードしなければならないので、対応コストが爆増します。 DBに保存する情報はそのままでOK、必要に応じてエンコード処理を加えるという考えでいきましょう。 ⑤inputのvalueに入る値にもHTMLエンティティは有効になる <input type="text" value="& "> // input内に & に変換、表示される valueに入る時もHTMLエンティティは文字列に変換されます。 初歩的なことかもしれませんが、考えすぎてエスケープ処理がゲシュタルト崩壊してくると判断が付かなくなったので、備忘録として。 参考資料 サニタイズ/入力値検証/エスケープの考え方 IPA 安全なウェブサイトの作り方 悪いサニタイズ、そして良い(?)サニタイズ、そして例外処理 PHPのhtmlentities()とhtmlspecialchars()の違いと適切なエンティティ変換 まとめ 調べれば調べるほど{!! $html !!}を使うこと自体がアンチパターンじゃないの?と思えてきますね。 とはいえ、普段FWがよしなにやってくれている部分を勉強するいい機会になりました。 参考にさせていただいた資料はとてもよくまとまっているので、併せて参照していただければと思います!
最近、 DBに保存されているフォーム(HTMLコード)と、これまたDBに保存したユーザーの回答データを画面上に表示する、という機能に触ることがありました。
その時にHTMLエンティティ変換の煩わしさとXSSの沼にハマったので、配慮するべきポイントについてまとめておきます。
// $html = '<p>XSS</p>' // {!! $html !!} // $xss = "<script>alert('かかったな!');</script>"; {!! $xss !!}
↑のようにすることで展開した変数が文字ではなくコードとして意味を持ち得るコードになる。 `` DBから取得し、変数に格納したHTMLコード
この辺りは公式:エスケープしないデータの表示
htmlspecialcharsはENT_QUOTESを付けないとシングルクォート ` をエスケープしてくれません。
ENT_QUOTES
$no_escape = htmlspecialchars($single_quote); echo $no_escape; // ' と表示 $escaped = htmlspecialchars($input, ENT_QUOTES, 'UTF-8'); echo $escape; // ' と表示(HTML上では ` で表示)
HTMLでは値の区切りに"を使うのがセオリーなのですが、シングルクォートも使えます。
"
<?php $xss = '\'/><script>alert(\'XSS\');</script>'; ?> <input type="text" value='<?php echo $xss; ?>'>
誰かがうっかりシングルクォートを使ったフォームを作成してしまってもいいように、ENT_QUOTESは忘れずに付けましょう。
Laravelを使っているならヘルパ関数e()を使えばこの辺りに配慮した対応をしてくれます。 使ってない方でも、e()の中身を参考にHTMLエスケープするといいでしょう。
e()
if (! function_exists('e')) { /** * Encode HTML special characters in a string. * * @param \Illuminate\Contracts\Support\Htmlable|string $value * @param bool $doubleEncode * @return string */ function e($value, $doubleEncode = true) { if ($value instanceof Htmlable) { return $value->toHtml(); } return htmlspecialchars($value, ENT_QUOTES, 'UTF-8', $doubleEncode); } }
ちなみに、第３引数のエンコーディング規格を指定しない場合、各バージョンのPHPによって自動的に規格が適用されます。
公式では明示的に指定することを推奨しています。
htmlentities()も文字列をHTMLエンティティにしてくれますが、コードとしての意味を持たない(XSSリスクに関係ない)文字列まで変換します。
参考:PHPのhtmlentities()とhtmlspecialchars()の違いと適切なエンティティ変換
NGではないですが、オーバースペックな関数です。 htmlspecialchars()とデコードのための関数が異なる=デコード間違いによるバグのリスクを生む可能性があるため、特別な理由がない限りは使わないでいいでしょう。
htmlspecialchars($value, ENT_QUOTES, 'UTF-8', $doubleEncode); でデコードした文字列はhtmlspecialchar_decode()を使ってデコードしましょう。ENT_QUOTEを忘れずに! php htmlspecialchar_decode($str, ENT_QUOTE);
htmlspecialchars($value, ENT_QUOTES, 'UTF-8', $doubleEncode);
htmlspecialchar_decode()
ENT_QUOTE
php htmlspecialchar_decode($str, ENT_QUOTE);
②のhtmlentities()を使った文字列に対してはhtml_entity_decodeを使います。
htmlentities()
html_entity_decode($str, ENT_QUOTE);
'><script>alert('XSS');</script>みたいな入力がされたからといって、それが即有害な文字列だとはいい切れません。
'><script>alert('XSS');</script>
DBにvarchar型で保存されたり、CSVファイルに出力される分には実害はありません。情報はHTMLにレンダリングされるとは限らないのです。
XSSに用いられるような文字列表現が無条件に有害とはいえない、といえます。 (その意味で、サニタイズ(消毒)という言葉は不適切であり、セキュリティワードに繊細な方からは敬遠されているんだとか)
仮にDBから引っ張ってきたエスケープ文字列をvue.jsのdata()に入れて表示させると、エスケープされたままの文字列が表示されてしまいます。
文字列をエスケープした状態でDBに保存したりすると、HTML以外に出力する時全てのケースでデコードしなければならないので、対応コストが爆増します。
DBに保存する情報はそのままでOK、必要に応じてエンコード処理を加えるという考えでいきましょう。
<input type="text" value="& "> // input内に & に変換、表示される
valueに入る時もHTMLエンティティは文字列に変換されます。
初歩的なことかもしれませんが、考えすぎてエスケープ処理がゲシュタルト崩壊してくると判断が付かなくなったので、備忘録として。
サニタイズ/入力値検証/エスケープの考え方 IPA 安全なウェブサイトの作り方 悪いサニタイズ、そして良い(?)サニタイズ、そして例外処理 PHPのhtmlentities()とhtmlspecialchars()の違いと適切なエンティティ変換
調べれば調べるほど{!! $html !!}を使うこと自体がアンチパターンじゃないの?と思えてきますね。
{!! $html !!}
とはいえ、普段FWがよしなにやってくれている部分を勉強するいい機会になりました。
参考にさせていただいた資料はとてもよくまとまっているので、併せて参照していただければと思います!
ページのテーマ色とかをいろんな要素で使いたい時に便利なCSS変数。 例えば、ページのテーマ色がオレンジだった場合、全ての箇所にオレンジと記載してもいいが、変更となった場合は全ての箇所を修正する必要が出てくる。 しかし、CSS変数を使うと１箇所直すだけで、その変数が割り当てられているところに反映される。 以下、サンプルコード /*宣言方法は以下のように'--'で始める*/ /*使い方はvar()の()ないに入れ込む*/ h1{ --my-color: orange; color: var(--my-color); } /*これでh1にオレンジが割り当てられる。 また、何も設定がないときの指定もできる*/ h1{ color: var(--my-color,blue); } /*これは何も設定がされていなかったらblueを割り当てて、と言うこと*/ ただ、<h1>で宣言した変数を<p>では使えない。 つまり h1{ --my-color: orange; color: var(--my-color); } p{ color: var(--my-color); } としても<p>にはオレンジが割り当てられない。 どうすれば共通して使えるかと言うと、 方法は２つある。 ①共通の親要素で宣言する。 ②文書全体のhtmlで宣言する。 ①の場合は、htmlが以下のようになっていた場合、 <body> <h1>タイトル</h1> <p>本文</p> </body> 共通する親要素である<body>で宣言すれば両方ともに共通する変数を使える。 body{ --my-color: orange; } としておくと、<body>の中にある要素には、--my-colorが使える。 ②の方法はCSSファイル内で :root{ --my-color: orange; } と言うように宣言すると、<body>,<h1>,<p>の全てというか、htmlにある全ての要素に--my-colorが使える。 また変数はプロパティの値に使えるのであって、プロパティ名には使えない 。 例えば、 --my-margin-top: margin-top; はできず、 --my-margin-top: 40px; margin-top: var(--my-margin-top); こういう使い方をしなければならないということ。 以下、まとめサンプルコード :root{ --my-hue: 200; } body{ background: hsl(var(--my-hue), 40%, 95%); } h1,p{ color: hsl(var(--my-hue), 35%, 55%); } .btn{ color: white; width: 100px; padding: 8px; border-radius: 4px; text-align: center; background: hsl(var(--my-hue), 50%, 50%); background: hsl(calc(var(--my-hue) + 180), 50%, 50%); /* 180°変えて補色の関係にし、見やすいように。 */ background: hsl(calc(var(--my-hue) + 60), 50%, 50%); /* 完全に穂色はきついから、少しずらした色に */ }
ページのテーマ色とかをいろんな要素で使いたい時に便利なCSS変数。 例えば、ページのテーマ色がオレンジだった場合、全ての箇所にオレンジと記載してもいいが、変更となった場合は全ての箇所を修正する必要が出てくる。 しかし、CSS変数を使うと１箇所直すだけで、その変数が割り当てられているところに反映される。
以下、サンプルコード
/*宣言方法は以下のように'--'で始める*/ /*使い方はvar()の()ないに入れ込む*/ h1{ --my-color: orange; color: var(--my-color); } /*これでh1にオレンジが割り当てられる。 また、何も設定がないときの指定もできる*/ h1{ color: var(--my-color,blue); } /*これは何も設定がされていなかったらblueを割り当てて、と言うこと*/
ただ、<h1>で宣言した変数を<p>では使えない。 つまり
<h1>
<p>
h1{ --my-color: orange; color: var(--my-color); } p{ color: var(--my-color); }
としても<p>にはオレンジが割り当てられない。 どうすれば共通して使えるかと言うと、 方法は２つある。
①共通の親要素で宣言する。 ②文書全体のhtmlで宣言する。
①の場合は、htmlが以下のようになっていた場合、
<body> <h1>タイトル</h1> <p>本文</p> </body>
共通する親要素である<body>で宣言すれば両方ともに共通する変数を使える。
<body>
body{ --my-color: orange; }
としておくと、<body>の中にある要素には、--my-colorが使える。
②の方法はCSSファイル内で
:root{ --my-color: orange; }
と言うように宣言すると、<body>,<h1>,<p>の全てというか、htmlにある全ての要素に--my-colorが使える。
また変数はプロパティの値に使えるのであって、プロパティ名には使えない 。 例えば、
--my-margin-top: margin-top;
はできず、
--my-margin-top: 40px; margin-top: var(--my-margin-top);
こういう使い方をしなければならないということ。
以下、まとめサンプルコード
:root{ --my-hue: 200; } body{ background: hsl(var(--my-hue), 40%, 95%); } h1,p{ color: hsl(var(--my-hue), 35%, 55%); } .btn{ color: white; width: 100px; padding: 8px; border-radius: 4px; text-align: center; background: hsl(var(--my-hue), 50%, 50%); background: hsl(calc(var(--my-hue) + 180), 50%, 50%); /* 180°変えて補色の関係にし、見やすいように。 */ background: hsl(calc(var(--my-hue) + 60), 50%, 50%); /* 完全に穂色はきついから、少しずらした色に */ }
100日チャレンジの351日目 twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 351日目は、 おはようございます昨日1日でやったこと⇩●ブログ1記事作成●プログラミング学習350日目 2.0h・架空LP17日目1.0h(@ririru_123)・ipad版の制作物部分作成・Udemy:フロントエンド講座1.0h時短と、別垢でやる意味がなくなってきたので、こちらに統合#早起きチャレンジ#100DaysOfCode— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) June 20, 2020
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。 すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 351日目は、
おはようございます昨日1日でやったこと⇩●ブログ1記事作成●プログラミング学習350日目 2.0h・架空LP17日目1.0h(@ririru_123)・ipad版の制作物部分作成・Udemy:フロントエンド講座1.0h時短と、別垢でやる意味がなくなってきたので、こちらに統合#早起きチャレンジ#100DaysOfCode— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) June 20, 2020
おはようございます昨日1日でやったこと⇩●ブログ1記事作成●プログラミング学習350日目 2.0h・架空LP17日目1.0h(@ririru_123)・ipad版の制作物部分作成・Udemy:フロントエンド講座1.0h時短と、別垢でやる意味がなくなってきたので、こちらに統合#早起きチャレンジ#100DaysOfCode
こんにちは、古の腐女子です。 古の腐女子なので、同人サイトを作っていた経験があり（今は亡きジオシティーズで作っていました。ロリポップは永遠の憧れです）、 HTMLの知識はあるものの何分知識が古すぎる(m*10 + n 年以上前)ので、ドットインストールで再勉強しています。 若い頃とは違って、勉強したことが走馬灯のように左から右に通り過ぎていくので、 復習と理解の促進のために、アウトプットしておきます。 知識あるからと調子に乗って、ドットインストールのHTMLを学ぼうコーナーを素通りしてJavaScriptで三択クイズとか作ってたら、チンプンカンプンすぎてえらいことになったので、自分の能力を適切に理解する過程は本当に必要ですね。 はじめてのHTML はじめてのCSS はじめてのHTML headerとfooter section リスト表現( ol, ul, li ) anchor MDN headerとfooter ずらずらと並んだテキストを意味のあるかたまりにまとめるタグ。 headerタグはheadタグとよく混同されることがあるのですが、headタグとは違います。 ちなみにheaderタグやfooterタグは、文書構造によってはひとつの文書の中に複数書くこともあります。 sectionタグ ずらずらと並んだテキストを意味のあるかたまりにまとめるタグ。 リスト表現( ol, ul, li ) どれがどれ？となりやすいのですがolもulもliも略語です。 ol >>> ordered list ul >>> unordered list li >>> list item liはlist itemであることを明示するために利用するので、olやulで囲うことが多いでしょう。 HTMLを書くときは文書の意味を考えて適切なタグを囲うことが求められるので、横並びであっても積極的にリストを使っていきましょう。 anchor リンクを貼る時にaタグを使うのですが、これの意味はanchorです。 私が初めてaタグを使ったのは小学生のときだったのですが、「anchorのaだよ」と教えてくれる人はどこにも居らず、 「まあ、そんなもんだろ～～」と処理していたので、晴天の霹靂です。 「ごん、お前だったのか……」のテイストで驚きました。「a, お前anchorのaだったのか……」 MDN 仕様の説明をしてくれる優しいサイト。 私が子供のときなかったよね？と確認すると、2005年かららしい。 MDN はじめてのCSS セレクタとプロパティ divタグ 役に立ちそうなcssタグ セレクタとプロパティ なんちゃって独学なので、万事が万事「まあ、こんなもんだろ～～」と処理しているので、用語の再確認をします。 セレクタが「どこに」で、プロパティが「どのようなスタイルを」です。 divタグ レイアウトのためのタグです。 識別子を付けるためにクラスをつけます。 class属性を付けた要素は.クラス名で表現することができます。 index.html <div class="container"> styles.css .container { background-color: pink; margin-left: auto; margin-right: auto; } ちなみに、divで使った領域を中央寄せにしたい場合、この左右のmarginをautoに設定するテクニックがよくつかわれます。 Flexboxで横並びにする 横に並べたい要素があったら、Flexboxを使うといいです。 その親要素にプロパティを追加しましょう。 index.html <div class="container"> <div class="icon"> ... </div> <div class="info"> ... </div> styles.css .container { display :flex; } 基本セレクタ早見表 #id名 .classs名 〇,〇,〇, (カンマ区切りで複数のセレクタを書く) 複数のタグやクラスに対して同じCSSをまとめて適用させたいときは、カンマ区切りで並べます。タグ名やclass名、id名を一緒に並べてもOKです。 ◯ ◯ ◯(半角スペース区切りで子孫セレクタ) 半角スペースで区切って並べることで「◯の中の◯に対してのみCSSを適用」というようなことができます。このように絞り込むような指定は「子孫セレクタ」と呼ばれます。 ◯ > ◯ (「>」で子要素にのみ適用) 半角スペース区切りだと、子要素の中の要素（孫要素）にまでスタイルが適用されますが、「>」をつけることで1つ下の階層の子要素にのみCSSが適用されるようになります。 CSSのセレクタとは？覚えておきたい25種類と書き方 CSSのリファレンスサイト 基本を学んだらあとはいろんなタグを知っていけばいいと思うので、リファレンスサイトや本で情報収集しようと思っています。 おすすめの情報収集方法があれば教えていただけると嬉しいです～。 （以下は参考にする予定のサイトです） w3schools MDN CSSリファレンス
こんにちは、古の腐女子です。 古の腐女子なので、同人サイトを作っていた経験があり（今は亡きジオシティーズで作っていました。ロリポップは永遠の憧れです）、 HTMLの知識はあるものの何分知識が古すぎる(m*10 + n 年以上前)ので、ドットインストールで再勉強しています。
若い頃とは違って、勉強したことが走馬灯のように左から右に通り過ぎていくので、 復習と理解の促進のために、アウトプットしておきます。
知識あるからと調子に乗って、ドットインストールのHTMLを学ぼうコーナーを素通りしてJavaScriptで三択クイズとか作ってたら、チンプンカンプンすぎてえらいことになったので、自分の能力を適切に理解する過程は本当に必要ですね。
はじめてのHTML はじめてのCSS
ずらずらと並んだテキストを意味のあるかたまりにまとめるタグ。 headerタグはheadタグとよく混同されることがあるのですが、headタグとは違います。 ちなみにheaderタグやfooterタグは、文書構造によってはひとつの文書の中に複数書くこともあります。
ずらずらと並んだテキストを意味のあるかたまりにまとめるタグ。
どれがどれ？となりやすいのですがolもulもliも略語です。
liはlist itemであることを明示するために利用するので、olやulで囲うことが多いでしょう。
HTMLを書くときは文書の意味を考えて適切なタグを囲うことが求められるので、横並びであっても積極的にリストを使っていきましょう。
リンクを貼る時にaタグを使うのですが、これの意味はanchorです。 私が初めてaタグを使ったのは小学生のときだったのですが、「anchorのaだよ」と教えてくれる人はどこにも居らず、 「まあ、そんなもんだろ～～」と処理していたので、晴天の霹靂です。 「ごん、お前だったのか……」のテイストで驚きました。「a, お前anchorのaだったのか……」
仕様の説明をしてくれる優しいサイト。 私が子供のときなかったよね？と確認すると、2005年かららしい。 MDN
なんちゃって独学なので、万事が万事「まあ、こんなもんだろ～～」と処理しているので、用語の再確認をします。 セレクタが「どこに」で、プロパティが「どのようなスタイルを」です。
レイアウトのためのタグです。 識別子を付けるためにクラスをつけます。
class属性を付けた要素は.クラス名で表現することができます。
<div class="container">
.container { background-color: pink; margin-left: auto; margin-right: auto; }
ちなみに、divで使った領域を中央寄せにしたい場合、この左右のmarginをautoに設定するテクニックがよくつかわれます。
横に並べたい要素があったら、Flexboxを使うといいです。 その親要素にプロパティを追加しましょう。
<div class="container"> <div class="icon"> ... </div> <div class="info"> ... </div>
.container { display :flex; }
#id名
.classs名
〇,〇,〇, (カンマ区切りで複数のセレクタを書く)
複数のタグやクラスに対して同じCSSをまとめて適用させたいときは、カンマ区切りで並べます。タグ名やclass名、id名を一緒に並べてもOKです。
◯ ◯ ◯(半角スペース区切りで子孫セレクタ)
半角スペースで区切って並べることで「◯の中の◯に対してのみCSSを適用」というようなことができます。このように絞り込むような指定は「子孫セレクタ」と呼ばれます。
◯ > ◯ (「>」で子要素にのみ適用)
半角スペース区切りだと、子要素の中の要素（孫要素）にまでスタイルが適用されますが、「>」をつけることで1つ下の階層の子要素にのみCSSが適用されるようになります。
CSSのセレクタとは？覚えておきたい25種類と書き方
基本を学んだらあとはいろんなタグを知っていけばいいと思うので、リファレンスサイトや本で情報収集しようと思っています。 おすすめの情報収集方法があれば教えていただけると嬉しいです～。 （以下は参考にする予定のサイトです）
w3schools MDN CSSリファレンス
