HOME  > Web design  >

[CSS]  スタイルシート CSS(Cascading Style Sheets)の書き方


CSS(Cascading Style Sheets)は、スタイルシート言語の一つです。

スタイルシート言語は、文字の色や大きさ、表示レイアウトなを指定します。

HTML(HyperText Markup Language)にもスタイルを指定するタグがありますが、今後は、CSSでの記述が標準となります。


サンプルHTMLコード その1(サンプルの表示)

  • 注釈 01: <p>タグ内の文字色を指定します。p.color1は、特定の<p>タグに適用する為、クラスで宣言します。
  • ・ HTMLタブの適用する箇所で、<p class="color1">〜</p>と指定します。

    ・ <p>タグ全てに適用する場合は、p{color: red;}と記述します。

    ・ 構成要素の呼び方は、セレクタ{プロパティ:値;} です。

    ・ 複数のプロパティを設定する場合は、

    セレクタ{

    プロパティ:値;

    プロパティ:値;

    プロパティ:値;

    }

      と記述します。

    ・ クラスは、<body>内で複数箇所指定できます。

  • 注釈 02: <p>タグ内の文字色を指定します。#color2は、特定の<p>タグに適用する為、IDで宣言します。
  • ・ HTMLタブの適用する箇所で、<p id="color2">〜</p>と指定します。

    ・ IDは、<body>内で1箇所しか指定できません(idは重複できません)。

  • 注釈 03: <p>タグ内に触接スタイルを記述します。
  • 注釈 04: これまでのHTMLタグでの文字色指定です。

CSSは、<style> 〜 </style>間の記述を.cssファイルに記述し、HTMLから呼び出す事もできます。これにより、複数のHTMLファイルで、共通のスタイル設定が楽になります。

サンプルHTMLコード その2(サンプルの表示)

  • 注釈05: CSSファイルのサンプル(”sample_web_Tips_css2.css”)ファイルを読込みます。

sample_web_Tips_css2.css ファイル

サンプルHTML その1の<style> 〜 <style>に記述したスタイルシートを、
"sample_web_Tips_css2.css"ファイルに記述します。



<style> 〜 <style>の記述で、

<style type="text/css">

<!--


-->

</style>

のように、<!-- 〜 -->で囲んだ記述を見かけます。これは、CSSに未対応のブラウザへの考慮ですが、現在では、記述しなくても影響するケースは少ないと思われます。