CSS - CSSの基礎 - 版の履歴

Wiki: /* セレクタの種類 */

2024-11-23T02:52:09Z

セレクタの種類

← 古い版		2024年11月23日 (土) 11:52時点における版
122行目:		122行目:
	\|}		\|}
	</center>		</center>
			<br>
			id属性とclass属性の優先度は、id属性 -> class属性である。<br>
			<br>
			* id属性は使用頻度が限られるため、サイト全体を通じて不変の固定要素に使用する。
			* class属性は、1ページ内で何度も使用できるため、サイトの中に何度も使用する見出しや表等に使用する。
	<br>		<br>
	さらに多くのセレクタが存在するため、詳細を知りたい場合は[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors MDNセレクタガイド]を参照すること。<br>		さらに多くのセレクタが存在するため、詳細を知りたい場合は[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors MDNセレクタガイド]を参照すること。<br>

Wiki: /* セレクタの種類 */

2024-11-20T00:50:50Z

セレクタの種類

← 古い版		2024年11月20日 (水) 09:50時点における版
111行目:		111行目:
	! セレクタ名 !! 選択するもの !! 例		! セレクタ名 !! 選択するもの !! 例
	\|-		\|-
	\| 要素セレクタ<br>(タグセレクタ、タイプセレクタとも呼ばれる) \|\| 指定されたタイプの全てのHTML要素 \|\| p<br>~~selects~~ <nowiki><p></nowiki>		\| 要素セレクタ<br>(タグセレクタ、タイプセレクタとも呼ばれる) \|\| 指定されたタイプの全てのHTML要素 \|\| p<br><nowiki><p></nowiki>
	\|-		\|-
	\| IDセレクタ \|\| 指定されたIDを持つページ上の要素<br>指定されたHTMLページでは、各ID値は一意である必要がある。 \|\| #my-id<br>~~selects~~ <nowiki><p id="my-id"></nowiki><br><a id="my-id">		\| IDセレクタ \|\| 指定されたIDを持つページ上の要素<br>指定されたHTMLページでは、各ID値は一意である必要がある。 \|\| #my-id<br><nowiki><p id="my-id"></nowiki><br><a id="my-id">
	\|-		\|-
	\| クラスセレクタ \|\| 指定されたクラスを持つページ上の要素<br>同じクラスの複数のインスタンスをページに表示することができる。 \|\| .my-class<br>~~selects~~ <nowiki><p class="my-class"></nowiki><br><a class="my-class">		\| クラスセレクタ \|\| 指定されたクラスを持つページ上の要素<br>同じクラスの複数のインスタンスをページに表示することができる。 \|\| .my-class<br><nowiki><p class="my-class"></nowiki><br><a class="my-class">
	\|-		\|-
	\| 属性セレクタ \|\| 指定された属性を持つページ上の要素 \|\| img[src]<br>~~selects~~ <img src="myimage.png"><br><br><img>のみは不可		\| 属性セレクタ \|\| 指定された属性を持つページ上の要素 \|\| img[src]<br><img src="myimage.png"><br><br><img>のみは不可
	\|-		\|-
	\| 擬似クラスセレクタ \|\| 指定された要素 (複数可)<br>ただし、指定された状態にある時のみ可能。<br>(例えば、カーソルがリンクの上にある場合等) \|\| a:hover<br><br>~~selects~~ <a>は、<a>を選択しているが、マウスポインタがリンクの上にある時場合のみとなる。		\| 擬似クラスセレクタ \|\| 指定された要素 (複数可)<br>ただし、指定された状態にある時のみ可能。<br>(例えば、カーソルがリンクの上にある場合等) \|\| a:hover<br><br><a>は、<a>を選択しているが、マウスポインタがリンクの上にある時場合のみとなる。
	\|}		\|}
	</center>		</center>
	<br>		<br>
	さらに多くのセレクタが存在するため、詳細を知りたい場合は[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors MDNセレクタガイド]を参照すること。<br>		さらに多くのセレクタが存在するため、詳細を知りたい場合は[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors MDNセレクタガイド]を参照すること。<br>
			<br>
			==== 要素セレクタ ====
			要素セレクタは、一般的には使用されない。<br>
			<br>
			要素セレクタを避ける理由として、以下に示すものが挙げられる。<br>
			* 詳細度が低すぎて上書きが必要になりやすい。
			* スコープが広すぎるため、予期せぬ影響が出やすい。
			* コンポーネント指向の設計と相性が悪い。
			* クラスセレクタよりも処理が遅いため、パフォーマンスへの悪影響がある。
	<br>		<br>
	==== IDセレクタ ====		==== IDセレクタ ====

