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

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

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

style_inline.html

style属性の値の記述方法

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

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

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

スタイルの複数指定

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

style_inline2.html

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

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

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

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

まとめ

CSS入門

ページの先頭

<style>タグ