Zenn
🤖

【初学者によるまとめ】この一冊で全部わかるWeb技術の基本　「Chapter4」＞「04 CSS」

2024/12/19に公開
CSS
HTML
web技術の基本
スタイルシート
tech

目的：「イラスト図解式 この一冊で全部わかるWeb技術の基本」の要点を自分なりにまとめ、Qiitaへアウトプットして理解力の向上に努める。

注意点
🤔 ←この絵文字の文章は個人的な見解になります。的外れなこともあるかと思います。
例）🤔<(感想、考察、疑問点など)

（参考書籍）

  1. イラスト図解式 この一冊で全部わかるWeb技術の基本

（参考サイト）

  1. MDN

概要

HTMLの体裁を記述

  • 「CSSはデザイン面で使用される」というものの、HTML単体でもWebページの装飾は可能

（例１：HTMLだけでの装飾したサンプルコード）

HTML単体での装飾（ChatGPTより生成）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using Font Tag for Styling Example</title>
</head>
<body>
  <p><font size="5" face="Arial, sans-serif" color="#333">This paragraph uses the <code>&lt;font&gt;</code> tag for styling.</font></p>
  <p><font size="4" face="Verdana, sans-serif" color="#666">You can specify attributes like <code>size</code>, <code>face</code>, and <code>color</code> directly within the <code>&lt;font&gt;</code> tag to control text appearance.</font></p>
  <p><font size="3" face="Georgia, serif" color="#999">This is another example with different font face and smaller size.</font></p>
</body>
</html>

（画像１：サンプルコード１のブラウザ表示結果）
image.png

  • CSSが無かった時でも、サンプルのように<font>タグを使用した装飾は可能だった
    • だた、以下のような欠点が生じたりと不便な面があった
      1. HTMLにデザインについての記述を書いている以上かなり可読性が落ちる
      2. 個々の要素にデザインの記述を書く必要があり、手間がかなりかかる

Q．HTML単体でデザインを施せるのに、CSSはなんで必要なのか？

A．HTMLからデザインについての記述を切り離すことが可能になり管理が容易になる

  • HTMLとCSSを分離することで「HTMLの記述をシンプルにできる」「HTMLに適応するCSSを'class'で指定可能になり、要素毎にデザインについての記述を書く必要が無くなる」

🤔<(保守性が向上するという点でかなり恩恵が大きいと言える)

（例２：例１のコードをHTMLとCSSに切り離したサンプルコード）

フォルダー
├── index.html
└── styles.css
HTML（ChatGPTより生成）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using Font Tag for Styling Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="font-size-5">This paragraph uses the <code>&lt;font&gt;</code> tag for styling.</p>
  <p class="font-size-4">You can specify attributes like <code>size</code>, <code>face</code>, and <code>color</code> directly within the <code>&lt;font&gt;</code> tag to control text appearance.</p>
  <p class="font-size-3">This is another example with different font face and smaller size.</p>
</body>
</html>
CSS（ChatGPTより生成）
.font-size-5 {
    font-size: 24px; /* equivalent to size="5" in font tag */
    font-family: Arial, sans-serif;
    color: #333;
}
  
.font-size-4 {
    font-size: 18px; /* equivalent to size="4" in font tag */
    font-family: Verdana, sans-serif;
    color: #666;
}
  
.font-size-3 {
    font-size: 14px; /* equivalent to size="3" in font tag */
    font-family: Georgia, serif;
    color: #999;
}

（画像２：サンプルコード２のブラウザ表示結果）
image.png

Discussion