Skip to content

DNET_CSS

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

CSS

概要

https://ja.wikipedia.org/wiki/Cascading_Style_Sheets

  • HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。

  • HTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。

  • また、以下のような特徴を持つ。

    • スタイルシートを切り替えることで、表示を変化させることができる。
    • CSSを重ね合わせる（カスケードする）ことができる。

体系

Level

CSSの仕様はレベルという段階をもち、Level 1 - 4 までの仕様が公開されている。

CSS1

  • 勧告 1996年12月
  • ・・・
    • フォントプロパティ
    • 色及び背景のプロパティ
    • テキストプロパティ
    • ボックスプロパティ
    • 類別プロパティ

CSS2

CSS2（仕様）

  • 勧告 1998年5月
  • CSS1 の上位互換。
  • 幾つかの概念の追加・拡大・改訂が行われた。
  • 実質的に、CSS2.1に仕様としての役割を委ねた。

CSS2.1

  • 勧告 2011年6月
  • CSS2仕様書の定義が不明瞭で非互換が生じた記述を明確化（ないしは削除）。
  • UA開発ベンダは、2002年頃からCSS2.1を基本仕様と見なしている。

CSS3

CSS3

CSS4

Level 3モジュールで

  • 未定義だった新しい機能
  • 草案に含まれたが相互運用性に問題があり外された機能

書き方

基本的な書き方

半角小文字で以下のように書く。

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

セレクタ

styleの適用される要素を選択する。

余談：jQueryのセレクタもこのCSSセレクタを使用している。

一般的なセレクタ

  • 要素セレクタ

    タグ名{プロパティ:値;}

  • idセレクタ

    #id値{プロパティ:値;}

  • classセレクタ

    .class名{プロパティ:値;}

  • 属性セレクタ

    • タグ名と、属性名や属性名=属性値を指定する。
    • =以外の演算子を使用できる（"!=", "^=", "$=", "*=", "-=", "|="）
    タグ名[属性名]{プロパティ:値;}
タグ名[属性名=属性値]{プロパティ:値;}

  • 全称セレクタ
    すべての要素に適用される。

    *{プロパティ:値;}

複数の要素・セレクタを指定するセレクタ

  • ANDセレクタ
    以下のように、複数のセレクタを組み合わせて使用できる。

    タグ名#id値{プロパティ:値;}
タグ名.クラス名{プロパティ:値;}

  • ORセレクタ
    複数のセレクタを「,」区切りで指定する。

    セレクタ1,セレクタ2, ...セレクタn{プロパティ:値;}

  • 子孫セレクタ（階層が深くてもOK）
    先祖セレクタと子孫セレクタを半角スペース区切りで指定する。

    先祖セレクタ 子孫セレクタ{プロパティ:値;}

  • 子セレクタ（１つ下の階層のみ）
    「親要素>子要素」で指定する。

    親要素>子要素{プロパティ:値;}

  • 隣接セレクタ（同じ階層の直後の要素のみ）
    「前要素+後要素」で指定する。

    前要素+後要素{プロパティ:値;}

  • 間接セレクタ（同じ階層の後要素に適用）
    「前要素~後要素」で指定する。

    前要素~後要素{プロパティ:値;}

その他のセレクタ

  • 擬似クラス
    要素名の後に:擬似クラスを指定する。

    • aタグ

      • 未訪問のリンク

        a:link {color:red;}

      • 訪問済のリンク

        a:visited {color:red;}

      • カーソルが乗っている要素

        a:hover {color:red;}

      • クリック中の要素

        a:active {color:red;}

    • その他のタグ

      • フォーカスされている要素

        input:focus {background:red;}

      • 特定の言語を指定した要素

        p:lang(en) {color:red;}

      • 要素内の最初の子要素

        li:first-child {color:red;}

  • 擬似要素
    要素名の後に:擬似要素を指定する。

    • 要素の最初の一行

      p:first-line {color:blue;}

    • 要素の最初の一文字

      p:first-letter {color:blue;}

    • 要素の直前

      blockquote:before {content:"『";}

    • 要素の直後

      blockquote:after {content:"』";}

    補足：CSS3 以降、擬似要素は擬似クラスと区別するため ::before / ::after のようにコロン 2 つで書くことが推奨されている （互換性のためコロン 1 つも解釈される）。

