ホームページ作成/HTML・スタイルシート(CSS)の基礎

入門!スタイルシートを使う3つの方法(2ページ目)

スタイルシート活用テクニックを見るたびに、「そのスタイルシートは、一体どのようにしてHTMLに組み込めば良いのか?」と感じている方々の疑問を解消致します。スタイルシート記述準備講座。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

スタイルシートの記述方法(1)
【style要素を使って記述する方法】

HTMLファイル中に、style要素(<style>~</style>というタグ)を使って、スタイルシートをまとめて記述する方法があります。
この方法で指定すると、「そのページ内全体で有効」なスタイルになります。

記述場所

HTMLソース内で記述する場所は次の通りです。

<html>
   <head>
<title>……</title>
<style type="text/css">
ここにスタイルを列挙
</style>
</head>
<body>
本文
</body>
</html>

HTMLファイル中には、先頭付近に <head>~</head> で囲まれた部分(head要素)が存在します。 ここには、ページタイトルや文字コードの記述など、本文としては表示されない様々な情報が記述されています。
このhead要素の中に、スタイルシートもまとめて記述します。

記述詳細

具体的には、次のように記述します。

<style type="text/css">
   p  { font-size: smaller; color: blue; }
   h1 { color: maroon; font-weight: normal; }
   h2 { color: darkblue; font-weight: normal; }
</style>

開始タグ <style type="text/css"> と、終了タグ </style> を記述して、その中に、スタイルを記述していきます。スタイルはいくつ記述しても構いません。全部まとめてこの中に記述します。

(補足) スタイルの記述

今回の記事は、スタイルシートの記述場所を解説するのが目的ですので、スタイルそのものの記述方法に関しては述べません。
以下に、簡単にだけ触れておきます。

スタイルは、次のように記述します。

セレクタ { プロパティ : ; }

実際に例を書いてみると、次のようになります。

div { font-size : 12pt ; }

上記の例は、『div要素(<div>~</div>で囲まれた部分)の font-size(文字サイズ)を 12pt で表示する』という指定になります。

「セレクタ」とは簡単に言えば「タグの名前」です。「どの要素に適用するのか」ということを指定します。
「プロパティ」は簡単に言えば「スタイルの種類」です。「文字サイズ」や「余白」など様々な種類が存在します。
「値」は、種類に対して「どのような指定を行うか」を指定します。例えば「16ポイント」や「20ピクセル」などです。

それでは、次の方法を見ていきましょう。

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます