最新のWeb開発のチュートリアル
×

CSS チュートリアル

CSS HOME CSS 導入 CSS 構文 CSS の仕方 CSS 色 CSS 背景 CSSボーダー CSS 余白 CSS パディング CSS 高さ/幅 CSS テキスト CSS フォント CSS リンクス CSS リスト CSS テーブル CSS ボックスモデル CSSの概要 CSSの表示 CSS 最大幅 CSSのポジション CSS 浮く CSS Inline-block CSS 整列します CSS コンビネータ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウン CSS ツールチップ CSS イメージギャラリー CSS 画像の不透明度 CSS 画像のスプライト CSS attrのセレクタ CSSフォーム CSS カウンター

CSS3

CSS3 導入 CSS3 角丸 CSS3 ボーダーイメージ CSS3 背景 CSS3 色 CSS3 グラデーション CSS3 影 CSS3 テキスト CSS3 フォント CSS3 2Dトランスフォーム CSS3 3Dトランスフォーム CSS3 トランジション CSS3 アニメーション CSS3 画像 CSS3 ボタン CSS3 ページネーション CSS3 複数の列 CSS3 ユーザーインターフェース CSS3 ボックスのサイズ設定 CSS3 Flexbox CSS3 メディアクエリー CSS3 MQ例

CSS レスポンシブWebデザイン

レスポンシブWebデザイン イントロ レスポンシブWebデザイン ビューポート レスポンシブWebデザイン グリッドビュー レスポンシブWebデザイン メディアクエリー レスポンシブWebデザイン 画像 レスポンシブWebデザイン ビデオ レスポンシブWebデザイン フレームワーク

CSS Examples

CSS 例 CSS クイズ CSS 証明書

CSS References

CSS 参照 CSS セレクタ CSS 機能 CSS リファレンス聴覚 CSS Web Safe フォント CSS アニメーション CSS ユニット CSS PX-EMコンバータ CSS 色 CSS 色値 CSS 色名 CSS3 ブラウザのサポート

 

CSS構文およびセレクタ


CSSの構文

CSSルール・セットは、セレクタと宣言ブロックで構成されています。

CSSセレクタ

あなたはスタイルにしたいHTML要素セレクタポイント。

宣言ブロックは、セミコロンで区切られた1つ以上の宣言が含まれています。

各宣言は、コロンで区切られたCSSプロパティ名と値を、含まれています。

CSS宣言は必ずセミコロンで終了し、宣言ブロックは、中括弧で囲まれています。

次の例では、すべての<p>要素には赤い文字色で、中央揃えになります。

p {
    color: red;
    text-align: center;
}
»それを自分で試してみてください

CSSセレクタ

CSSセレクタをするために使用されている"find" (または選択)、それらの要素名、ID、クラス、属性、および複数に基づいてHTML要素。


要素セレクタ

要素セレクタは、要素名に基づいて要素を選択します。

あなたはすべてを選択することができます<p>このようなページの要素(この場合は、すべての<p>要素は、中央揃え、赤色のテキストの色となります)。

p {
    text-align: center;
    color: red;
}
»それを自分で試してみてください

IDセレクタ

IDセレクタは、特定の要素を選択するために、HTML要素のid属性を使用しています。

IDセレクタは、1つのユニークな要素を選択するために使用されるように要素のidは、ページ内で一意でなければなりません!

特定のIDを持つ要素を選択するには、要素のidに続くハッシュ(#)文字を書きます。

以下のスタイルルールを持つHTML要素に適用されるid="para1"

#para1 {
    text-align: center;
    color: red;
}
»それを自分で試してみてください
注意 注:id名は、数字で始めることはできません!

クラスセレクタ

クラスセレクタは、特定のクラス属性を持つ要素を選択します。

書き込み、特定のクラスを持つ要素を選択するにはperiod (.)クラスの名前が続く文字を、。

以下の例では、とのすべてのHTML要素class="center"赤と中央揃えになります。

.center {
    text-align: center;
    color: red;
}
»それを自分で試してみてください

また、特定のHTML要素は、クラスによって影響されるべきであることを指定することができます。

以下の例では、唯一の<p>を持つ要素class="center"中央揃えになります。

p.center {
    text-align: center;
    color: red;
}
»それを自分で試してみてください

HTML要素はまた、複数のクラスを参照することができます。

以下の例では、 <p>要素には、に応じてスタイル設定されますclass="center"とにclass="large"

<p class="center large">This paragraph refers to two classes.</p>
»それを自分で試してみてください
注意 注:クラス名は数字で始めることはできません!

セレクタのグループ化

あなたは同じスタイル定義を持つ要素を持っている場合は、このように:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

これは、コードを最小限にするために、セレクタグループに良くなります。

グループセレクタに、カンマで各セレクタを区切ります。

以下の例では、上記のコードからセレクタをグループ化しています:

h1, h2, p {
    text-align: center;
    color: red;
}
»それを自分で試してみてください

CSSのコメント

コメントは、コードを説明するために使用され、後日、ソースコードを編集するときに役立つことがあります。

コメントは、ブラウザによって無視されます。

CSSのコメントで始まり/* and ends with */ 。 コメントは、複数行にまたがることができます。

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */
»それを自分で試してみてください

練習で自分自身をテスト!

演習1» 演習2» 演習3» 演習4»