Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. CSS入門編 - styleタグを使用してCSSを記述してみる

styleタグを使用してCSSを記述してみる

みなさまどうも。いかがお過ごしでしょうか。

続きましてstyleタグを使用してCSSを記述してみましょう。

前の記事でも解説しましたが、基本的にstyleタグはhead要素の中に記述するのがルールとなっています。

styleタグの記述方法は以下です。

<style>
    /* ここにCSSを記述 */
</style>

上記のようにstyleタグの中にCSSを記述します。

では先程の記事と同じようにp要素の文字サイズを18pxにして太字にしてみましょう。

<style>
p {
    font-size: 18px;
    font-weight: bold;
}
</style>

style属性に記述した場合と違い、今度はセレクタの指定が必要になりますので注意してください。

style属性にCSSを記述するとそのデザインが適応されるのはそのstyle属性が記述してある要素のみでしたが今度はすべてのp要素に指定したデザインが適応されます。間違いやすいところなので気をつけましょう。

では先程のHTMLファイルに組み込みしてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS 練習中！</title>
<style>
p {
    font-size: 18px;
    font-weight: bold;
} 
</style>
</head>
<body>
 
<p>p要素にスタイルを適用するよ</p>

<p>ここも影響をうけるよ</p>

</body>
</html>

これを保存してブラウザで開いてみましょう。すべてのp要素のデザインが変更されていればOKです。

HTML4.01やXHTML1.0ではstyle要素に『text/css』という値をとったtype属性を記述する必要がありました。

<style type="text/css">
p {
    font-size: 18px;
    font-weight: bold;
} 
</style>

そしてHTML4.01の場合はCSSに対応していない古いブラウザ対応の為、style要素にHTMLのコメントアウトが記述されている場合があります。(注意点としてXHTML1.0ではHTMLでコメントアウトされた部分はCSSを含めた全ての部分がコメント扱いとなりますので、XHTML1.0では下記のようなコメントアウトは不可となります。)

<style type="text/css">
<!--
p {
    font-size: 18px;
    font-weight: bold;
} 
-->
</style>

これらのこと全てはHTML5及び現行のブラウザでは必要ありません。何も考えずstyle要素内にCSSを記述すればOKです。ただし古いブラウザ対応されたウェブサイトを修正するときなどは必要な知識となりますので頭の片隅に置いておいてください。

styleタグを使用したCSS記述の方法は以上となります。

次の記事では外部CSSを読み込んでみましょう。ではでは～。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類
桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。

シェア
このエントリーをはてなブックマークに追加