ITコース CSS基礎 019_HelloCSS - 趙健の技術ノート

CSSとは？

CSS（Cascading Style Sheets、カスケーディングスタイルシート）はHTMLと同様に、本当のプログラミング言語ではなく、マークアップ言語でもありません。CSSはスタイルシート言語であり、HTML要素にスタイルを追加し、HTMLドキュメントの外観を記述し、HTMLドキュメント要素の色、サイズ、フォント、レイアウトなどを制御するために使用されます。

CSSはWeb開発の重要な構成要素であり、美しく使いやすいWebページを作成するのに役立ちます。

CSSの基本構造

CSSスタイルはセレクタとプロパティで構成されます。セレクタはスタイルを適用するHTML要素を選択するために使用されます。プロパティはスタイルの値を指定するために使用されます。

例：

1
p {
2
    color: red;
3
}

効果：

例の効果

構造解析：

例の効果

[!まとめ]
セレクタ（Selector） HTML要素の名前はルールセットの先頭にあります。スタイルを追加する必要がある1つ以上の要素を選択します（この例では<p>要素）。異なる要素にスタイルを追加するには、セレクタを変更するだけです。
宣言（Declaration） color: red;のような単一のルールで、スタイルを追加する要素のプロパティを指定します。CSS宣言は常にセミコロン;で終わり、常に中括弧{}で囲まれます。
プロパティ（Properties） HTML要素のスタイルを変更する方法（この例ではcolorは<p>要素のプロパティ）。CSSでは、作成者がどのプロパティを変更してルールを変更するかを決定します。
プロパティの値（Property value）プロパティの右側、コロンの後ろがプロパティの値で、指定されたプロパティの多くの外観から1つの値を選択します（red以外にもcolorに使用できる多くのプロパティ値があります）。

CSSを参照する方法

インライン参照：

CSS コードをstyle属性を使用してHTMLタグ内に直接記述します。

インライン参照は、スタイルコードをHTMLタグ内に直接記述する、シンプルで迅速な方法です。インライン参照の利点は便利で迅速であり、少量のスタイルに適しています。ただし、インライン参照には以下の欠点もあります：

スタイルの再利用に不利で、メンテナンスが困難。
HTMLファイルが混乱し、分離の原則に従っていない。
ブラウザキャッシュに不利で、パフォーマンスに影響。

例：

1
  <div style="color: red; font-size: 16px;">これは赤いフォントです</div>

効果：

例の効果

内部参照：

CSS コードを<style>タグ内に記述し、<head>タグ内に配置します。

内部参照は、HTMLファイルのstyleタグにスタイルコードを記述する、比較的妥協的な方法です。内部参照の利点は、スタイルとHTMLファイルが分離され、メンテナンスが容易になることです。さらに、内部参照はブラウザキャッシュを利用して読み込み速度を向上させることができます。ただし、内部参照には以下の欠点もあります：

ページ読み込み時に追加のネットワークリクエストが必要で、効率が比較的低い。
スタイルとHTMLファイルにはまだある程度の結合がある。

例：

1
div {
2
    color: red;
3
    font-size: 16px;
4
}

1
  <div>これは赤いフォントです</div>

効果：

例の効果

外部参照：

CSS コードを別のCSSファイルに記述し、linkタグを使用してインクルードします。

外部参照は、スタイルコードを別のCSSファイルに記述する、より標準的な方法です。外部参照の利点は、スタイルとHTMLファイルが完全に分離され、メンテナンスが容易になることです。さらに、外部参照はCDNを通じて高速化でき、ファイルの読み込み速度を向上させます。外部参照は圧縮とマージもサポートし、ファイルサイズを削減します。ただし、外部参照には以下の欠点もあります：

ページ読み込み時に追加のネットワークリクエストが必要だが、最適化可能。
外部リソースに依存し、ブロッキングや読み込み失敗を引き起こす可能性がある。
開発中に外部ファイルへの複数のリクエストが必要になる場合がある。

例：

1
<head>
2

3
<!-- 現在のディレクトリで、サブフォルダstylesのスタイルシートファイルを参照 -->
4
<link rel="stylesheet" href="style.css" />
5

6
<!-- 現在のディレクトリで、サブフォルダstyles内のサブフォルダgeneralのスタイルシートファイルを参照 -->
7
<link rel="stylesheet" href="/style.css" />
8

9
<!-- 現在のディレクトリの親ディレクトリで、サブフォルダstylesのスタイルシートファイルを参照 -->
10
<link rel="stylesheet" href="../styles/style.css" />
11

12
</head>

1
div {
2
    color: red;
3
    font-size: 16px;
4
}

効果：

例の効果

カスケード順序と優先度

CSSカスケード順序（Cascading Order）と詳細度（Specificity）は、CSSの表示スタイル効果を決定する2つの重要な要素です。