Wiki: /* セレクタの種類 */

2024-11-20T00:43:09Z

セレクタの種類

@@ 124行目: / 124行目: @@
 <br>
 さらに多くのセレクタが存在するため、詳細を知りたい場合は[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors MDNセレクタガイド]を参照すること。<br>
 <br><br>

Wiki: /* ボックスについて */

2024-02-12T17:18:22Z

ボックスについて

← 古い版		2024年2月13日 (火) 02:18時点における版
185行目:		185行目:
	*: 要素の表示モード		*: 要素の表示モード
	<br>		<br>
			[[ファイル:CSS Basic 2.png\|フレームなし\|中央]]
			<br>

	==== 背景色 ====		==== 背景色 ====
	ページ全体の背景色を指定する。<br>		ページ全体の背景色を指定する。<br>

Wiki: /* CSSのルールセット */

2024-02-12T17:17:26Z

CSSのルールセット

← 古い版		2024年2月13日 (火) 02:17時点における版
70行目:		70行目:
	*: プロパティの<code>;</code>(コロン)の後には、プロパティ値がある。		*: プロパティの<code>;</code>(コロン)の後には、プロパティ値がある。
	*: これは、与えられたプロパティの多くの可能な外観の中から1つを選択する。		*: これは、与えられたプロパティの多くの可能な外観の中から1つを選択する。
			<br>
			[[ファイル:CSS Basic 1.png\|フレームなし\|中央]]
	<br>		<br>
	ルールには、他にも重要な部分がある。<br>		ルールには、他にも重要な部分がある。<br>

Wiki: Wiki がページ「CSS - 基礎」を「CSS - CSSの基礎」に、リダイレクトを残さずに移動しました

2024-02-12T01:11:46Z

Wiki がページ「CSS - 基礎」を「CSS - CSSの基礎」に、リダイレクトを残さずに移動しました

← 古い版	2024年2月12日 (月) 10:11時点における版
(相違点なし)

2024年2月12日 (月) 01:11にWikiによる

2024-02-12T01:11:19Z

← 古い版		2024年2月12日 (月) 10:11時点における版
159行目:		159行目:
	<br><br>		<br><br>

	== 背景色 ==		== ボックス ==
			==== ボックスについて ====
			CSSでは、サイズ、色、位置等を指定することができる。<br>
			<br>
			これは、Webページ上の多くのHTML要素は、他のボックスの上に置かれたボックスと考えることができる。<br>
			CSSのレイアウトの多くはボックスモデルに基づいており、Webページ上のスペースを占める各ボックスには、以下に示すようなプロパティがある。<br>
			* padding
			*: コンテンツの周りのスペース。
			*: 下図では、段落テキストの周りのスペースのことである
			* border
			*: パディングのすぐ外側にある実線
			* margin
			*: ボーダーの外側のスペース
			* width
			*: 要素の幅
			* background-color
			*: 要素の内容と<code>padding</code>の背景色
			* color
			*: 要素の内容 (テキスト等) の色
			* text-shadow
			*: 要素内のテキストの影
			* display
			*: 要素の表示モード
			<br>
			==== 背景色 ====
	ページ全体の背景色を指定する。<br>		ページ全体の背景色を指定する。<br>
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
166行目:		190行目:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~<br>~~<br>		<br>
			==== ボディのスタイリング ====
	== ボディのスタイリング ==
	<code><body></code>要素には、いくつかの宣言がある。<br>		<code><body></code>要素には、いくつかの宣言がある。<br>
	* width		* width
192行目:		215行目:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~<br>~~<br>		<br>
			==== 見出しの位置とスタイル ====
	== 見出しの位置とスタイル ==
	<body>の上部には、大きな隙間がある。<br>		<body>の上部には、大きな隙間がある。<br>
	これは、スタイリングされていないページに読みやすさを提供することが意図されており、Webブラウザがh1要素にデフォルトのスタイルを適用するためである。<br>		これは、スタイリングされていないページに読みやすさを提供することが意図されており、Webブラウザがh1要素にデフォルトのスタイルを適用するためである。<br>
