CSSについて学ぶ - ⓈℴÿОⓀ⒜ Ō🅂ªⓚ⒤

＜概要＞

●テキストの意味と画像について
●CSSの基本構造について
●Webページ制作実践

テーマ：HTMLとCSSを結び付けていく

●HTML：テキストの意味
・a 要素（ハイパーリンク）
・em 要素（強調）
・strong 要素（強い重要性）
・small 要素（免責・警告・著作権など）
・i 要素（他と区別されるテキスト（思考・専門用語等））
・b 要素（他と区別されるテキスト（キーワード・製品名等））
・span 要素（特定の範囲をグループ化）
・br 要素（改行）

●HTML：コンテンツの埋め込み
・img 要素（画像）
・iframe 要素（インラインフレーム）

●img 要素（画像）について
<img>タグは画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定する。
一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されている。
他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できる。
alt属性には、画像が利用できない環境向けのテキストを指定する。
HTML5ではalt属性は必須ではないが、指定しておけばアクセシビリティーが高まる。
参考サイト：https://samplesdl.me/training_html-css/sample-img.html

★Webサイトを重くする（表示スピードの低下）の大きな原因の一つは画像サイズ。
WebサイトにUPする画像はPhotoshopやIllustratorでしっかりと画像の最適化をしてUPすると良い。

●特殊文字について
HTMLのコードを記述する時に特別な書き方をする必要のある文字がある。
＜参考サイト＞
HTMLの特殊文字とは？変換方法と特殊文字一覧も紹介
 HTMLで特殊文字を扱う方法
 HTMLの記号・特殊文字の文字コード表

●CSS：セレクタの記載方法
・全称セレクタ
・型セレクタ
・id セレクタ（#）
・class セレクタ（.）
・子孫結合子セレクタ
・子結合子セレクタ（>）
・隣接兄弟結合子セレクタ（+）
・一般兄弟結合子セレクタ（~）

●CSSの基本構造について
A. HTML ファイルとは別に記述する場合
①HTMLの準備

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
	　　<meta name="description" content="">
        <link href="" rel="">
		<title>テストサイト</title>
	</head>
	<body>
		<div>
			<div>
			</div>
			<div>
			</div>
		</div>	
        <p>こんにちは</p>	
	</body>
</html>

②上記とは別でCSSのファイルを準備する
ファイル名：style.css
今回は文字の色を変える操作をしてみる。

p {
    color: red;
}

※CSSのルールセットをとにかくまず覚える
例）p{color:red;}
意味：<p>の要素に{}を行う。
CSSのルールセットはセレクタとブレース（中括弧）で囲まれた宣言で構成されており、宣言にはプロパティと値が含まれる。
※「:」は主にプロパティと値の区切りや、疑似クラス・疑似要素の指定に使用される。
「;」は各宣言（プロパティと値のペア）の終わりを意味する。

③HTMLに戻って書き加える

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
	　　<meta name="description" content="">
        <link href="style.css" rel="stylesheet">
		<title>テストサイト</title>
	</head>
	<body>
		<div>
			<div>
			</div>
			<div>
			</div>
		</div>	
        <p>こんにちは</p>	
	</body>
</html>

ここまでの操作で以下のように文字に色がついた！

B. HTML ファイル内に記述する場合
①HTMLファイル内のみで以下書き換えてみる
（CSSファイルは消してOK）

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
	　　<meta name="description" content="">
        <link href="style.css" rel="stylesheet">
		<title>テストサイト</title>
        <style>
            p {
            color: #ff4500;
            }
        </style>
	</head>
	<body>
		<div>
			<div>
			</div>
			<div>
			</div>
		</div>	
        <p>こんにちは</p>	
	</body>
</html>

C. HTML タグにインラインで記述する場合
①HTMLファイル内のみで以下書き換えてみる
（CSSファイルは消してOK）

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
	　　<meta name="description" content="">
        <link href="style.css" rel="stylesheet">
		<title>テストサイト</title>
        <style>
        </style>
	</head>
	<body>
		<div>
			<div>
			</div>
			<div>
			</div>
		</div>	
        <p style="color: #000080;">こんにちは</p>	
	</body>
</html>

●CSS：色は下記でも変えられる
　・カラーネーム
　・#rgb（ハッシュ（#）で始まる 16 進数 3 桁）
　・#rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
　・#rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
　・rgb(r,g,b)（rgb 関数）
　・rgba(r,g,b,a)（rgba 関数）
　・hsl(h,s,l)（hsl関数）
　・hsla(h,s,l,a)（hsla関数）
　・線形グラデーション（linear-gradient 関数）
　・放射グラデーション（radial-gradient 関数）

例）上記でredと入れた部分にdarkgreenのコード「#006400」を入れる。↓

●CSSとの紐付けについて
HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用される。
①HTMLファイルに以下記載する

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
	　　<meta name="description" content="">
        <link href="style.css" rel="stylesheet">
		<title>テストサイト</title>
	</head>
	<body>
		<div class="oya">
			<div>
			</div>
			<div>
			</div>
		</div>	
        <p>こんにちは</p>	
	</body>
</html>

②CSSファイルに以下記載する

@charset "utf-8";

/* p {
    color: #ffff00;
} */

.oya {
    background: #000;
}

③CSSファイルのoyaの中に以下記載する
background: #000;
width: 800px;
height:800px;

ここまで↓

④HTML（上）とCSS（下）に下記を記載する

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
	　　<meta name="description" content="">
        <link href="style.css" rel="stylesheet">
		<title>テストサイト</title>
	</head>
	<body>
		<div class="oya">
			<div class="kodomo_a">
			</div>
			<div class="kodomo_b">
			</div>
		</div>	
        <p>こんにちは</p>	
	</body>
</html>

@charset "utf-8";

/* p {
    color: #ffff00;
} */

.oya {
    background: #000;
    width: 800px;
    height:800px;
}

.kodomo_a {
    background: #778899;
    width: 200px;
    height:200px;
}

.kodomo_b {
 background: #ff00ff;
    width: 200px;
    height:200px;
}

⑤HTMLのkodomo_bをaに変える
⑥HTMLのbodyの子供にidコードを付ける
<div id=”test”>
※classは使いまわしできるがidは出来ないため、複数回出現する場合はid1、id2のように名前を新しく作る必要がある。（なので基本的にはidはひとつにし、あとはclassを使う）

●CSS：幅・高さの単位
・px（ピクセル値）
・%（要素の割合（百分率））
・em（要素の割合）
・rem（ルート要素の割合）
・vw（画面の表示幅の割合）
・vh（画面の高さの割合）
・calc 関数（値の計算）

pxはそのままの意味で大きさが確定する（絶対値）が、それ以外は割合が確定する（相対値）。
→pxは100pxであればブラウザの大きさを変えても100pxが表示される（ブラウザのサイズが足りないときは見切れる）。
　%はブラウザの大きさを変えても100%であれば常に画面いっぱい表示される（ブラウザのサイズと合わせて変動する）。
近年は、デバイスの種類が増えたためブラウザのサイズが人により異なることがデフォルトであり、相対値で指定することが一般的。

★CSS：コメントアウト「/*」「*/」
要素の命令を文字を消すことなく効力をなくすことができる記号。
いらない命令を「/*」「*/」で囲む。
ちなみにHTMLは「<!–」「–>」。
参考：https://samplesdl.me/training_html-css/sample-commentout.html