最初の CSS 1-2 を使用した Sublime での開発

スタイルシートは、内部スタイルシート、外部スタイルシート、インラインスタイルの 3 つのカテゴリに分類できます。

ここに画像の説明を挿入
内部スタイルシートを作成するには、HTML ページの <head> タグ内に <style> タグを追加し、その中に CSS スタイルルールを記述します。

通常、スタイルファイルの構造には
次のものが含まれます。コメント: スタイルシートの目的、作成者、バージョン、その他の情報を説明するために使用されるオプションのコメントの説明。
@rules: @ で始まるルールは、@charset、@import、@media などの特別なスタイルルールを指定するために使用されます。セレクターとスタイルルール: セレクターはスタイルを設定する HTML 要素を指定する
ために使用され、スタイルルールは変更されるスタイル属性と属性値を指定するために使用されます。以下は内部スタイルシートの例です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>My Webpage</title>
	<style>
		/* 注释：这是一个内部样式表 */
		
		/* 设置页面背景颜色和文字颜色 */
		
		body {
      
      
			background-color: #f0f0f0;
			color: #333;
		}
		/* 设置段落的样式 */
		p{
      
      
			font-size: 20px;
			color: red;
		}
		/* 设置页面标题的样式 */
		h1 {
      
      
			font-size: 2em;
			margin-bottom: 1em;
			text-align: center;
			text-transform: uppercase;
		}
		
		/* 设置链接的样式 */
		a {
      
      
			color: blue;
			text-decoration: none;
		}
		
		/* 设置链接的悬停样式 */
		a:hover {
      
      
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<h1>Welcome to My Webpage</h1>
	<p>This is some sample text. <a href="#">Click here</a> to learn more.</p>
</body>
</html>

この例では、内部スタイルシートを使用して、ページの背景色、テキストの色、見出しスタイル、およびリンクスタイルを設定しました。
<style> タグでは、セレクターを使用してスタイルを適用する HTML 要素を指定し、中括弧内にスタイルルールを記述することができることに注意してください。
スタイルルールは、コロンで区切られた属性と属性値で構成され、複数のスタイルルールはセミコロンで区切られます。
次の属性値が見つかりました。color、background-color、font-size、margin-bottom、text-align、text-transform、text-decoration、a:hover

color: テキストの色を設定するために使用されます。色を指定するには、色名、RGB 値、または 16 進値を使用できます。
背景色: 要素の背景色を設定するために使用されます。色を指定するには、色名、RGB 値、または 16 進値を使用できます。
font-size: テキストのフォントサイズを設定するために使用され、サイズはピクセル、パーセント、またはその他の単位で指定できます。
margin-bottom: 要素の下部に外側のマージンを設定するために使用され、サイズはピクセル、パーセンテージ、またはその他の単位で指定できます。
text-align: テキストの配置を設定するために使用されます。左揃え、右揃え、中央揃え、または両端揃えに設定できます。
- text-align: left; /* 左揃え */
- text-align: right; /* 右揃え*/
- text-align: center; /* 中央揃え*/
text-transform: テキストの大文字と小文字の変換を設定するために使用され、すべてのテキストを大文字、小文字、または各単語の最初の文字に変換できます。
- text-transform: uppercase; /* 大文字に変換します */
- text-transform: lowercase; /* 小文字に変換します */
- text-transform: Capitalize; /* 最初の文字を大文字にします */
text-decoration: テキストの装飾効果を設定するために使用され、下線、取り消し線、その他の効果を追加できます。
- text-decoration: 下線; /* 下線*/
- text-decoration: line-through; /* 取り消し線*/
a:hover: リンクのホバリング効果を設定するために使用され、リンクの色の変更や下線の追加など、マウスホバリング時のリンクのスタイルを設定できます。

CSSの基本的な使い方

CSS (Cascading Style Sheets) は、Web ページにスタイルとレイアウトを追加するために使用される言語です。CSSの基本的な使い方は以下の通りです。

CSSセレクター

CSS セレクターは、スタイルを適用する HTML 要素を選択するために使用されます。一般的なセレクターは次のとおりです。

タグセレクター: 指定したタグを持つすべての要素を選択します。たとえば、p はすべての <p> 要素を選択し、h1 はすべての <h1> 要素を選択します。
クラスセレクター: 指定されたクラスを持つ要素を選択します。たとえば、.my-class は class="my-class" を持つすべての要素を選択します。
ID セレクター: 指定された ID を持つ要素を選択します。たとえば、#my-id は id="my-id" を持つ要素を選択します。
子孫セレクター: 要素の子孫要素を選択します。たとえば、div p は、親が <div> であるすべての <p> 要素を選択します。
子要素セレクター: 要素の直接の子要素を選択します。たとえば、ul > li は、親要素が <ul> であるすべての <li> 要素を選択します。。
属性セレクター: 指定された属性を持つ要素を選択します。たとえば、[href] は、href 属性を持つすべての要素を選択します。
疑似クラスセレクター: 特定の状態にある要素を選択します。たとえば、:hover はマウスがホバーしている要素を選択します。

CSSスタイル設定

CSS スタイルを使用して、要素のフォント、色、サイズ、レイアウトなどを制御できます。基本的な CSS スタイルをいくつか示します。

フォントスタイル: font-family はフォントファミリを設定し、font-size はフォントサイズを設定し、font-weight はフォントの太さを設定します。
テキストスタイル: color はテキストの色を設定し、text-align はテキストの配置を設定し、text-decoration は下線や取り消し線などのテキストの装飾を設定します。
背景スタイル:background-color は背景色を設定し、background-image は背景画像を設定します。
- 背景画像: url(画像url);
境界線のスタイル: border は要素の境界線を設定し、border-color は境界線の色を設定し、border-width は境界線の幅を設定します。
ボックスモデル: margin は外側のマージンを設定し、padding は内側のマージンを設定し、width と height は要素の幅と高さをそれぞれ設定します。

背景スタイル

CSS の背景スタイルは、HTML 要素の背景を設定するために使用されるプロパティです。一般的に使用される CSS 背景スタイルをいくつか示します。
ここに画像の説明を挿入

背景色: 要素の背景色を設定するために使用されます。色は、事前定義された色名 (「赤」、「青」など) または 16 進数のカラーコード (「#FF0000」、「#0000FF」など) を使用して指定できます。
背景画像: 要素の背景画像を設定するために使用されます。画像の URL を使用して、画像ファイルのパスを指定できます (たとえば、background-image: url("example.jpg");)。
背景-繰り返し: 背景画像の繰り返し方法を制御するために使用されます。次の値を使用できます:repeat (デフォルト、背景画像は水平方向と垂直方向の両方で繰り返します)、repeat-x (水平方向のみ繰り返します)、repeat-y (垂直方向のみ繰り返します)、および no-repeat (繰り返しません)。
背景添付: 背景画像がページとともにスクロールするかどうかを指定するために使用されます。次の値を使用できます: スクロール (デフォルト、背景画像はページとともにスクロールします)、固定 (背景画像はビューポート内で固定されます)、ローカル (背景画像は要素とともにスクロールします)。
背景位置: 背景画像の位置を指定するために使用されます。位置はキーワード（例：「center」、「top」、「bottom」）またはピクセル値（例：「10px 20px」）を使用して指定できます。
背景サイズ: 背景画像のサイズを制御するために使用されます。次の値が利用可能です: auto (デフォルト、元の画像サイズを使用)、cover (要素全体を満たすように画像を拡大縮小します)、contain (要素の幅または高さに合わせて画像を拡大縮小します)、長さの値 (例: "100px 50px")。

外部スタイルシートを使用する

外部スタイルシートは、HTML ドキュメントからスタイル情報を分離し、Web ページのスタイル情報を別の CSS ファイルで維持および更新できるようにする方法です。この方法により、HTML ドキュメントがより簡潔になるだけでなく、Web ページの保守性と再利用性も向上します。

外部スタイルシートを作成する手順は次のとおりです。

新しいテキストファイルを作成し、拡張子 .css を付けて保存します。たとえば、「styles.css」というファイルを作成できます。

CSS ルールは CSS ファイルに記述され、Web ページ内のさまざまな要素の外観を制御します。たとえば、すべての段落のフォントの色を制御するルールを作成できます。

p {
    
    
   color: red;
}

CSS ファイルを HTML ドキュメントに関連付けます。CSS ファイルは、HTML ドキュメント内のタグを使用して HTML ドキュメントにリンクできます。例えば：

<head>
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>

このうち、href 属性は CSS ファイルのパスとファイル名を指定します。

HTML ドキュメントと CSS ファイルを保存し、ブラウザで HTML ドキュメントを開いて、スタイルが HTML 要素に正しく適用されているかどうかを確認します。

rel 属性の値には、スペースで区切られた 1 つ以上のキーワードを指定できます。一般的な rel 属性値には、「alternate」（現在のドキュメントとリンクされたドキュメントの間の代替バージョンを示す）、「stylesheet」（現在のドキュメントとリンクされたドキュメントの間のスタイルシートを示す）、「icon」（現在のドキュメントとリンクされたドキュメントの間のスタイルシートを示す）が含まれます。ドキュメント間のアイコン）、「nofollow」（検索エンジンがこのリンクをたどらないことを示す）など。

外部スタイルシートを使用すると、次のような多くの利点があります。

Webページのスタイル情報とコンテンツ情報が分離され、Webページの保守性や再利用性が向上します。

これにより、複数の Web ページ間でスタイル情報を共有できるようになり、コードの冗長性が軽減されます。

HTML ドキュメントをより簡潔にし、読みやすく、保守しやすくします。

外部スタイルシートをブラウザでキャッシュできるため、Web ページのパフォーマンスが向上し、HTTP リクエストの数が減少します。

テキストスタイル

CSS は、テキストの外観を制御するためのさまざまなテキストスタイルを提供します。一般的なテキストスタイルをいくつか示します。

フォントスタイル

CSSを使用して、テキストのフォント、フォントサイズ、太字、フォントスタイルなどを設定します。例えば：

font-family: Arial, sans-serif;  /* 指定字体 */
font-size: 16px;                /* 指定字号 */
font-weight: bold;              /* 加粗 */
font-style: italic;             /* 斜体 */

文字色と背景色

CSSを使用して文字色と背景色を設定します。例えば：

color: red;           /* 文本颜色 */
background-color: #ccc;  /* 背景颜色 */

テキストの配置

CSS を使用して、左揃え、右揃え、中央揃え、両端揃えなどのテキストの配置を設定します。例えば：

text-align: left;   /* 左对齐 */
text-align: right;  /* 右对齐 */
text-align: center; /* 居中对齐 */
text-align: justify; /* 两端对齐 */

単語の間隔と文字の間隔

CSS を使用して、テキストの単語間隔と文字間隔を設定できます。単語間隔とは各文字間の距離を指し、文字間隔とは隣接する文字間の距離を指します。例えば：

letter-spacing: 2px;  /* 字母间距为2像素 */
word-spacing: 5px;    /* 字间距为5像素 */

行高

CSS を使用してテキストの行の高さを設定します。これは、テキストの各行の高さを指します。行の高さは、ピクセル、パーセンテージ、またはその他の長さの単位で設定できます。例えば：

line-height: 1.5em; /* 行高为1.5倍字号 */

文字装飾下線、取り消し線、上付き文字、下付き文字などの装飾を追加します。

CSS を使用して、テキストに下線、取り消し線、上付き文字、下付き文字、その他の装飾を追加します。例えば：

text-decoration: underline; /* 下划线 */
text-decoration: line-through; /* 删除线 */
vertical-align: super;   /* 上标 */
vertical-align: sub;     /* 下标 */

テキストシャドウ

CSS を使用すると、テキストに影効果を追加できます。例えば：

text-shadow: 1px 1px 1px #ccc; /* 水平偏移量、垂直偏移量、模糊半径、阴影颜色 */

テキストの書き込み方向を変更する

direct は、左から右、右から左など、テキストの方向を制御するために使用される CSS のプロパティです。これには 2 つの値があります。

ltr: は左から右を意味し、これがデフォルトの方向です。
rtl: 右から左を示し、アラビア語、ヘブライ語、および右から左に書かれるその他の言語など、特定のテキストの表示方向を制御するために使用されます。
たとえば、次の CSS コードはテキストの方向を右から左に設定します。

direction: rtl;

右から左に記述する言語では、テキストが左から右ではなく右から左に配置されるため、これはテキストのレイアウトと配置に影響します。Web ページで右から左に書かれる言語を表示する必要がある場合は、direction 属性を使用してテキストの方向を制御する必要があります。

テキストケース

CSS を使用すると、テキストを大文字または小文字に変換できます。例えば：

text-transform: uppercase; /* 转换为大写字母 */
text-transform: lowercase; /* 转换为小写字母 */
text-transform: capitalize; /* 开头字母转换大写 */

1行目のインデント

CSS を使用すると、テキストの最初の行にインデントを追加できます。例えば：

text-indent: 2em; /* 缩进2个字宽 */

上記は、テキストをより美しく読みやすくするために、テキストの外観を制御できる一般的なテキストスタイルの一部です。

フォントスタイル

ここに画像の説明を挿入

フォント名

CSS では、font-family プロパティを使用してフォント名を指定できます。これにより、複数のフォントを指定できるため、フォントが使用できない場合に代替フォントが使用されます。例えば：

font-family: Arial, sans-serif;

このコードは、最初に Arial フォントの使用を試みます。Arial が使用できない場合は、sans-serif フォントを使用します。

フォントサイズ

CSS では、font-size プロパティを使用してフォントサイズを指定できます。サイズはピクセル（px）、パーセンテージ（%）、ems などの単位で指定できます。例えば：

font-size: 16px;

フォントの太さ

CSS では、font-weight 属性を使用してフォントの太さを指定できます。一般的な値は、normal、bold、bolder、lighter などです。例えば：

font-weight: bold;

斜体と下線

CSS では、font-style プロパティを使用して斜体を指定し、text-decoration プロパティを使用して下線を指定できます。例えば：

Copy code
font-style: italic; /* 斜体 */
text-decoration: underline; /* 下划线 */

リストスタイル

CSS (Cascading Style Sheets) を使用してリストのスタイルを変更できます。HTML には、順序付きリストと順序なしリストの 2 種類のリストがあります。各タイプは、異なる CSS プロパティを使用してスタイルをカスタマイズできます。

リストのスタイルをカスタマイズするために使用できる一般的な CSS プロパティをいくつか示します。

list-style-type: リスト項目マークアップのタイプを指定するために使用されます。このプロパティは次の値を受け入れることができます。

disc: デフォルト値、実線のドットをマークとして使用します
Circle: 中空の円をマークとして使用します
square: 実線の正方形をマークとして使用します decim
: 数字をマークとして使用します (順序付きリスト)
lower-roman: 小文字のローマ数字を使用しますマークとして (順序付きリスト)
upper-roman: 大文字のローマ数字をマーカーとして使用します (順序付きリスト)
lower-alpha: 小文字をマーカーとして使用します (順序付きリスト)
upper-alpha: 大文字をマーカーとして使用します (順序付きリスト)
サンプルコード:

ul {
    
    
  list-style-type: square; /* 将无序列表标记样式改为实心正方形 */
}

ol {
    
    
  list-style-type: upper-roman; /* 将有序列表标记样式改为大写罗马数字 */
}

list-style-image: リスト項目マーカーのスタイルとしてカスタム画像を指定するために使用されます。

任意の画像をリスト項目としてマークできます。この属性を使用して画像の URL を指定するだけです。
サンプルコード:

Copy code
ul {
    
    
  list-style-image: url('bullet.png'); /* 使用bullet.png作为无序列表标记样式 */
}

ol {
    
    
  list-style-image: url('number.png'); /* 使用number.png作为有序列表标记样式 */
}

list-style-position: リスト項目マークの位置を指定するために使用されます。

デフォルトでは、マーカーはリスト項目テキストの左側に配置されます。この属性は次の値を受け入れることができます。
inside: マークアップはリスト項目テキストの
内側にあります。Outside: マークアップはリスト項目テキストの外側にあります
。サンプルコード:

ul {
    
    
  list-style-position: outside; /* 将无序列表标记位置改为列表项文本外部 */
}

ol {
    
    
  list-style-position: inside; /* 将有序列表标记位置改为列表项文本内部 */
}

リスト形式：

この属性は list-style-type、list-style-image、list-style-position 属性を同時に指定でき、その値はこれらの属性の値を含むスペース区切りのリストです。
サンプルコード:

Copy code
ul {
    
    
  list-style: square url('bullet.png') inside; /* 同时指定无序列表标记类型、图像和位置 */
}

ol {
    
    
  list-style: upper-roman url('number.png') outside; /* 同时指定有序列表标记类型、图像和位置 */
}

結論として、リスト項目の外観と文字体裁は CSS を使用して簡単にカスタマイズできます。上記の一般的な CSS プロパティに加えて、リストのスタイルをカスタマイズするために使用できる他の CSS プロパティがいくつかあります。

list-style-color: リスト項目マーカーの色を指定するために使用されます。デフォルトでは、マーカーはテキストと同じ色です。

サンプルコード:

ul {
    
    
  list-style-color: red; /* 将无序列表标记颜色改为红色 */
}

ol {
    
    
  list-style-color: blue; /* 将有序列表标记颜色改为蓝色 */
}

パディングとマージン: リスト項目の周囲のパディングとマージンを指定するために使用されます。これらのプロパティを使用して、リスト項目のタイポグラフィと間隔を変更できます。

サンプルコード:

ul {
    
    
  padding: 10px; /* 将无序列表项周围的内边距设为10像素 */
  margin: 20px; /* 将无序列表项周围的外边距设为20像素 */
}

ol {
    
    
  padding: 5px; /* 将有序列表项周围的内边距设为5像素 */
  margin: 10px; /* 将有序列表项周围的外边距设为10像素 */
}

text-align: リスト項目のテキストの配置を指定するために使用されます。

サンプルコード:

ul {
    
    
  text-align: center; /* 将无序列表项文本居中对齐 */
}

ol {
    
    
  text-align: right; /* 将有序列表项文本右对齐 */
}

カウンタリセットとカウンタインクリメント：

カスタム順序リストタグを作成するために使用されます。これらのプロパティを使用すると、リスト項目が発生するたびに増加するカウンターを作成できます。content 属性を使用してカスタムマークアップを作成し、カウンタの値をテキストに挿入できます。
サンプルコード:

ol {
    
    
  counter-reset: my-counter; /* 创建一个名为my-counter的计数器 */
}

li {
    
    
  counter-increment: my-counter; /* 在每个列表项中递增计数器 */
}

li:before {
    
    
  content: counter(my-counter) ". "; /* 在每个列表项前插入计数器的值和一个点 */
}

上記は、リストのスタイルをカスタマイズするために使用できるいくつかの一般的な CSS プロパティです。これらのプロパティを使用すると、マークアップの種類、色、画像、位置、テキストの配置、リスト項目の間隔を簡単に変更し、カスタム順序のリストマークアップを作成できます。

疑似クラスと疑似要素

CSS 疑似クラスと疑似要素は、スタイルシートでスタイル設定できる HTML 要素を選択するための特別なセレクターです。名前は似ていますが、機能は異なります。

疑似クラス

疑似クラスは、リンクの状態やマウスオーバーの状態など、特定の状態にある要素を選択するために使用されます。一般的な疑似クラスをいくつか示します。

:hover は、マウスがホバーしている要素を選択します
:link 未訪問のリンク
:active は、アクティブ化される (例: クリックされる) 要素を選択します。
:visited 訪問したリンクを選択します
:focus 現在フォーカスされている要素を選択します

ハイパーリンク疑似クラス
ここに画像の説明を挿入
selector:selector
pseudo-class:pseudo
-class 疑似クラスの文法形式は、selector:pseudo-class {style} です。

疑似クラスの分類

CSS では、疑似クラスはドキュメント内の特定の状態または位置を選択するために使用されるセレクターです。疑似クラスは実際の HTML 要素ではありませんが、要素の特定の状態または位置を選択するために使用されます。

疑似クラスの一般的なカテゴリをいくつか示します。

リンク状態疑似クラス (リンク状態疑似クラス): 未訪問リンク、訪問済みリンク、ホバーリンクなど、リンクのさまざまな状態のスタイルを設定するために使用されます。これらの疑似クラスには、:link、:visited、:hover、および :active が含まれます。

構造擬似クラス: 文書構造に基づいて要素を選択するために使用されます。これらの疑似クラスには、:first-child、:last-child、:nth-child、:nth-last-child、:only-child、:first-of-type、:last-of-type、:nth- が含まれます。 of -type および :nth-last-of-type。

構造擬似クラスは CSS の非常に便利なタイプのセレクターであり、親要素内の位置に基づいて要素を選択できます。CSS では、さまざまな種類の構造擬似クラスが利用可能であり、それぞれに独自の目的と構文があります。
以下に、一般的に使用される構造擬似クラスをいくつか示します。
:first-child: 親要素内の最初の子要素を選択します。

div:first-child {
    
    
  /* CSS 属性 */
}

上記のコードは、親の最初の子である限り、最初の div 要素を選択します。

:last-child: 親要素内の最後の子要素を選択します。

Copy code
div:last-child {
    
    
  /* CSS 属性 */
}

上記のコードは、親の最後の子である限り、最後の div 要素を選択します。

:nth-child(): 親要素内の N 番目の子要素を選択します。この疑似クラスは、特定の数値または式をパラメータとして受け入れることができます。

div:nth-child(2) {
    
    
  /* CSS 属性 */
}

上記のコードは、div 要素内の 2 番目の子要素を選択します。

:nth-last-child(): :nth-child() 擬似クラスと同様に、親要素内の最後の N 番目の子要素を選択し、パラメータを受け入れることもできます。

div:nth-last-child(2) {
    
    
  /* CSS 属性 */
}

上記のコードは、div 要素の最後から 2 番目の子を選択します。

:only-child: 親要素内に子要素が 1 つだけある要素を選択します。

div:only-child {
    
    
  /* CSS 属性 */
}

上記のコードは、親要素内に子要素が 1 つだけある div 要素を選択します。

:only-of-type: 特定のタイプの子要素を 1 つだけ持つ親要素内の要素を選択します。

div:only-of-type {
    
    
  /* CSS 属性 */
}

上記のコードは、親要素に 1 種類の div 要素のみを持つ要素を選択します。

構造擬似クラスは、開発者がページ上の特定の要素を正確に選択するのに役立ち、よりきめ細かいスタイル制御とページレイアウトを可能にします。ただし、セレクターで構造擬似クラスを使用する場合、セレクターが必要な要素を正しく選択できるように、ページ要素の実際の構造を考慮する必要があることに注意してください。

ユーザーインターフェイス疑似クラス: 要素を選択するためのさまざまなユーザーインタラクション状態。これらの疑似クラスには、:checked、:disabled、:enabled、:focus、:read-only、および:read-write が含まれます。

否定疑似クラス (否定疑似クラス): 指定された要素を除くすべての要素を選択するために使用されます。疑似クラスは 1 つだけあり、それは not() です。

疑似要素 (疑似要素): ドキュメント内の要素に追加のスタイルとコンテンツを追加するために使用されます。疑似要素は、:::before、::after、::first-line、::first-letter などを含む :: 接頭辞で表されます。

ここに画像の説明を挿入

疑似要素は、要素上の特定の位置にコンテンツまたはスタイルを挿入するために使用されるセレクターです。一般的な疑似要素は次のとおりです。

::before 要素のコンテンツの前にコンテンツを挿入します
。 ::after 要素のコンテンツの後にコンテンツを挿入します。
::first-line 要素のテキストの最初の行を選択します。
::first-letter 要素の最初の文字を選択します。
::selection は、指定された要素を選択します。クライアントによって選択されます。選択されたコンテンツ
の疑似要素の構文は selector::pseudo-element {style} です。

擬似要素は単一のコロン:: ではなく二重のコロン:: で始まることに注意してください。

疑似クラスと疑似要素を使用すると、CSS スタイルをより柔軟にできると同時に、ページの読みやすさとアクセシビリティも向上します。次のコードを実行してCSS ファイル
を表示できます。

.example {
    
    
  background-color: #eee;
  padding: 20px;
}

.example::before {
    
    
  content: "Before the content: ";
  font-weight: bold;
}

.example::after {
    
    
  content: " After the content.";
  font-weight: bold;
}

.example::first-line {
    
    
  color: blue;
  text-decoration: underline;
}

.example::first-letter {
    
    
  font-size: 2em;
  font-weight: bold;
}

.example::selection {
    
    
  background-color: yellow;
}

HTMLファイル

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<div class="example">
  <h1>Hello, World!</h1>
  <p>This is an example of how to use CSS pseudo-elements.</p>
</div>
</body>
</html>

疑似クラスと疑似要素の違い

疑似クラスと疑似要素はどちらも要素の選択とスタイル設定を行うための CSS の特別なタグですが、目的は異なります。

疑似クラス (Pseudo-classes) は、さまざまな状態の要素のスタイルを指定するために使用されるセレクターのキーワードです。たとえば、:hover 疑似クラスを使用して、ユーザーが要素上にマウスを置いたときに適用するスタイルを指定できます。一般的な疑似クラスには、:active、:visited、:focus なども含まれます。

疑似要素は、要素の特定の部分にスタイルを追加するために使用されるキーワードです。これらは、CSS では二重コロン :: で表されます (例::before、::after など)。一般的な疑似要素には、::before、::after、::first-letter、::first-line などが含まれます。疑似要素を使用すると、ドキュメントフロー内に仮想要素を作成し、これらの仮想要素にスタイルを追加して、テキストの前にアイコンを追加したり、要素の後に装飾コンテンツを追加したりするなど、特殊な効果を実現できます。

一般に、疑似クラスと疑似要素は、CSS で要素を選択してスタイル設定するために使用される特別なタグですが、動作は異なります。疑似クラスはさまざまな状態の要素のスタイルを指定するために使用され、疑似要素は次の目的で使用されます。要素の特定の部分にスタイルを追加します。

セレクターを要約すると

CSS には多くの種類のセレクターがあります。以下に一般的なセレクターをいくつか示します。

クラスセレクター: ドット (.) で始まり、クラス属性が指定された名前である要素を選択します。例: .example {color: red;}

ID セレクター (ID セレクター): シャープ記号 (#) で始まり、id 属性が指定された名前である要素を選択します。例: #example {color: red;}

要素セレクター: 指定したタグ名を持つすべての要素を選択します。例: p {color: red;}

子孫セレクター: 親要素の下にあるすべての対象となる子要素を選択します。例: div p {color: red;}

子セレクター: 親要素の下にある直接の子要素を選択します。例: div > p {color: red;}

ユニバーサルセレクター: すべての要素を選択します。例: * {color: red;}

属性セレクター (属性セレクター): 指定された属性または属性値を持つ要素を選択します。例: [title] {color: red;} または [href="example.com"] {color: red;}

疑似クラスセレクター: 特定の状態にある要素を選択します。例: a:hover {color: red;} または input:focus {outline: none;}

疑似要素セレクター: 要素の一部を選択します。例: p::first-line {color: red;} または p::before {content: “Hello”;}

:not セレクター (否定セレクター): 指定されたセレクターに一致しない要素を選択します。例: p:not(.example) {color: red;}

:nth-child セレクター (Nth-child セレクター): 親要素の下の指定された位置にある子要素を選択します。例: li:nth-child(2) {color: red;}

:first-child セレクター (最初の子セレクター): 親要素の下にある最初の子要素を選択します。例: li:first-child {color: red;}

:last-child セレクター (最後の子セレクター): 親要素の下にある最後の子要素を選択します。例: li:last-child {color: red;}

:empty セレクター (空のセレクター): 子要素のない要素を選択します。例: p:empty {color: red;}

:checked selector (Checked Selector): 選択したフォーム要素を選択します。例: input:checked {background-color: blue;}

:disabled セレクター (無効セレクター): 無効なフォーム要素を選択します。例: input:disabled {opacity: 0.5;}

:enabled selector (有効セレクター): 有効なフォーム要素を選択します。例: input:enabled {border: 1px Solid green;}

これらのセレクターを必要に応じて組み合わせて、スタイルを設定する必要がある要素を正確に選択できます。

ここに画像の説明を挿入
CSS セレクター
の優先順位 CSS セレクターは、複数の CSS ルールが同じ要素に適用される場合、ブラウザーが特定のルールに従ってどのルールを最初に要素に適用するかを決定することを意味します。

CSS セレクターの優先順位は、高から低の 4 つの部分で構成されます。

インラインスタイル (インラインスタイル): style 属性を通じて要素に直接設定されたスタイルが最も優先されます。
ID セレクター: # 記号で定義された ID セレクターは 2 番目に高い優先順位を持ちます。
クラスセレクター、属性セレクター、擬似クラスセレクター (クラスセレクター、属性セレクター、擬似クラスセレクター): これらのセレクターの優先順位は 3 番目に高く、優先順位は同じです。
要素セレクター、擬似要素セレクター (タイプセレクター、擬似要素セレクター): これらのセレクターの優先順位は最も低く、それらの優先順位は同じです。

複数のセレクターが同じ要素に適用される場合、ブラウザーはそれらの優先順位を比較し、優先順位の高いスタイルルールを最初に適用します。2 つ以上のセレクターの優先順位が等しい場合、スタイルシート内でのセレクターの出現順序によって、どのスタイルが適用されるかが決まります。

! important で宣言されたスタイルは最も高い優先順位を持ち、他のスタイルルールをオーバーライドできることに注意してください。ただし、! important の使用は、スタイルの予測可能性と保守性を損なう可能性があるため、注意して行う必要があります。
たとえば
、次の CSS スタイルルールがあるとします。

p {
    
    
  color: blue;
}

#special {
    
    
  color: red;
}

.warning {
    
    
  font-weight: bold;
}

p.warning {
    
    
  color: orange;
}

次に、HTML ページには次のコードがあります。

<p id="special" class="warning">This is a special warning message!</p>

上記のルールによれば、この要素は p セレクターと .warning クラスセレクターの両方に一致し、クラスセレクターの優先順位が要素セレクターよりも高いため、テキストのこの段落のフォントの色はオレンジ色でなければなりません。また、ID セレクター #special にも一致しますが、クラスセレクターの優先順位は ID セレクターよりも低いため、その色はオレンジになります。#special セレクターの優先順位が高い場合でも、より具体的なセレクター ( .warning ) がすでに同じ属性を設定しており、優先順位が高いため、 #special セレクターが設定する属性 (color: red ) は要素に適用されないことに注意してください。

CSS-1 の概要

最初の CSS 1-2 を使用した Sublime での開発

CSSの基本的な使い方

CSSセレクター

CSSスタイル設定

背景スタイル

外部スタイルシートを使用する

テキストスタイル

フォントスタイル

文字色と背景色

テキストの配置

単語の間隔と文字の間隔

行高

文字装飾 下線、取り消し線、上付き文字、下付き文字などの装飾を追加します。

テキストシャドウ

テキストの書き込み方向を変更する

テキストケース

1行目のインデント

フォントスタイル

フォント名

フォントサイズ

フォントの太さ

斜体と下線

リストスタイル

list-style-type: リスト項目マークアップのタイプを指定するために使用されます。このプロパティは次の値を受け入れることができます。

list-style-image: リスト項目マーカーのスタイルとしてカスタム画像を指定するために使用されます。

list-style-position: リスト項目マークの位置を指定するために使用されます。

リスト形式：

list-style-color: リスト項目マーカーの色を指定するために使用されます。デフォルトでは、マーカーはテキストと同じ色です。

パディングとマージン: リスト項目の周囲のパディングとマージンを指定するために使用されます。これらのプロパティを使用して、リスト項目のタイポグラフィと間隔を変更できます。

text-align: リスト項目のテキストの配置を指定するために使用されます。

カウンタリセットとカウンタインクリメント：

疑似クラスと疑似要素

疑似クラス

疑似クラスの分類

ユーザー インターフェイス疑似クラス: 要素を選択するためのさまざまなユーザー インタラクション状態。これらの疑似クラスには、:checked、:disabled、:enabled、:focus、:read-only、および:read-write が含まれます。

否定疑似クラス (否定疑似クラス): 指定された要素を除くすべての要素を選択するために使用されます。疑似クラスは 1 つだけあり、それは not() です。

疑似要素 (疑似要素): ドキュメント内の要素に追加のスタイルとコンテンツを追加するために使用されます。疑似要素は、:::before、::after、::first-line、::first-letter などを含む :: 接頭辞で表されます。

疑似クラスと疑似要素の違い

セレクターを要約すると

おすすめ

文字装飾下線、取り消し線、上付き文字、下付き文字などの装飾を追加します。

ユーザーインターフェイス疑似クラス: 要素を選択するためのさまざまなユーザーインタラクション状態。これらの疑似クラスには、:checked、:disabled、:enabled、:focus、:read-only、および:read-write が含まれます。