215行目:		237行目:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~<br>~~<br>		<br>
			==== 画像 ====
	== 画像 ==
	画像に対してCSSを指定する場合、<code>body</code>タグと同様、<code>margin: 0 auto</code>等を使用することもできる。<br>		画像に対してCSSを指定する場合、<code>body</code>タグと同様、<code>margin: 0 auto</code>等を使用することもできる。<br>
	しかし、CSSを機能させるために追加設定が必要な場合がある。<br>		しかし、CSSを機能させるために追加設定が必要な場合がある。<br>

Wiki: /* 背景色 */

2024-02-12T01:03:34Z

背景色

@@ 164行目: / 164行目: @@
   html {
      background-color: #ffffff;
+  }
   </syntaxhighlight>

Wiki: /* 見出しの位置とスタイル */

2024-02-11T23:45:07Z

見出しの位置とスタイル

← 古い版		2024年2月12日 (月) 08:45時点における版
155行目:		155行目:
	line-height: 2;		line-height: 2;
	letter-spacing: 1px;		letter-spacing: 1px;
			}
			</syntaxhighlight>
			<br><br>

			== 背景色 ==
			ページ全体の背景色を指定する。<br>
			<syntaxhighlight lang="css">
			html {
			background-color: #ffffff;
	}		}
	</syntaxhighlight>		</syntaxhighlight>

Wiki: /* フォントとテキスト */

2024-02-11T23:41:38Z

フォントとテキスト

@@ 157行目: / 157行目: @@
+  }
   </syntaxhighlight>
 <br><br>

Wiki: ページの作成:「== 概要 == CSS (Cascading Style Sheets) とは、Webコンテンツをスタイル設定するコードである。
テキストの色の変更、コンテンツ (Webページ) のレイアウト位置の変更、背景画像を使用してWebページを装飾する等の様々なことができる。

CSSはプログラミング言語やマークアップ言語ではなく、スタイルシート言語である。
CSSは、HTML要素を選択的…」

2024-02-11T23:00:19Z

ページの作成:「== 概要 == CSS (Cascading Style Sheets) とは、Webコンテンツをスタイル設定するコードである。 テキストの色の変更、コンテンツ (Webページ) のレイアウト位置の変更、背景画像を使用してWebページを装飾する等の様々なことができる。 CSSはプログラミング言語やマークアップ言語ではなく、スタイルシート言語である。 CSSは、HTML要素を選択的…」

新規ページ

== 概要 ==
CSS (Cascading Style Sheets) とは、Webコンテンツをスタイル設定するコードである。 
テキストの色の変更、コンテンツ (Webページ) のレイアウト位置の変更、背景画像を使用してWebページを装飾する等の様々なことができる。 
 
CSSはプログラミング言語やマークアップ言語ではなく、スタイルシート言語である。 
CSSは、HTML要素を選択的にスタイル設定するために使用する。 
 

== CSSの使用 ==
まず、以下に示すCSSをstylesという名前のディレクトリにstyle.cssという名前で保存する。 
以下の例では、段落テキストの色を赤に設定している。 
<syntaxhighlight lang="css">
p {
color: red;
}
</syntaxhighlight>
 
CSSを動作させるには、htmlファイルに適用する必要がある。 
CSSをhtmlファイルで指定するには、 <head>タグと</head>タグの間にCSSファイルを適用する。 (インラインスタイルを除く) 
* 外部スタイルシート (External Stylesheet) を指定する方法
*: 複数のHTMLファイルで共有されるスタイルを、効率的に管理するために使用される。
* 埋め込みスタイル (Embedded Styles) を使用する方法
*: 特定のHTMLファイルにのみ適用されるスタイルを定義する場合に使用する。
* インラインスタイル (Inline Styles) を使用する方法
*: 特定の要素に対して、個別にスタイルを適用する場合に使用される。
 
==== 外部スタイルシート (External Stylesheet) を指定する方法 ====
<syntaxhighlight lang="html">
<head>
<link rel="stylesheet" href="styles/style.css" />
</head>
</syntaxhighlight>
 
==== 埋め込みスタイル（Embedded Styles）を使用する方法 ====
<syntaxhighlight lang="html">
<head>
<style>
/* CSSスタイルを直接記述 */
body {
background-color: lightblue;
}
</style>
</head>
</syntaxhighlight>
 
==== インラインスタイル (Inline Styles) を使用する方法 ====
<syntaxhighlight lang="html">
<head>

</head>
<body style="background-color: lightblue;"> 

