【HTML＆CSS】Webのデザインを作る！CSSの基本

おはようございます！

8月6日火曜日。やや曇り（晴れ間あり）。
最高気温33℃（東京）。普通に暑いι(´Д｀υ)ｱﾂｨｰ

四の五の言わず、今日も学んでまいります。

今日の教材は普通にこちら、

よしやっていこう。
本日から３章突入です！

CHAPTER３　Webのデザインを作る！CSSの基本

CHAPTER３－１

CSSとは

◆HTMLを飾り付けるのがCSS

　CSS（Cascading Style Sheets）は、文書の見た目を装飾してWebページの見た目やレイアウトを整えるための言語。

HTMLと組み合わせて使用され、文字の色や大きさ、背景色、配置などを指定することができる。

CSSファイルを保存するときの拡張子は「.css」となる。

文字の装飾：色、フォント、サイズ、下線などを指定できる。
レイアウトの調整：要素の位置を中央揃えにしたり、左右に配置したりできる。
背景の設定：背景色や背景画像を設定できる。
アニメーション：簡単なアニメーションを作成することも可能。

CHAPTER３－２

CSSを適用させる方法

･･･適用させる３つの方法。

◆CSSファイルを読み込んで適用させる（1つ目）

「.css」の拡張子が付いたCSSファイルを作成し、それをHTMLファイルに読み込ませて適用させる。この方法を「外部スタイルシート」という。

この方法が最も一般的。1つのCSSファイルを複数のHTMLファイルに読み込ませられるので一括管理ができる。

＜適用方法＞

　HTMLファイルの<head>タグ内に<link>タグを使ってCSSファイルを指定。rel属性に「stylesheet」、href属性に作成したCSSファイル名を指定すれば、CSSファイルに書かれた装飾を適用できる。

<!DOCTYPE html>
<html lang=”ja”>
<head>
　<meta charset=”UTF-8″>
　<meta name=”description” content=”Webデザインの神髄”>
　<title>CSSの例</title>
　<link rel=”stylesheet” href=”style.css“>
</head>
<body>
　<h1>こんにちは、Webデザインの世界</h1>
　<p>これはCSSの例です。</p>
</body>
</html>

◆HTMLファイルの<head>タグ内に<style>タグで指定する（２つ目）

HTMLファイルの<head>タグ内にCSSを直接書き込む。この方法を「内部スタイルシート」と呼び、CSSを記述したHTMLファイルでのみ適用される。特定のページのみ、デザインを変えたいというときに有効。

＜メリット＞

簡単な管理：小規模なプロジェクトや単一のページでは、スタイルを一箇所にまとめることで管理が容易。
即時適用：HTMLファイル内に直接書き込むため、変更が即座に反映される。
外部ファイル不要：外部のCSSファイルを作成・リンクする手間が省ける。

＜デメリット＞

再利用性の低さ：他のページで同じスタイルを使いたい場合、再利用が難しくなる（容易にはできない）。各ページに同じスタイルを繰り返し書く必要がある。
コードの可読性低下：HTMLとCSSが混在するため、コードが長くなり、可読性が低下する。
キャッシュの利用不可：外部CSSファイルはブラウザにキャッシュされるため、ページの読み込み速度が向上するが、内部スタイルシートではこの利点がない。

＜適用方法＞

　HTMLファイルの<head>タグ内に<style>タグを追加し、その中にCSSを記述。

<!DOCTYPE html>
<html lang=”ja”>
<head>
　<meta charset=”UTF-8″>
　<meta name=”description” content=”Webデザインの神髄”>
　<title>内部スタイルシートの例</title>
　<style>
　　body {
　　　background-color: lightblue;
　　}
　　h1 {
　　　color: navy;
　　　text-align: center;
　　}
　　p {
　　　font-family: verdana;
　　　font-size: 20px;
　　}
　</style>
</head>
<body>
　<h3>こんにちは、Webデザインの世界</h3>
　<p>これは内部スタイルシートの例です。</p>
</body>
</html>

◆HTMLタグの中にstyle属性を指定する（３つ目）

　HTMLファイルの各タグ内に直接CSSを書き込む。この方法を「インラインスタイル」と呼び、直接書かれたタグにのみ適用される。

＜メリット＞

特定の要素に即時適用：特定の要素に対してスタイルをすぐに適用したい場合に便利。
外部ファイル不要：外部のCSSファイルを作成・リンクする手間が省ける。
簡単なデバッグ：特定の要素に対してスタイルを試したい場合、インラインスタイルを使うことで簡単にデバッグできる。

＜デメリット＞

再利用性の低さ：他の要素やページで同じスタイルを使いたい場合、再利用が難しくなる。各要素に同じスタイルを繰り返し書く必要あり。
コードの可読性低下：HTMLとCSSが混在するため、コードが長くなり、可読性が低下。
メンテナンスの難しさ：多くのインラインスタイルがあると、後でスタイルを変更する際に手間がかかる。

＜適用方法＞

　タグの中にCSSを書く際は、CSSを適用したいタグの中にstyle属性を使って指定する。

<!DOCTYPE html>
<html lang=”ja”>
<head>
　<meta charset=”UTF-8″>
　<meta name=”discription” content=”Webデザインの神髄”>
　<title>インラインスタイルの例</title>
</head>
<body>
　<h1 style=”color: navy; text-align: center;”>こんにちは、世界！</h1>
　<p style=”font-family: verdana; font-size: 20px;”>これはインラインスタイルの例です。</p>
</body>
</html>