HTML 入門

スタイルシートでデザインを作ろう

HTML内にスタイルを記述する

これまでの作業では HTML ファイルとは別に CSS ファイルを準備して，その CSS ファイルにページのデザインを入力しました．一方で，CSS ファイルを準備することなく，HTML 文書内に直接スタイルを記述することもできます．この場合は <head> の内部に <style> タグを記述し，その中に CSS ファイルと同じルールでスタイルを記述すれば可能です．しかしながら，通常はサイト内に複数の（多数の）HTML ファイルが存在するはずで，サイト全体のデザインを変更するときにはすべての HTML ファイルについて該当箇所を修正しなければなりません．デザインを CSS にまとめて記述しておけば，1つの CSS ファイルのわずか1行を修正するだけでサイト全体のデザインを変更できます．したがって，サイトのデザインに関するスタイルは CSS にまとめて記述し，HTML には文書のコンテンツだけを記述する方が効率的であることが理解できるでしょう．

index.html（抜粋）
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>スタイルシート</title>
  <style>
    h1 {
      color: #ff0000;
    }
    h2 {
      color: #00a000;
    }
    p {
      color: #0000ff;
      text-indent: 16px;
    }
  </style>
</head>
<body>
  <h1>スタイルシート</h1>
  <h2>CSS ファイルの準備して読み込む</h2>
  <p>拡張子が.cssのファイルを準備します．．．</p>
  <h2>表示を確認する</h2>
  <p>ブラウザで表示を確認します．．．</p>
</body>
</html>

ブラウザでの表示結果

スタイルシート

CSS ファイルの準備して読み込む

拡張子が.cssのファイルを準備します．拡張子が.cssのファイルを準備します．拡張子が.cssのファイルを準備します．拡張子が.cssのファイルを準備します．拡張子が.cssのファイルを準備します．

表示を確認する

ブラウザで表示を確認します．ブラウザで表示を確認します．ブラウザで表示を確認します．ブラウザで表示を確認します．ブラウザで表示を確認します．ブラウザで表示を確認します．ブラウザで表示を確認します．

目次に戻る