</body>
</syntaxhighlight>
 

== CSSのルールセット ==
CSSの構造全体をルールセットと呼ぶ。 (ルールセットは、単にルールとも呼ばれることもある) 
 
* セレクタ
*: ルールセットの最初にあるHTML要素名である。
*: スタイルを設定する要素 (上記の例では、要素) を定義する。
* 宣言
*: これは、color: red;のような単一の規則である。
*: 要素のどのプロパティにスタイルを適用するかを指定する。
* プロパティ
*: HTML要素のスタイルを指定する。 (上記の例では、colorは要素のプロパティ)
*: CSSでは、ルールの中でどのプロパティに影響を与えるかを選択する。
* プロパティの値
*: プロパティの<code>;</code>(コロン)の後には、プロパティ値がある。
*: これは、与えられたプロパティの多くの可能な外観の中から1つを選択する。
 
ルールには、他にも重要な部分がある。 
* 各ルールセットは、<code>{}</code>で括る必要がある。
* 各宣言の中では、<code>:</code>(コロン)を使用して、プロパティとその値を区切る必要がある。
* 各ルールセットの中では、<code>;</code>(セミコロン)を使用して、各宣言と次の宣言を区切る必要がある。
 
1つのルールセットで複数のプロパティ値を変更する場合は、セミコロンで区切って記述する。 
<syntaxhighlight lang="css">
p {
color: red;
width: 500px;
border: 1px solid black;
}
</syntaxhighlight>
 

== 複数の要素の選択 ==
複数の要素を選択して、それら全てに単一のルールセットを適用することができる。 
複数のセレクタを指定する場合は、<code>,</code>(カンマ)で区切る。 
<syntaxhighlight lang="css">
p,
li,
h1 {
color: red;
}
</syntaxhighlight>
 

== セレクタの種類 ==
セレクタには多くの種類が存在する。 
 
要素セレクタは、指定したタイプの要素を全て選択するものであるが、より特定の要素を選択することもできる。 
 
<center>
{| class="wikitable"
|+ 一般的なセレクタの種類
|-
! セレクタ名 !! 選択するもの !! 例
|-
| 要素セレクタ (タグセレクタ、タイプセレクタとも呼ばれる) || 指定されたタイプの全てのHTML要素 || p selects <nowiki></nowiki>
|-
| IDセレクタ || 指定されたIDを持つページ上の要素 指定されたHTMLページでは、各ID値は一意である必要がある。 || #my-id selects <nowiki></nowiki> <a id="my-id">
|-
| クラスセレクタ || 指定されたクラスを持つページ上の要素 同じクラスの複数のインスタンスをページに表示することができる。 || .my-class selects <nowiki></nowiki> <a class="my-class">
|-
| 属性セレクタ || 指定された属性を持つページ上の要素 || img[src] selects <img src="myimage.png"> <img>のみは不可
|-
| 擬似クラスセレクタ || 指定された要素 (複数可) ただし、指定された状態にある時のみ可能。 (例えば、カーソルがリンクの上にある場合等) || a:hover selects <a>は、<a>を選択しているが、マウスポインタがリンクの上にある時場合のみとなる。
|}
</center>
 
さらに多くのセレクタが存在するため、詳細を知りたい場合は[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors MDNセレクタガイド]を参照すること。 
 

== フォントとテキスト ==
HTMLファイルのheadタグ内にに<link>要素を追加する。 
<syntaxhighlight lang="css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
</syntaxhighlight>
 
以下の例に示すように、フォントファミリーを割り当てる。 
<code>font-family</code>プロパティは、テキストに使用するフォントを指定する。 
 
このルールは、ページ全体のグローバルベースフォントとフォントサイズを定義するものである。 
<code><html></code>タグはページ全体の親要素であるため、その中の全ての要素は同じ<code>font-size</code>と<code>font-family</code>を継承する。 
<syntaxhighlight lang="css">
html {
font-size: 10px;
font-family: "Open Sans", sans-serif; /* Google Fontsから出力された残りの部分 */
}
</syntaxhighlight>
 
HTML本文の中にテキストが入る要素のフォントサイズ、デザインを指定する。 
また、行の高さおよび文字間隔も指定する。 
<syntaxhighlight lang="css">
h1 {
font-size: 60px;
text-align: center;
}

p,
li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
</syntaxhighlight>
 

__FORCETOC__
[[カテゴリ:Web]]