「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>HTML/CSS/JavaScript]]
*目次 [#r2f9c814]
#contents
*概要 [#h2ef87f0]
https://ja.wikipedia.org/wiki/Cascading_Style_Sheets
-HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。
-HTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。
-また、以下のような特徴を持つ。
--スタイルシートを切り替えることで、表示を変化させることができる。
--CSSを重ね合わせる（カスケードする）ことができる。
*体系 [#i3c56e70]
**[[CSS]] [#s41ededa]
***[[CSS3]] [#b53dba58]
***[[CSSのレイアウト]] [#c6bb35c6]
-[[CSS3のレイアウト>CSS3#w3ed3639]]
-[[Bootstrapのレイアウト>Bootstrap#v5377ce1]]
***[[CSSのスタイル]] [#q8a43a8f]
-[[CSS3のスタイル>CSS3#x78581dd]]
-[[Bootstrapのスタイル>Bootstrap#b804abd6]]
*Level [#t6d4b35c]
CSSの仕様はレベルという段階をもち、Level 1 - 4 までの仕様が公開されている。
**CSS1 [#s832b3a0]
-勧告 1996年12月
-・・・
--フォントプロパティ
--色及び背景のプロパティ
--テキストプロパティ
--ボックスプロパティ
--類別プロパティ
**CSS2 [#x8f8c5fa]
***CSS2 [#x2e8e211]
-勧告 1998年5月
-CSS1 の上位互換。
-幾つかの概念の追加・拡大・改訂が行われた。
-実質的に、CSS2.1に仕様としての役割を委ねた。
***CSS2.1 [#saf2e3b6]
-勧告 2011年6月
-CSS2仕様書の定義が不明瞭で非互換が生じたた記述を明確化（ないしは削除）。
-UA開発ベンダは、2002年頃からCSS2.1を基本仕様と見なしている。
**[[CSS3]] [#fb368236]
**CSS4 [#bc8d3708]
Level 3モジュールで
-未定義だった新しい機能
-草案に含まれたが相互運用性に問題があり外された機能
*書き方 [#m650b8bd]
**基本的な書き方 [#m937f83c]
半角小文字で以下のように書く。
セレクタ{プロパティ:値;}
**セレクタ [#wfe741ae]
styleの適用される要素を選択する。~
-セレクタの種類－CSSの基本~
http://www.htmq.com/csskihon/005.shtml
余談：jQueryのセレクタもこのCSSセレクタを使用している。
-Selectors - jQuery 日本語リファレンス~
http://semooh.jp/jquery/api/selectors/
***一般的なセレクタ [#ebffa3b4]
-要素セレクタ
タグ名{プロパティ:値;}
-idセレクタ
#id値{プロパティ:値;}
-classセレクタ
.class名{プロパティ:値;}
-属性セレクタ
--タグ名と、属性名や属性名=属性値を指定する。
--=以外の演算子を使用できる（"!=", "^=", "$=", "*=", "-=", "|="）
タグ名[属性名]{プロパティ:値;}
タグ名[属性名=属性値]{プロパティ:値;}
-全称セレクタ~
すべての要素に適用される。
*{プロパティ:値;}
***複数の要素・セレクタを指定するセレクタ [#d79eaade]
-ANDセレクタ~
以下のように、複数のセレクタを組み合わせて使用できる。
タグ名#id値{プロパティ:値;}
タグ名.クラス名{プロパティ:値;}
-ORセレクタ~
複数のセレクタを「,」区切りで指定する。
セレクタ1,セレクタ2, ...セレクタn{プロパティ:値;}
-子孫セレクタ（階層が深くてもOK）~
先祖セレクタと子孫セレクタを半角スペース区切りで指定する。
先祖セレクタ 子孫セレクタ{プロパティ:値;}
-子セレクタ（１つ下の階層のみ）~
「親要素>子要素」で指定する。
親要素>子要素{プロパティ:値;}
-隣接セレクタ（同じ階層の直後の要素のみ）~
「前要素+後要素」で指定する。
前要素+後要素{プロパティ:値;}
-間接セレクタ（同じ階層の後要素に適用）~
「前要素~後要素」で指定する。
前要素~後要素{プロパティ:値;}
***その他のセレクタ [#x451eafc]
-擬似クラス~
要素名の後に:擬似クラスを指定する。
--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:"』";}
**場所 [#fc684c55]
***style属性 [#rfedfa21]
タグのstyle属性に直接各場合は、要素を特定するためのセレクタは不要。
<p style="color:red">XXXXXXXXXX</p>
***styleタグ [#nb79dcde]
以下のようにheadタグ内でリンクする。
<head>
・・・
<style>
p {color:red;}
</style>
・・・
</head>
***cssファイル [#l825bf26]
書き方はstyleタグ内部と同じ。
以下のようにheadタグ内でCSSファイルをリンクする。
<head>
・・・
<link rel="stylesheet" href="style.css" type="text/css">
・・・
</head>
**その他 [#e6384cb0]
***メディアタイプ [#c03811dc]
-メディアタイプを使用すると、
--印刷・携帯端末・音声読み上げソフト用のCSSを指定できるようになる。
--これにより、レスポンシブデザインを実現することができるようになった。
--更に[[CSS3]]では[[メディアクエリ>CSS3#b4ee9e19]]という機能が追加された。
-以下のように記述する。~
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">
-参考
--Media - ウェブデベロッパーガイド | MDN~
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Getting_started/Media
--メディアタイプとメディアグループ [CSS リファレンス : WEB ARCHIVES]~
http://diary.noasobi.net/flyson/css_ref/mediatypes.html
*[[レイアウト>CSSのレイアウト]] [#p924e0d7]
*[[スタイル>CSSのスタイル]] [#t9fc985b]
*ブラウザ デフォルトCSS [#mfa5052c]
HTML5にデフォルトCSSの指針があるが実装はブラウザごとに異なる。
**問題点 [#e21160b9]
このため、問題が発生することがある。
-デフォルトCSS一覧（たまちゃんHTMLのおうち）~
http://tamachan.tama777.com/Reference/default_css.html
-ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた)｜Web Design KOJIKA17~
http://kojika17.com/2011/03/browsers-default-css.html
**リセットCSS [#s4242294]
この問題を解決するために、リセットCSSというものが提供されている。
-デフォルトスタイルシートから考える、リセットCSSの留意点｜Web Design KOJIKA17~
http://kojika17.com/2012/09/reset-css-from-default-style-sheet.html
-【CSS】決定版！リセットCSS総まとめ | TONOST~
http://tonost.com/2015/03/10/%E3%80%90css%E3%80%91%E6%B1%BA%E5%AE%9A%E7%89%88%EF%BC%81%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88css%E7%B7%8F%E3%81%BE%E3%81%A8%E3%82%81/
以下のサイトでダウンロード数から人気のリセットCSSを確認できる。
-CSS Reset | 2015's most common CSS Resets to copy/paste, with documentation / tutorials~
http://cssreset.com/
*CSSフレームワーク [#g0f7c5e6]
**概要 [#v121a425]
下記を参考にすると、
-参考
--CSS フレームワークとの付き合い方 - ペパボのフロントエンドスタンダード~
http://pepabo.github.io/docs/frontend/standard/css-framework/
***レイヤ [#pfa0127f]
CSSフレームワークの機能は
-土台になる層
--ファウンデーション層~
各種、イニシャライズを行なうレイヤ。
---CSSの初期化（reset、normalize）
---機能の初期化（variables、mixins）
--レイアウト層~
レイアウトに関する機能を提供するレイヤ。
---グリッドデザイン
---レスポンシブデザイン
-コンポーネント層~
UIコンポーネントを提供するレイヤ。
--単一パーツ（button、form）
--複合パーツ（navigation、modal）
の3レイヤに分類できる。
***分類 [#m1bf1f76]
１つのCSSフレームワークに実装する機能レイヤ数に依って
-単機能フレームワーク(1-2レイヤの機能を提供)
-フルスタックフレームワーク(3レイヤの機能を提供)
に分類できる。
***ポイント [#c90d31a6]
コンポーネントについては、以下の観点から利用にリスクがある。
-見た目が同じになる（e.g. : Bootstrap ライクな見た目）。
-スコープの問題が有り、*.cssを読み込んでいる全ページに影響が発生する。
-経年変化に対して弱く、フレームワークのバージョンアップ時に面倒。~
e.g. : [[Bootstrap2 ---> Bootstrap3>https://matome.naver.jp/odai/2137510540117012201]]
**[[Bootstrap]] [#e5a00af7]
上記の定義（分類）によると、フルスタックなCSSフレームワークに該当する。
**参考 [#a5d5157c]
-【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
*参考 [#kef3da23]
-CSS | MDN~
https://developer.mozilla.org/ja/docs/Web/CSS
-Getting Started - CSS | MDN~
https://developer.mozilla.org/ja/docs/Web/CSS/Getting_started
-CSS - ウェブ開発を学ぶ | MDN~
https://developer.mozilla.org/ja/docs/Learn/CSS
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
