CSS の書式

CSS スタイルシートの基本的な書式は、
   セレクタ { プロパティ : 値 }
というように、セレクタのプロパティに値を設定するという形になります。具体的には、次のように設定します。

h1    { /* コメント */
    color : red ;
    background-color : yellow 
    }

この場合、「h1」がセレクタ、「color」と「background-color」 がプロパティ、「red」と「yellow」がそれぞれの値になります。このように複数のプロパティを設定したい場合は、「;(セミコロン)」で区切って並べます。ホワイトスペース(半角のスペース、改行、タブ)は、書式に影響しませんので、見やすいように記述できます。ただし、書式中に全角のスペースや文字を使うとエラーになります。
CSS の記載は、XHTLM のタグでは、全て小文字で書くよう定義されていることから、小文字で記載することを推奨します。
コメントを入れたい場合は、「/*」 と 「*/」で囲みます。コメントは、書式の途中でも、複数行にわたっても大丈夫です。ただし、コメントの中にコメントを入れること(入れ子)は出来ません。
書式を多少間違えても、Web ブラウザが、HP をそれなりに表示してくれることもあります。また、正しい書式で記載しても、思い通りの表示をしないことがあります。特にインターネットエクスプローラには、バグが多いのが有名です。インターネットエクスプローラで思い通りの表示をしても、他のブラウザでは、表示が乱れたり、その逆のこともあります。バグは、検索すれば比較的容易に対処方法がわかります。バグにも対処しながら、書式に沿った記述を心掛けましょう。
次のサイトでは、CSS の書式チェックをしてくれますので、利用してください。3通りのチェック方法があり、URL を指定・ファイルをアップロード・直接 CSSのテキスト を書き込む、を選ぶことが出来ます。ただし、直接テキストを入力する場合テキスト数に制限があるようで、あまり長いファイルの場合分割してチェックする必要があります。
W3C CSS 検証サービス

デフォルト スタイルシートの設定法

スタイルシートは、CSS だけではありません。従って、CSS を使用する場合は、必ずデフォルトスタイルシート言語を設定しなければなりません。デフォルトスタイルシート言語は、<head>~</head> 内で、CSS が設定される前に次のように宣言します。

<meta http-equiv="Content-Style-Type" content="text/css">

CSS の設定方法

CSS の設定方法には、3つの方法があります。3つの方法は、組み合わせても利用できます。最初はよく解らないと思いますが、状況に応じ使い分けてください。設定が競合した場合は、最後に読み込まれた設定が優先されます。

  1. 外部スタイルシートを読み込む
    <head>~</head> 内 に <link rel="stylesheet" href="ext_css.css" type="text/css"> のように外部スタイルシートのファイルを記載します。
  2. HTLM 文書の <head>~</head> 内にまとめて記述する
    <style type="text/css"> h1{color : red } </style> のように書きます。
  3. HTLM のタグに直接記載する
    <h1 style="color : red">見出し1 </h1> のように書きます。この場合セレクタのあるタグ内に書くため、「 style=」 に続けて「" "」内に、プロパティと値を指定します。

CSS で指定できるセレクタ

CSS で指定できるセレクタには、次の種類があります。
タグ以外の使い方は、直ぐには理解できないかもしれません。必要になったら、徐々に理解し、うまく利用しましょう。

  1. タグにスタイルを設定する
    ここでいうタグとは、HTLM の要素( h1 や p など)です。
  2. 任意の範囲にスタイルを設定する
    任意の範囲とは、class や id です。
  3. タグの相関関係(子孫の要素)でスタイルを設定する
    HTML のツリー構造を利用し、特定の親子関係のタグのみ設定する。(例えば、p の中にある img 飲み適用)
  4. 擬似クラス・擬似要素でスタイルを設定する
    擬似クラスは要素名や属性では分類できない状態です。例えば、まだ見ていないリンクか既に見たリンクかなど

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

ロリポップ! レンタルサーバーは、高機能なのに236円/月~
月額125円からの「さくらのレンタルサーバ
レンタルサーバー

スポンサード リンク

このページは 

トップページ > CSS > CSS 基本