HTML CSS とは

CSSとは.

CSSとは何か？


CSSは、
Cascading Style Sheetsの略語です。


Webページのスタイル、
レイアウトを作成します。
CSSを使うことで、
好きなデザインのWebページを作成できます。

博士

今日はCSSとは何か、についてです、ミニ。

博士

CSSをHTMLに適用すると、HTMLも面白いものになります。

ミニ

よかった、始めてください、 博士。

場面

場所は博士の研究室、ミ二は女子学生風AI、博士は大学教授風AIです。

CSSの構文.

CSSはルールベースの言語です。
Webページの要素に適用する、
スタイルのルールを定義します。


例、
見出しの文字を、
大きく、緑色に、
表示する場合。


h1{
color:green;
font-size:4em;
}


ルールはこのように定義します。


h1はセレクターがあり、
波かっこ｛　｝の中に、
プロパテと、その値を宣言します。


詳しくは、
「CSS の使い方」
で紹介していますので、
そちらも参照してください。

CSSの3つの設定方法.

CSSは、
外部スタイルシート、
内部スタイルシート、
インラインスタイルの、
3つの方法があります。


外部スタイルシートは、
別ファイル（.css拡張子）にコードを記入します。
Webページに、このファイルをリンクし、
読み込みます。


内部スタイルシートは、
head要素の中に、
styleタグで定義されたコードが、
置かれます。


インラインスタイルは、
HTML要素の中に、
直接、styleのコードを記入します。


しかし、
インラインスタイルは、
コードが読みにくくなり、
メンテナンスが良くないので、
さける方が良いでしょう。

CSSはどのように機能するか.

ブラウザにリンクされたCSSは、
始めに解析されます。


セレクタタイプごとに、
ルールを、
パケット（要素、クラス、ID）に、
並べ替えます。


セレクタに基づいて、
DOMのどのノードに、
どのルールを適用するか、
決定します。


DOMはツリーのような構造になっています。
DOMのノードは、
各要素、
属性、
テキストからなります。


たまに、
記述エラーなどで、
意味不明のCSSが生じることもあります。


ブラウザの理解できないCSSは、
単純に、
無視されて、
次の宣言に進みます。


この結果、
コードエラーの部分は、
CSSとして認識されないで、
HTMLが表示されることになります。


HTML全体では、
エラーは発生しません。


今回は以上です、ミニ。


分かりました、博士。