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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

スタイルシートの記述方法(2)
【style属性を使って記述する方法】

スタイルを、HTML中のたった一カ所のタグに対してだけ適用したい場合には、style属性を使って「タグの中」にスタイルを記述できます。

記述場所

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

<html>
<head>
<title>……</title>
</head>

<body>
本文
<hoge style="スタイルいろいろ">……</hoge>

本文
</body>
</html>

本文中(body要素内)に記述した特定のタグ(何でも構いません)の開始タグ内に、style属性を加え、そこにスタイルを記述します。

記述詳細

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

<div style="color: darkblue; line-height: 1.4;">
   …本文…
</div>

上記の場合は、<div>タグに style属性を付加して、<div style="~">とし、そこにスタイルを記述しています。
スタイルのプロパティ(と値)は複数列挙できます。 上記では、colorプロパティと line-heightプロパティの2つ(※)を指定しています。
※color(文字色)をdarkblue(暗い青色)に、line-height(行の高さ)を1.4倍(標準の高さの1.4倍)にする、という指定になります。

(補足) スタイルの記述

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

style属性を用いる場合のスタイルは、次のように記述します。

プロパティ : ;

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

color: green;

この場合は、colorプロパティ(色を設定します)の値を green(緑)に設定しています。 (その結果、文字が緑色で表示されるようになります。)

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

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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