サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> スタイルシート >> 基本的な書き方・単位について

基本的な書き方・単位について



基本的な書き方

スタイルシートは、基本的に以下のような書式で記述します。

セレクタ { プロパティ : }

セレクタとは、どの要素に対してスタイルを適用させるか指定する部分です。
スタイルシートを適用させたいタグを書きます。

プロパティとは、セレクタで指定した要素に適用するスタイルの種類を示す部分です。
色を表す「color」やフォントサイズを表す「font-size」などを書きます。
これに続けて、「:」記号と値を書いてスタイルを設定します。

スタイルは「;」記号で区切っていくつでも書くことができます。

記述例
H1要素のフォントサイズを20ピクセルに設定し、色を赤にする。
H1 { font-size: 20px; color: red }

結果
指定前

これは指定前です。

指定後

これは指定後です。



スタイルを適用させる対象の指定

・異なる要素に対して同じスタイルを指定する

セレクタ1,セレクタ2,セレクタ3,… { プロパティ : }

記述例
H1,H2,H3 { font-size: 20px; color: red }

・特定の要素に含まれる要素に対してのみスタイルを適用する

セレクタ1 セレクタ2 セレクタ3 … { プロパティ : }

記述例
DIV SPAN { color: red }
上記の例では、DIV要素の中のSPAN要素の色を赤に設定します。

・特定のクラスを指定した要素にのみスタイルを適用する

.クラス { プロパティ : }
セレクタ.クラス { プロパティ : }

記述例
.class1 { color: red }
上記の例では、class属性に「class1」が指定されている要素の色を赤に設定します。

H1.class2 { color: red }
上記の例では、H1要素を持つclass属性に「class2」が
指定されている要素の色を赤に設定します。

・特定のIDを指定した要素にのみスタイルを適用する
(クラスは複数の要素に対して指定できるが、IDはその1つの要素に対してのみできる)

#ID { プロパティ : }
セレクタ#ID { プロパティ : }

記述例
#id1 { color: red }
上記の例では、id属性に「id1」が指定されている要素の色を赤に設定します。

H1#id2 { color: red }
上記の例では、H1要素を持つid属性に「id2」が
指定されている要素の色を赤に設定します。


単位について

スタイルシートで大きさを指定する場合には、数値の次に単位を付けて示すことができます。

・絶対的な値を示す単位

in インチ(1in = 2.54cm)
cm センチメートル
mm ミリメートル
pt ポイント(1pt = 1/72in)
pc パイカ(1pc = 12pt)


・相対的な値を示す単位

em その範囲で有効なフォントの高さを1とする単位
ex その範囲で有効なフォントの小文字の「x」の高さを1とする単位
px 1ピクセルを1とする単位
% 他の基準となる大きさに対する割合


 
 

スタイルシートに戻る




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, CSS Samples. All rights reserved. - Home