HTML 入門トップページ


目次

  1. ホームページ作成はじめの一歩
  2. HTMLの基礎
  3. 基礎的なタグをマスターしよう
  4. HTML 文書を検証してみよう
  5. スタイルシート
    1. CSS ファイルを準備する
    2. CSS ファイルを読み込む
    3. 表示を確認しておこう
    4. CSS にデザインを記述する
    5. 複数のセレクタに適用する
    6. classを使う
    7. 表のデザイン
    8. 図のデザイン
    9. HTML内にスタイルを記述する
  6. フォームを使ってみよう
  7. 参考サイト

スタイルシート

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

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">
<title>スタイルシート</title>
<style>
  p {
    color: #0000FF;
    text-indent: 20px;
  }
</style>
</head>
<body>
  <h1>スタイルシート</h1>
  <h2>スタイルシートって</h2>
  <p>スタイルシートとは...</p>
  <h2>使い方</h2>
  <p>スタイルシートの使い方は...</p>
</body>
</html>

ブラウザでの表示結果

04-03