CSSについて(設定方法)

CSSとは？

  • HTML：**Webページの構造や内容（骨組み）**を作るもの
  • CSS：その内容の見た目（色・大きさ・配置など）を整えるもの

CSSでできることの例

  • テキストの色やサイズを変える
  • 背景色や画像を設定する
  • レイアウト（要素の位置）を整える
  • スマホ・タブレット用のデザインに対応する（レスポンシブ対応）
  • アニメーションやエフェクトを追加する

HTML + CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: darkblue;
      font-size: 36px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>こんにちは！</h1>
</body>
</html>

この例では、h1 見出しに対して CSSで色・サイズ・中央揃えを指定しています。

CSSの3つの設定方法

  1. インラインスタイル（Inline CSS）
    • HTML要素の style 属性に直接CSSを書きます。
    • 特徴: 特定の要素だけに適用する場合に使いますが、保守性が悪く推奨されません。
    • 例: <p style="color: red; font-size: 16px;">これは赤い文字です</p>
  2. 内部スタイルシート（Internal CSS）
    • <head>タグ内に <style> タグを使ってCSSを書く方法です。
    • 特徴: 単一のHTMLファイル内でスタイルを完結させたい場合に便利です。
    • 例: <html> <head> <style> p { color: blue; font-size: 18px; } </style> </head> <body> <p>これは青い文字です</p> </body> </html>
  3. 外部スタイルシート（External CSS）
    • 別ファイル（例: style.css）にCSSを書き、HTMLからリンクする方法です。
    • 特徴: 複数のHTMLページでスタイルを共通化でき、管理しやすいです。
    • 例（HTML側）: <head> <link rel="stylesheet" href="style.css"> </head>
    • 例（style.css）: p { color: green; font-size: 20px; }

それぞれの使いどころは目的や規模によって変わりますが、基本的には 外部スタイルシート が推奨されます。

コメント