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

入門!スタイルシートを使う3つの方法

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

スタイルシートに挑戦し始めたばかりの方々から、
よく頂くご質問:

当「ホームページ作成」ガイドサイトでは、スタイルシートを活用する様々なテクニックをご紹介してきました。 例えば、
・「画像上の自由な位置に文字を重ねて表示させる方法」や、
・「ノートのように罫線(下線)を引くデザインを作る方法」、
・「キャプション付き画像を横に並べて配置する方法」や、
・「箱形のページ移動リンクを作る方法」 などです。

その際、次のようなご質問を頂くことがあります。

そのスタイルシートは、一体どのようにして
HTMLに組み込めば良いのか?

多くの記事では、「スタイルシートをHTMLに加える方法」(=HTMLにスタイルシートを適用させる方法)は、知っていることが前提になっています。 そのため、スタイルシートを記述するためのHTMLソースまでは掲載していない記事が大半です。
そこで今回は、スタイルシートをHTMLに組み込む方法をご紹介致します。

スタイルシートの書き方の基礎をご紹介

スタイルシートをHTMLに適用させる記述方法は3通りあります。 どの方法を使っても同じように実現できますので、目的に合った方法を選択してみて下さい。

スタイルシートを使ったテクニックの紹介では、記述するスタイルシートソースとして、例えば以下のような記述が出てきます。

p {
   margin-left: 30px;
   font-size: smaller;
}

上記のソースでは、各段落(p要素)について、「左側に30ピクセルの余白を設け、文字サイズを1段階小さくする」という装飾を加えています。
このようなスタイルシートソースを、「一体HTML内のどこに記述すればよいのか?」という点を、ご紹介いたします。

スタイルシートを記述する3つの方法

3通りの方法について詳しく解説する前に、それぞれの方法の概要をご紹介しておきます。

1.style要素(<style>~</style>)の中に記述する

HTMLには、スタイルシートを記述するための「style」という要素が用意されています。 これを使ってスタイルシートを記述することができます。
この場合は、「その1ページに限って有効」な記述になります。

2.style属性(<TAG style="~">)の中に記述する

あるHTMLタグの中に、「style」という属性を追記して、その中にスタイルシートを記述することもできます。
この場合は、「そのタグだけに対して有効」な記述になります。 臨時に一カ所にだけスタイルを適用させたい場合などに使えます。

3.スタイルシートは別ファイルに記述し、link要素で読み込む

HTMLの中にスタイルシートを書かず、別途独立したファイルにスタイルシートを記述しておくこともできます。 HTML内では「link」という(他のファイルを参照するための)要素を使って、スタイルシートファイルを読み込むように記述します。
この場合は、複数のページに同じスタイルを適用させたい際に使えます。

どの方法を使おうか迷った場合は、とりあえず「1」の方法を採用されると良いでしょう。
※複数のページに共通するスタイルを作成するには「3」の方法を使用するのが一般的ですが、 紹介されているテクニックを一時的に試してみるだけなら「3」の方法は面倒ですので「1」の方法を使うのが楽です。

[準備] スタイルシートソースを記述(編集)するには

スタイルシートソースを作成・編集するには、「テキストエディタ」や「ホームページ作成ソフトのスタイルシート編集機能」を使います。 それらの操作方法については、別の記事「HTML・スタイルシートのソースを編集する方法」で解説していますので、別途ご参照下さい。

それでは、順番に見ていきましょう。

この記事の目次

1. スタイルシートの書き方 概要 (このページ)
2. 記述方法(1) style要素を使って記述する方法
3. 記述方法(2) style属性を使って記述する方法
4. 記述方法(3) 別ファイルに独立させ、link要素で読み込む方法

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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