第5回 (2022/11/30) - Webスクール

参考書：P66 ~ P75

CSSの基本

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定する。

・すべて半角で書き、半角スペース・インデント・改行を入れることができる。・1つのセレクタに対して「何を」「どうする」は複数個書くことができる。・プロパティ名に応じて入れることのできる値が変わる。

<< 使用例 >>

p { color : red; }

【キーワード名一覧】

デベロッパーツールとは、Google Chromeに標準搭載されている開発者用の検証ツール（デバッグツール）で、Webサイトのパフォーマンスを向上させるための多くの機能が搭載されている。

Google Chromeでは「右クリック」→「検証」で起動。ショートカットは「Ctrl」＋「shift」＋「i」または「F12」（macは「command」＋「option」＋「i」）

【参考資料】

@charset "utf-8;

@charset：CSSファイルに使用している文字コードを示すための規則。

UTF-8：世界的にも最もポピュラーな文字コードで、Unicode用の符号化方式の1つ。

【参考資料】

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

①読み込んでいるファイルが存在するか確認する。

②「Styles」に打ち消し線（取り消し線）がないか確認する。

ユーザーエージェントスタイルシート(user agent stylesheet)とは、ブラウザ毎に定義されているデフォルトのCSS設定のこと。

これによって画像やボタン周りに隙間ができたり、ボーダーカラーが表示されたり、自分の指定したCSSより優先して反映されることがある。

このデフォルトは、自分がどんなブラウザを使っているかによっても異なる。

余白や文字サイズなどユーザーエージェントスタイルシートに指定されているCSSを全てリセットするCSSのこと。

【参考資料】