場所

style属性

タグのstyle属性に直接書く場合は、要素を特定するためのセレクタは不要。

<p style="color:red">XXXXXXXXXX</p>

styleタグ

以下のようにheadタグ内でリンクする。

<head>
    ・・・
    <style>
        p {color:red;}
    </style>
    ・・・
</head>

cssファイル

書き方はstyleタグ内部と同じ。

以下のようにheadタグ内でCSSファイルをリンクする。

<head>
    ・・・
    <link rel="stylesheet" href="style.css" type="text/css">
    ・・・
</head>

その他（書き方）

メディアタイプ

  • メディアタイプを使用すると、

    • 印刷・携帯端末・音声読み上げソフト用のCSSを指定できるようになる。
    • これにより、レスポンシブデザインを実現することができるようになった。
    • 更に CSS3ではメディアクエリという機能が追加された。

  • 以下のように記述する。
    CSS適用対象のメディアタイプとメディアグループを指定可能。

    • @import

      @import url("handheld.css") handheld;

    • @media

      @media print {
  body { font-size: 9pt; }
}

    • link

      <link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">

  • 参考

レイアウト

CSSのレイアウト

スタイル

CSSのスタイル

ブラウザ デフォルトCSS

HTML5にデフォルトCSSの指針があるが実装はブラウザごとに異なる。

問題点

このため、問題が発生することがある。

リセットCSS

この問題を解決するために、リセットCSSというものが提供されている。

以下のサイトでダウンロード数から人気のリセットCSSを確認できる。

  • CSS Reset | 2015's most common CSS Resets to copy/paste, with documentation / tutorials
    http://cssreset.com/

CSSフレームワーク

概要（CSSフレームワーク）

下記を参考にすると、

レイヤ

CSSフレームワークの機能は

  • 土台になる層

    • ファウンデーション層
      各種、イニシャライズを行なうレイヤ。

      • CSSの初期化（reset、normalize）
      • 機能の初期化（variables、mixins）

    • レイアウト層
      レイアウトに関する機能を提供するレイヤ。

      • グリッドデザイン
      • レスポンシブデザイン

  • コンポーネント層
    UIコンポーネントを提供するレイヤ。

    • 単一パーツ（button、form）
    • 複合パーツ（navigation、modal）

の3レイヤに分類できる。

分類

１つのCSSフレームワークに実装する機能レイヤ数に依って

  • 単機能フレームワーク(1-2レイヤの機能を提供)
  • フルスタックフレームワーク(3レイヤの機能を提供)

に分類できる。

ポイント

コンポーネントについては、以下の観点から利用にリスクがある。

  • 見た目が同じになる（e.g. : Bootstrap ライクな見た目）。
  • スコープの問題が有り、*.cssを読み込んでいる全ページに影響が発生する。
  • 経年変化に対して弱く、フレームワークのバージョンアップ時に面倒。
    e.g. : Bootstrap2 ---> Bootstrap3

Bootstrap

Bootstrap

上記の定義（分類）によると、フルスタックなCSSフレームワークに該当する。

参考（CSSフレームワーク）

参考

移行メモ

  • 「CSS2仕様書の定義が不明瞭で非互換が生じたた記述」の「た」の重複を除去した。
  • 「タグのstyle属性に直接各場合は」→「直接書く場合は」に修正した。
  • 「体系」の節は本文の無い見出しの入れ子だったため箇条書きにまとめた。 自ページへのリンク（[[CSS]]）はプレーン・テキストにした。
  • 同名の見出し（「CSS3」「CSS2」「その他」「概要」「参考」）が複数あり GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。

Tags: 移行, CSS, CSS3, セレクタ, スタイルシート, リセットCSS, CSSフレームワーク, Bootstrap

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally