カスタム検索

style属性によるスタイルの適用

最も簡単にスタイルを適用する方法として、タグにstyle属性を記述する方法があります。この方法はインラインスタイルとも呼ばれます。

次の入力例では、<div>にstyle属性を使用して、前景色(文字色)を指定しています。

style_inline.html
<html>
    <head>
        <title>タイトル</title>
    </head>
    <body>
        <div style="color: red">
            赤い文字
        </div>
    </body>
</html>

style属性の値の記述方法

上の例のように、style属性の値は、「:」(コロン)があることで、他の属性の値よりも少し変わった記述になっています。

「:」の前に「color」と記述されている部分が、スタイルのプロパティ(特性)を表し、「:」の後のredの部分がプロパティのを表しています。例では、プロパティが前景色(文字色)を指定するcolorで、値がredになっています。

<div style=" color : red ">
<div>タグで、スタイルは 前景色(プロパティ) 赤(プロパティの値) です

style属性の値に、プロパティを記述し、「:」で区切り、プロパティの値を記述します。「:」の後のスペースは、あってもなくても構いません。

スタイルの複数指定

スタイルは、複数指定することもできます。プロパティとその値の組み合わせの後に、「;」(セミコロン)で区切って記述します。

style_inline2.html
<html>
    <head>
        <title>タイトル</title>
    </head>
    <body>
        <div style="color: red; background: yellow">
            黄色の背景色に赤い文字
        </div>
    </body>
</html>

「;」の後のスペースは、読みやすくするために設けているので、あってもなくても構いません。「:」(コロン)と「;」(セミコロン)は似ているので入力ミスに気をつけてください。

style属性によったスタイル適用の使用用途

このように、style属性を記述していく方法は、スタイルを適用したい全てのタグにstyle属性を指定しなければなりません。これでは、従来のタグを使って指定する方法と比べてみても、時間や手間の面では変わりありませんし、記述が長くなり、読みにくいため、入力ミスも起きやすくなります。

style属性を使用したスタイルの適用は、Webサイト内で1〜数箇所しかスタイルを適用しないといった局所的な使用か、学習のためにCSSの効果を簡単に試してみたいといった用途に限定されるでしょう。

まとめ
  • スタイルの適用には、タグにstyle属性を指定する方法(インラインスタイル)がある
  • style属性には、プロパティの後に「:」(コロン)で区切って、を記述する
  • 複数指定する場合は「;」(セミコロン)で区切る
CopyLeft 2022 Webデザインレッスン プライバシーポリシー サイト管理者に連絡