参考にした記事

学んだこと

・インライン定義の書き方。
・style定義の書き方。
・CSSのセレクターの種類。
・CSSを別ファイルで定義する方法。

写経 && 実験したコード

htmlのファイル

<html>
	<body>
		<div>インライン定義の書き方 (htmlのタグの中に直接CSSを定義する) </div>
		<button style="width: 200px; height: 50px; background-color: paleturquoise; color: plum; ">my button</button>
		<input type="text" style="width: 200px; height: 30px; background-color: paleturquoise; color: plum; ">

		<div>style定義の書き方  (styleのタグの中にCSSを定義する) </div>
		<button >my button2</button>
		<input type="text">

		<div>style定義の書き方 <font color="red">class</font>を指定するver<font color="red">1</font>.  (styleタグの中にCSSを定義する) </div>
		<button class="button3">my button3</button>
		<input type="text" class="text3">

		<div>style定義の書き方 <font color="red">class</font>を指定するver<font color="red">2</font>.  (styleタグの中にCSSを定義する) </div>
		<div>class名はidとは違い、class名は重複しても良いのでその特徴を活かして複数あるボタンの装飾を一括で定義（管理）する </div>
		<button class="button4">my button4</button>
		<button class="button4">my button4</button>

		<div>style定義の書き方 <font color="red">id</font>を指定するver<font color="red">1</font>.  (styleタグの中にCSSを定義する) </div>
		<button id="button5">my button5</button>
		<input type="text" id="text5">

		<div>style定義の書き方 <font color="red">id</font>を指定するver<font color="red">2</font>.  (styleタグの中にCSSを定義する) </div>
		<button id="button6">my button6</button>
		<button id="button7">my button7</button>
	</body>
	<style>
		/* style定義の書き方  (styleのタグの中にCSSを定義する)  */
		button,input{
			width: 200px;
			height: 30px;
			background-color: plum;
			color:  paleturquoise;
		}

		/* style定義の書き方 classを指定するver. (styleのタグの中にCSSを定義する) */
		.button3 {
			width: 200px;
			height: 50px;
			background-color: plum;
			color: palegoldenrod;
		}
		.text3 {
			width: 200px;
			height: 30px;
			background-color: plum;
			color: palegoldenrod;
		}
		/* style定義の書き方 classの特徴を活かして一括指定するver. (styleのタグの中にCSSを定義する) */
		.button4 {
			width: 200px;
			height: 50px;
			background-color: plum;
			color: palegoldenrod;
		}

		/* style定義の書き方 idを指定するver1. (styleのタグの中にCSSを定義する) */
		#button5 {
			width: 200px;
			height: 50px;
			background-color: palegoldenrod;
			color: plum;
		}
		#text5 {
			width: 200px;
			height: 30px;
			background-color: palegoldenrod;
			color: plum;
		}

		/* style定義の書き方 idを指定するver2. (styleのタグの中にCSSを定義する) */
		#button6 {
			width: 200px;
			height: 30px;
			background-color: palegreen;
			color: palevioletred;
		}
		#button7 {
			width: 200px;
			height: 30px;
			background-color: palevioletred;
			color: palegreen;
		}
	</style>
</html>

ブラウザ

実験
インライン定義とstyle定義のタグセレクタではどちらが優先されるのか

<html>
	<body>
		<button style="width: 200px; height: 50px; background-color: paleturquoise; color: plum;">my button</button>
		<input type="text" style="width: 200px; height: 30px; background-color: paleturquoise; color: plum;">
	</body>
	<style>
		button, input {
			width: 200px;
			height: 30px;
			background-color: palevioletred;
			color: palegreen;
		}
	</style>
</html>

実験結果
htmlに直接CSSを定義するインライン定義の方が優先された。
ブラウザ

インライン定義

インライン定義とは
HTML要素の中に直接スタイルを指定する方法。

メリット
・インライン定義は直接HTML要素にスタイルを指定するので簡単にスタイルを設定することができる。（ちょっとここだけ直してみるか的な）
・一時的なスタイルの指定や特定の要素にのみ適用するスタイルの設定には便利。
・インライン定義は他のスタイル指定方法よりも優先順位が高い。

デメリット
・インライン定義は個々の要素に対してスタイルを指定するので、同じスタイルを複数の要素に適用することができずスタイルの再利用ができない。
・インライン定義はHTMLの中にスタイル情報が散らばるので、スタイルの変更や修正が必要な場合に全てのHTML要素を変更する必要がある。
・複数のHTMLファイルに同じスタイルがある場合には、修正が煩雑になる。
・インライン定義は個々の要素ごとにスタイルが指定されるので、スタイルの一貫性が損なわれる可能性がある。

以下はまだ経験したことない
・大規模なウェブサイトやアプリケーションでは、スタイルの一貫性を保つことが重要らしい。
・インライン定義はHTMLの中にスタイル情報が含まれるので、HTMLファイルのサイズが増大する可能性があるらしい。
・大量のインラインスタイルがある場合には、パフォーマンスの問題が発生する可能性もあるらしい。

style定義

style定義とは
・styleのタグの中にCSSを定義する方法。

style定義の補足
・style定義のメリデメはインライン定義と似ているので省略します。
・インライン定義よりstyle定義をした方が、定義する要素が縦並びなので見やすいと思う。
・インライン定義とstyle定義同時に定義したらインライン定義が優先される。

CSSのセレクターの種類

CSSのセレクターとは
・セレクターを使うことで、ウェブページの特定の要素にスタイルを装飾（適用）することができます。
・ウェブページの要素（例えば、テキストや画像などのコンテンツ）を特定するために使う。
・セレクターにはいくつかの種類がある。　CSSのセレクター | MDN

