CSSの記述方法 - タグに直接記述

最も簡単なCSS記述法 - HTMLタグ内へのCSSの書き方について。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

CSSの記述方法 - タグに直接記述

最も簡単なCSSの記述方法は、次のような記述をHTMLタグに直接埋め込む方法です。「style」という属性を指定し、そこでCSSの記述を行います。では、具体的な使用方法を見てみましょう。

HTMLタグ内へのCSSの書き方

例1:STRONGタグ内の文字色を赤にする。

[HTML/CSSの記述]

<strong style="color:#ff0000">テキスト</strong>

[ブラウザ上の表示]

テキスト

例2:DIVタグ内の背景色を青に、文字色を白にする。

[HTML/CSSの記述]

<div style="background:#0000ff;color:#ffffff;">テキスト</div>

[ブラウザ上の表示]

テキスト
例3:画像ファイルの幅、高さを指定し、罫線を緑の実線3pxとする。

[HTML/CSSの記述]

<img alt="" src="hogehoge.jpg" style="border:solid 3px #009900;" />

[ブラウザ上の表示]

以上のように、HTMLタグの作成過程でCSSを追記していけるため、簡易的な指定に向きます。しかし、これを多用すると、後でデザインを変更したくなったときに、全ページを修正しなければなりませんので、頻繁に出てくる指定は、idもしくはclassセレクタを指定し、外部ファイルに記述するようにしましょう。