カスケード順序：CSSカスケード順序は、スタイルルールの重みを定義し、高いものから低いものへの順序は次のとおりです。

重要性（!important）： !importantで宣言されたスタイルルールは、最も高い優先度を持ちます。ただし、乱用するとメンテナンスが困難になるため、慎重に使用する必要があります。
作成者スタイル（Author Styles）： Web開発者によって定義されたスタイルで、外部スタイルシート、内部スタイルシート、インラインスタイルを含みます。優先度はユーザースタイルとユーザーエージェントスタイルの間です。
ユーザースタイル（User Styles）： ブラウザプラグインやユーザー設定を通じてユーザーが設定したスタイルで、ユーザーエージェントスタイルより優先度が高い（フォントプラグインなど）。
ユーザーエージェントスタイル（User Agent Styles）： ブラウザ自体のデフォルトスタイルで、最も低い優先度を持ちます（フォントなど）。

優先度：同じレベルの複数のルール、または競合する複数のスタイルルールがある場合、CSSは優先度に従ってスタイル効果を表示します。

インラインスタイル（Inline Styles）： HTMLタグ内で指定されたスタイルは、最も高い優先度を持ちます。
IDセレクタ（id）： IDセレクタで指定されたスタイル（例：#header）。
クラスセレクタ、属性セレクタ、疑似クラスセレクタ（class）： クラスセレクタで指定されたスタイル（例：.container）。属性セレクタで指定されたスタイル（例：[type="text"]）。疑似クラスセレクタで指定されたスタイル（例：:hover）。
要素セレクタ： HTML要素名を指定するセレクタ（例：div、p）。

優先度が同じ場合、後で定義されたルールの方が優先度が高くなります。

例：

1
#header {
2
    color: red;
3
}
4

5
.container p {
6
    color: blue;
7
}
8

9
p {
10
    color: green;
11
}

CSS継承

CSS継承とは、子要素が親要素から一部のプロパティ値を継承する特性を指します。継承はCSSの重要な機能であり、スタイルの記述を簡素化し、コードの保守性を向上させることができます。すべてのCSSプロパティが継承できるわけではなく、一部のプロパティのみが継承可能として定義されています。

CSS継承プロパティには主に以下が含まれます：

テキストプロパティ：font-family、font-size、font-weight、font-style、color、text-decoration、text-align、line-height、letter-spacing、word-spacing
カラープロパティ：background-color、border-color、color、outline-color
ボーダープロパティ：border-width、border-style、border-color
ボックスモデルプロパティ：margin、padding、width、height、display、float、position、z-index

継承されないCSSプロパティには、例えば、width、height、margin、paddingなどのボックスモデル関連プロパティ、位置指定（position）、フロート（float）、フロートクリア（clear）などのレイアウト関連プロパティがあります。

一般的なCSSプロパティとその機能：

基本プロパティ width、height：要素の幅と高さを設定。 margin：要素のマージンを設定。 padding：要素のパディングを設定。 color、background-color：要素の色と背景色を設定。 font-size、font-family、font-weight、font-style：要素のフォントサイズ、フォントファミリー、フォントウェイト、フォントスタイルを設定。

レイアウトプロパティ display：要素の表示モードを設定。 float：要素のフロートモードを設定。 position：要素の位置を設定。 top、left、right、bottom：要素の上、左、右、下の位置を設定。 z-index：要素のスタッキング順序を設定。

テキストプロパティ text-align：要素のテキスト配置を設定。 text-decoration：要素のテキスト装飾を設定。 line-height：要素の行の高さを設定。 font-variant：要素のフォントバリアントを設定。 text-transform：要素のテキスト変換を設定。 letter-spacing、word-spacing：要素の文字間隔と単語間隔を設定。

ボーダープロパティ border：要素のボーダースタイルを設定。 border-width：要素のボーダー幅を設定。 border-style：要素のボーダースタイルを設定。 border-color：要素のボーダー色を設定。 border-radius：要素のボーダー半径を設定。

背景プロパティ background：要素の背景を設定。 background-color：要素の背景色を設定。 background-image：要素の背景画像を設定。 background-repeat：要素の背景画像の繰り返しモードを設定。 background-position：要素の背景画像の位置を設定。 background-size：要素の背景画像のサイズを設定。

トランジションプロパティ transition：要素のトランジション効果を設定。 transition-property：要素のトランジションプロパティを設定。 transition-duration：要素のトランジション時間を設定。 transition-timing-function：要素のトランジションタイミング関数を設定。 transition-delay：要素のトランジション遅延を設定。

CSSとは？

CSSの基本構造

構造解析：

CSSを参照する方法

インライン参照：

内部参照：

外部参照：

カスケード順序と優先度

CSS継承

一般的なCSSプロパティとその機能：

コメント