スタイルシート

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>

ブラウザでの表示結果

« 戻る次へ »

目次

スタイルシート

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