タグセレクター
・装飾したいHTMLタグをタグ単位で選択できる。
・「写経 && 実験したコード」で書いたbuttonセレクタはすべてのbuttonタグを装飾できる。

classセレクター
・装飾したいHTMLタグの中にあるクラス単位で選択できる。
・class名は要素につけることができる特別な名前。
・class名はidセレクターと異なり、重複しても扱うことができ一括管理ができる。

idセレクター
・装飾したいHTMLタグの中にあるid単位で選択できる。
・idセレクターはclass名と異なり、重複しても扱うことができないが個別の管理ができる。

CSSを別ファイルで定義する方法

・htmlファイルで書いたstyleタグの内容をCSSのファイルに書くだけ。

htmlのファイル

<html>
	<head>
		<link rel="stylesheet" href="my.css">
	</head>
	<body>
		<div>インライン定義の書き方 (htmlのタグの中に直接CSSを定義する) </div>
		<button style="width: 200px; height: 50px; background-color: paleturquoise; color: plum; ">my button</button>
		<input type="text" style="width: 200px; height: 30px; background-color: paleturquoise; color: plum; ">

		<div>style定義の書き方  (styleのタグの中にCSSを定義する) </div>
		<button >my button2</button>
		<input type="text">

		<div>style定義の書き方 <font color="red">class</font>を指定するver<font color="red">1</font>.  (styleタグの中にCSSを定義する) </div>
		<button class="button3">my button3</button>
		<input type="text" class="text3">

		<div>style定義の書き方 <font color="red">class</font>を指定するver<font color="red">2</font>.  (styleタグの中にCSSを定義する) </div>
		<div>class名はidとは違い、class名は重複しても良いのでその特徴を活かして複数あるボタンの装飾を一括で定義（管理）する </div>
		<button class="button4">my button4</button>
		<button class="button4">my button4</button>

		<div>style定義の書き方 <font color="red">id</font>を指定するver<font color="red">1</font>.  (styleタグの中にCSSを定義する) </div>
		<button id="button5">my button5</button>
		<input type="text" id="text5">

		<div>style定義の書き方 <font color="red">id</font>を指定するver<font color="red">2</font>.  (styleタグの中にCSSを定義する) </div>
		<button id="button6">my button6</button>
		<button id="button7">my button7</button>
	</body>
	<style>
        /* 以下の内容をそのままmycssのファイルに移行する  */

		/* style定義の書き方  (styleのタグの中にCSSを定義する)  */
		/* button,input{
			width: 200px;
			height: 30px;
			background-color: plum;
			color:  paleturquoise;
		} */

		/* style定義の書き方 classを指定するver. (styleのタグの中にCSSを定義する) */
		/* .button3 {
			width: 200px;
			height: 50px;
			background-color: plum;
			color: palegoldenrod;
		}
		.text3 {
			width: 200px;
			height: 30px;
			background-color: plum;
			color: palegoldenrod;
		} */
		/* style定義の書き方 classの特徴を活かして一括指定するver. (styleのタグの中にCSSを定義する) */
		/* .button4 {
			width: 200px;
			height: 50px;
			background-color: plum;
			color: palegoldenrod;
		} */

		/* style定義の書き方 idを指定するver1. (styleのタグの中にCSSを定義する) */
		/* #button5 {
			width: 200px;
			height: 50px;
			background-color: palegoldenrod;
			color: plum;
		}
		#text5 {
			width: 200px;
			height: 30px;
			background-color: palegoldenrod;
			color: plum;
		} */

		/* style定義の書き方 idを指定するver2. (styleのタグの中にCSSを定義する) */
		/* #button6 {
			width: 200px;
			height: 30px;
			background-color: palegreen;
			color: palevioletred;
		}
		#button7 {
			width: 200px;
			height: 30px;
			background-color: palevioletred;
			color: palegreen;
		} */

		/* 実験 */
		/* インライン定義とstyle定義のタグセレクタではどちらが優先されるのか */
		/* button, input {
			width: 200px;
			height: 30px;
			background-color: palevioletred;
			color: palegreen;
		} */
	</style>
</html>

CSSのファイル

/* style定義の書き方  (styleのタグの中にCSSを定義する)  */
button,input{
	width: 200px;
	height: 30px;
	background-color: plum;
	color:  paleturquoise;
}

/* style定義の書き方 classを指定するver. (styleのタグの中にCSSを定義する) */
.button3 {
	width: 200px;
	height: 50px;
	background-color: plum;
	color: palegoldenrod;
}
.text3 {
	width: 200px;
	height: 30px;
	background-color: plum;
	color: palegoldenrod;
}
/* style定義の書き方 classの特徴を活かして一括指定するver. (styleのタグの中にCSSを定義する) */
.button4 {
	width: 200px;
	height: 50px;
	background-color: plum;
	color: palegoldenrod;
}

/* style定義の書き方 idを指定するver1. (styleのタグの中にCSSを定義する) */
#button5 {
	width: 200px;
	height: 50px;
	background-color: palegoldenrod;
	color: plum;
}
#text5 {
	width: 200px;
	height: 30px;
	background-color: palegoldenrod;
	color: plum;
}
/* style定義の書き方 idを指定するver2. (styleのタグの中にCSSを定義する) */
#button6 {
	width: 200px;
	height: 30px;
	background-color: palegreen;
	color: palevioletred;
}
#button7 {
	width: 200px;
	height: 30px;
	background-color: palevioletred;
	color: palegreen;
}