CSS
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>HTML/CSS/JavaScript]]
*目次 [#r2f9c814]
#contents
*概要 [#h2ef87f0]
https://ja.wikipedia.org/wiki/Cascading_Style_Sheets
-HTML や XML の要素をどのように修飾(表示)するかを指示す...
-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)~
先祖セレクタと子孫セレクタを半角スペース区切りで指定する。
先祖セレクタ 子孫セレクタ{プロパティ:値;}
-子セレクタ(1つ下の階層のみ)~
「親要素>子要素」で指定する。
親要素>子要素{プロパティ:値;}
-隣接セレクタ(同じ階層の直後の要素のみ)~
「前要素+後要素」で指定する。
前要素+後要素{プロパティ:値;}
-間接セレクタ(同じ階層の後要素に適用)~
「前要素~後要素」で指定する。
前要素~後要素{プロパティ:値;}
***その他のセレクタ [#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/c...
・・・
</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, han...
-参考
--Media - ウェブデベロッパーガイド | MDN~
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Getti...
--メディアタイプとメディアグループ [CSS リファレンス : WE...
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のチートシートを作ってみた。(力尽...
http://kojika17.com/2011/03/browsers-default-css.html
**リセットCSS [#s4242294]
この問題を解決するために、リセットCSSというものが提供され...
-デフォルトスタイルシートから考える、リセットCSSの留意点...
http://kojika17.com/2012/09/reset-css-from-default-style-...
-【CSS】決定版!リセットCSS総まとめ | TONOST~
http://tonost.com/2015/03/10/%E3%80%90css%E3%80%91%E6%B1%...
以下のサイトでダウンロード数から人気のリセットCSSを確認で...
-CSS Reset | 2015's most common CSS Resets to copy/paste,...
http://cssreset.com/
*CSSフレームワーク [#g0f7c5e6]
**概要 [#v121a425]
下記を参考にすると、
-参考
--CSS フレームワークとの付き合い方 - ペパボのフロントエン...
http://pepabo.github.io/docs/frontend/standard/css-framew...
***レイヤ [#pfa0127f]
CSSフレームワークの機能は
-土台になる層
--ファウンデーション層~
各種、イニシャライズを行なうレイヤ。
---CSSの初期化(reset、normalize)
---機能の初期化(variables、mixins)
--レイアウト層~
レイアウトに関する機能を提供するレイヤ。
---グリッドデザイン
---レスポンシブデザイン
-コンポーネント層~
UIコンポーネントを提供するレイヤ。
--単一パーツ(button、form)
--複合パーツ(navigation、modal)
の3レイヤに分類できる。
***分類 [#m1bf1f76]
1つのCSSフレームワークに実装する機能レイヤ数に依って
-単機能フレームワーク(1-2レイヤの機能を提供)
-フルスタックフレームワーク(3レイヤの機能を提供)
に分類できる。
***ポイント [#c90d31a6]
コンポーネントについては、以下の観点から利用にリスクがあ...
-見た目が同じになる(e.g. : Bootstrap ライクな見た目)。
-スコープの問題が有り、*.cssを読み込んでいる全ページに影...
-経年変化に対して弱く、フレームワークのバージョンアップ時...
e.g. : [[Bootstrap2 ---> Bootstrap3>https://matome.naver....
**[[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_sta...
-CSS - ウェブ開発を学ぶ | MDN~
https://developer.mozilla.org/ja/docs/Learn/CSS
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>HTML/CSS/JavaScript]]
*目次 [#r2f9c814]
#contents
*概要 [#h2ef87f0]
https://ja.wikipedia.org/wiki/Cascading_Style_Sheets
-HTML や XML の要素をどのように修飾(表示)するかを指示す...
-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)~
先祖セレクタと子孫セレクタを半角スペース区切りで指定する。
先祖セレクタ 子孫セレクタ{プロパティ:値;}
-子セレクタ(1つ下の階層のみ)~
「親要素>子要素」で指定する。
親要素>子要素{プロパティ:値;}
-隣接セレクタ(同じ階層の直後の要素のみ)~
「前要素+後要素」で指定する。
前要素+後要素{プロパティ:値;}
-間接セレクタ(同じ階層の後要素に適用)~
「前要素~後要素」で指定する。
前要素~後要素{プロパティ:値;}
***その他のセレクタ [#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/c...
・・・
</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, han...
-参考
--Media - ウェブデベロッパーガイド | MDN~
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Getti...
--メディアタイプとメディアグループ [CSS リファレンス : WE...
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のチートシートを作ってみた。(力尽...
http://kojika17.com/2011/03/browsers-default-css.html
**リセットCSS [#s4242294]
この問題を解決するために、リセットCSSというものが提供され...
-デフォルトスタイルシートから考える、リセットCSSの留意点...
http://kojika17.com/2012/09/reset-css-from-default-style-...
-【CSS】決定版!リセットCSS総まとめ | TONOST~
http://tonost.com/2015/03/10/%E3%80%90css%E3%80%91%E6%B1%...
以下のサイトでダウンロード数から人気のリセットCSSを確認で...
-CSS Reset | 2015's most common CSS Resets to copy/paste,...
http://cssreset.com/
*CSSフレームワーク [#g0f7c5e6]
**概要 [#v121a425]
下記を参考にすると、
-参考
--CSS フレームワークとの付き合い方 - ペパボのフロントエン...
http://pepabo.github.io/docs/frontend/standard/css-framew...
***レイヤ [#pfa0127f]
CSSフレームワークの機能は
-土台になる層
--ファウンデーション層~
各種、イニシャライズを行なうレイヤ。
---CSSの初期化(reset、normalize)
---機能の初期化(variables、mixins)
--レイアウト層~
レイアウトに関する機能を提供するレイヤ。
---グリッドデザイン
---レスポンシブデザイン
-コンポーネント層~
UIコンポーネントを提供するレイヤ。
--単一パーツ(button、form)
--複合パーツ(navigation、modal)
の3レイヤに分類できる。
***分類 [#m1bf1f76]
1つのCSSフレームワークに実装する機能レイヤ数に依って
-単機能フレームワーク(1-2レイヤの機能を提供)
-フルスタックフレームワーク(3レイヤの機能を提供)
に分類できる。
***ポイント [#c90d31a6]
コンポーネントについては、以下の観点から利用にリスクがあ...
-見た目が同じになる(e.g. : Bootstrap ライクな見た目)。
-スコープの問題が有り、*.cssを読み込んでいる全ページに影...
-経年変化に対して弱く、フレームワークのバージョンアップ時...
e.g. : [[Bootstrap2 ---> Bootstrap3>https://matome.naver....
**[[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_sta...
-CSS - ウェブ開発を学ぶ | MDN~
https://developer.mozilla.org/ja/docs/Learn/CSS
ページ名: