CSS のバックアップ(No.13) - .NET 開発基盤部会 Wiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

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

戻る

目次 †

概要 †

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 †

CSS4 †

Level 3モジュールで

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

書き方 †

基本的な書き方は †

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

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

セレクタ †

styleの適用される要素を選択する。
余談：jQueryのセレクタもこのCSSセレクタを使用している。

一般的なセレクタ

要素セレクタ
```
タグ名{プロパティ:値;}
```

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

classセレクタ
```
.class名{プロパティ:値;}
```

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

全称セレクタ
すべての要素に適用される。
```
*{プロパティ:値;}
```

複数のタグ名を指定するセレクタ

ANDセレクタ
以下のように、複数のセレクタを組み合わせて使用できる。
```
タグ名#id値{プロパティ:値;}
タグ名.クラス名{プロパティ:値;}
```

ORセレクタ
複数のセレクタを「,」区切りで指定する。
```
セレクタ1,セレクタ2, ...セレクタn{プロパティ:値;}
```

子孫セレクタ（階層が深くてもOK）
先祖セレクタと子孫セレクタを半角スペース区切りで指定する。
```
先祖セレクタ 子孫セレクタ{プロパティ:値;}
```

子セレクタ（１つ下の階層のみ）
「親要素>子要素」で指定する。
```
親要素>子要素{プロパティ:値;}
```

隣接セレクタ（同じ階層の直後の要素のみ）
「前要素+後要素」で指定する。
```
前要素+後要素{プロパティ:値;}
```

間接セレクタ（同じ階層の後要素に適用）
「前要素~後要素」で指定する。
```
前要素~後要素{プロパティ:値;}
```

その他のセレクタ
- 擬似クラス
  セレクタの後に:擬似クラスを指定する。
  - 未訪問のリンク
```
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;}
```
  - 要素内の最初の子要素
```
ul.test li:first-child {color:red;}
```

擬似要素（:first-line :first-letter）
```
セレクタ{プロパティ:値;}
```

場所 †

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フレームワーク †

概要 †

下記を参考にすると、

参考
- CSS フレームワークとの付き合い方 - ペパボのフロントエンドスタンダード
  http://pepabo.github.io/docs/frontend/standard/css-framework/

レイヤ †

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 †

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

参考 †

【2016年冬】最新CSSフレームワークまとめ - Qiita
http://qiita.com/RyutaYoshi/items/ee49d90eb910dfdd104f
【2016年版】デキるWebデザイナーのための
「CSSフレームワーク」ベスト10　｜SeleQt?【セレキュト】
http://www.seleqt.net/programming/css-flamework-10/
Bootstrapだけじゃない！
おすすめCSSフレームワーク6選まとめ！ | クラウドット株式会社
http://www.cloudot.co.jp/blog/4124/
レスポンシブ対応のCSSフレームワーク25選｜ferret [フェレット]
https://ferret-plus.com/2783
CSSフレームワーク30選！デザイン含めて一括総まとめ
http://eng-entrance.com/css-framework