CSS関連
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
] [
Twitter
]
開始行:
→HTML関連
→Web技術関連
→JavaScript関連
#contents
*サブトピック [#o9e1899e]
-CSS関連Tips
*用語 [#xa33efe1]
-置換要素 replaced element:要素の内容がドキュメントの内...
-非置換要素 nonreplaced element:要素自体が表示されるもの...
-ブロックレベル要素:親要素のコンテンツエリアを埋める要素...
-インラインレベル要素:行の流れを分断することなく、テキス...
*一般記事 [#yb6dea1d]
-[[あなたが教わってるそのCSSテクニックはもう古い | TAKLOG...
-[[Web エンジニアなら知っておきたい重ね合わせコンテキスト...
-[[:has() が全ての主要ブラウザで利用可能に! - What's new...
-[[【CSS】スタイルが適用される範囲を限定する@scopeが非常...
-[[そろそろSassとはさよなら、Sassの便利な機能がネイティブ...
-[[最近Sassを使ってないなぁって話 | Webクリエイターボック...
-[[CSSはこんなにも進化していたのか! CSSのかなり高度なテ...
-[[:is(), :where() を活用してCSSを「後置修飾」で書く>http...
-[[【フロントエンド初心者向け】なんでこんなところにリンク...
-[[僕「デザイナーが言うてる〇〇モーフィズムってなんやねん...
--ニューモーフィズム、グラスモーフィズム、クレイモーフィ...
-[[GCP上でGoogle Cloud Speech-to-Textをpythonで動かしてみ...
-[[CSSでよく使う指定方法をまとめてみた - Qiita>https://qi...
-[[10 GitHub Repositories to Become a CSS Master - DEV Co...
-[[IEのサポート終了で使えるHTML&CSS - Qiita>https://qiita...
-[[【CSS】Gridレイアウトを使いこなすエンジニアはかっこい...
-[[【CSS】IE環境では使うの躊躇していた、便利なCSS。 - Qii...
--Grid Layout, clamp(), object-fit
-[[【初心者必見】CSSチートシート集まとめ - 現役エンジニア...
-[[【これからScssを使う人へ】Scssの使い方と便利さをさらっ...
-[[今更聞けない!エンジニアのための CSS の基礎講座 ӏ...
-[[[HTML/SCSS]BEM設計を図を使って解説してみる>https://qii...
-[[scssをwebpack4でトランスパイル>https://qiita.com/t-mot...
-[[レスポンシブ・ウェブデザインでの CSS コードの書き方>ht...
-[[CSS の勉強中に困ったら>http://unformedbuilding.com/art...
-[[2010年総まとめ:CSSの実用的なテクニック集>http://colis...
-[[画像を一切使わずにCSS3だけでドラえもんを描いてみた>htt...
-[[CSSだけで JavaScriptのような動きを実装するサンプル30>h...
-[[覚えて良かったCSSテクニック>http://zaru.tofu-kun.org/2...
-[[Tableのヘッダーをすべてのページに表示>http://www.ideax...
-[[Web開発者に便利。WebサイトのCSSプロパティが簡単に分か...
--https://addons.mozilla.org/en-US/firefox/addon/2104
-[[インストール不要!Web制作者必見のCSS解析ツール>http://...
--http://www.westciv.com/xray/index.html
-[[ドロップダウン型ナビゲーションを作るフレームワーク>htt...
-[[CSSを書くときに使っているツールの紹介>http://labs.unoh...
-[[ムダなCSSをチェック>http://news.atode.cc/bar.php?u=htt...
-[[CSS Library>http://www.dynamicdrive.com/style/]]
-http://jp.cssez.com/
--CSSEZは、短時間で簡単にCSSデザインが作成できる、オンラ...
-[[CSSデザインサイトまとめ>http://gigazine.net/index.php?...
*入門サイト [#n8a25b08]
-[[CSS Tutorial links>http://www.smashingmagazine.com/200...
-http://www.free-css-templates.com/
-[[CSS for Beginners:http://www.codeproject.com/html/cssb...
-[[Ten more CSS tricks you may not know:http://www.codepr...
-[[CSSリファレンス:http://hp.vector.co.jp/authors/VA01393...
-[[スタイルシートリファレンス:http://www.htmq.com/style/i...
*セレクタの種類 [#r2e6bda6]
-[[CSSセレクタ総復習>http://redline.hippy.jp/lab/css/css_...
-基本のセレクタ
body,h1{プロパティ名:値}
*{ } すべてに適用
-idセレクタ
div#header { } divタグの id="header" の要素に適用
#header{} すべてのタグの id="header" 要素に適用
-クラスセレクタ
div.hoge{} class="hoge" の指定のある要素に適用
div[class="hoge"] {} 別表記
.hoge{} すべてのclass="hoge"指定のある要素に適用
-疑似クラスセレクタ
a:visited すでに訪れたことのあるリンク
--その他、:hover, :focus, :active など
-子孫セレクタ
A B {} Aタグの中のBタグの要素に適用
-擬似要素 セレクタの最後に付ける
--:first-letter
--:first-line
--:before
--:after
-属性セレクタ
h1[class] {} h1タグでclass属性を持っているものを選択
div[id="header"] {} divタグの id="header" の要素に適用
*セレクタの詳細度(specificity) [#g714c9af]
-複数のセレクタ指定で同じ要素に複数のスタイル指定が競合し...
-詳細度の高さは ID > クラス、属性選択、疑似クラス > 要...
*コンビネータ [#fa0af06e]
-子コンビネータ child combinator: 子供の要素を指定 例)h1...
-隣接コンビネータadjacent-sibling combinator: 兄弟の要素...
*プロパティの種類 [#u5714def]
-基本書式=<名前>:<値>;
-margin:0;
-color:#fff;
-background:#fff;
-display:none; //ある要素を表示させたくないとき
-margin, border, padding, height, width の関係
#ref(cssbox.png)
*コメント [#wd6412a3]
-コメントは /* */で囲む
終了行:
→HTML関連
→Web技術関連
→JavaScript関連
#contents
*サブトピック [#o9e1899e]
-CSS関連Tips
*用語 [#xa33efe1]
-置換要素 replaced element:要素の内容がドキュメントの内...
-非置換要素 nonreplaced element:要素自体が表示されるもの...
-ブロックレベル要素:親要素のコンテンツエリアを埋める要素...
-インラインレベル要素:行の流れを分断することなく、テキス...
*一般記事 [#yb6dea1d]
-[[あなたが教わってるそのCSSテクニックはもう古い | TAKLOG...
-[[Web エンジニアなら知っておきたい重ね合わせコンテキスト...
-[[:has() が全ての主要ブラウザで利用可能に! - What's new...
-[[【CSS】スタイルが適用される範囲を限定する@scopeが非常...
-[[そろそろSassとはさよなら、Sassの便利な機能がネイティブ...
-[[最近Sassを使ってないなぁって話 | Webクリエイターボック...
-[[CSSはこんなにも進化していたのか! CSSのかなり高度なテ...
-[[:is(), :where() を活用してCSSを「後置修飾」で書く>http...
-[[【フロントエンド初心者向け】なんでこんなところにリンク...
-[[僕「デザイナーが言うてる〇〇モーフィズムってなんやねん...
--ニューモーフィズム、グラスモーフィズム、クレイモーフィ...
-[[GCP上でGoogle Cloud Speech-to-Textをpythonで動かしてみ...
-[[CSSでよく使う指定方法をまとめてみた - Qiita>https://qi...
-[[10 GitHub Repositories to Become a CSS Master - DEV Co...
-[[IEのサポート終了で使えるHTML&CSS - Qiita>https://qiita...
-[[【CSS】Gridレイアウトを使いこなすエンジニアはかっこい...
-[[【CSS】IE環境では使うの躊躇していた、便利なCSS。 - Qii...
--Grid Layout, clamp(), object-fit
-[[【初心者必見】CSSチートシート集まとめ - 現役エンジニア...
-[[【これからScssを使う人へ】Scssの使い方と便利さをさらっ...
-[[今更聞けない!エンジニアのための CSS の基礎講座 ӏ...
-[[[HTML/SCSS]BEM設計を図を使って解説してみる>https://qii...
-[[scssをwebpack4でトランスパイル>https://qiita.com/t-mot...
-[[レスポンシブ・ウェブデザインでの CSS コードの書き方>ht...
-[[CSS の勉強中に困ったら>http://unformedbuilding.com/art...
-[[2010年総まとめ:CSSの実用的なテクニック集>http://colis...
-[[画像を一切使わずにCSS3だけでドラえもんを描いてみた>htt...
-[[CSSだけで JavaScriptのような動きを実装するサンプル30>h...
-[[覚えて良かったCSSテクニック>http://zaru.tofu-kun.org/2...
-[[Tableのヘッダーをすべてのページに表示>http://www.ideax...
-[[Web開発者に便利。WebサイトのCSSプロパティが簡単に分か...
--https://addons.mozilla.org/en-US/firefox/addon/2104
-[[インストール不要!Web制作者必見のCSS解析ツール>http://...
--http://www.westciv.com/xray/index.html
-[[ドロップダウン型ナビゲーションを作るフレームワーク>htt...
-[[CSSを書くときに使っているツールの紹介>http://labs.unoh...
-[[ムダなCSSをチェック>http://news.atode.cc/bar.php?u=htt...
-[[CSS Library>http://www.dynamicdrive.com/style/]]
-http://jp.cssez.com/
--CSSEZは、短時間で簡単にCSSデザインが作成できる、オンラ...
-[[CSSデザインサイトまとめ>http://gigazine.net/index.php?...
*入門サイト [#n8a25b08]
-[[CSS Tutorial links>http://www.smashingmagazine.com/200...
-http://www.free-css-templates.com/
-[[CSS for Beginners:http://www.codeproject.com/html/cssb...
-[[Ten more CSS tricks you may not know:http://www.codepr...
-[[CSSリファレンス:http://hp.vector.co.jp/authors/VA01393...
-[[スタイルシートリファレンス:http://www.htmq.com/style/i...
*セレクタの種類 [#r2e6bda6]
-[[CSSセレクタ総復習>http://redline.hippy.jp/lab/css/css_...
-基本のセレクタ
body,h1{プロパティ名:値}
*{ } すべてに適用
-idセレクタ
div#header { } divタグの id="header" の要素に適用
#header{} すべてのタグの id="header" 要素に適用
-クラスセレクタ
div.hoge{} class="hoge" の指定のある要素に適用
div[class="hoge"] {} 別表記
.hoge{} すべてのclass="hoge"指定のある要素に適用
-疑似クラスセレクタ
a:visited すでに訪れたことのあるリンク
--その他、:hover, :focus, :active など
-子孫セレクタ
A B {} Aタグの中のBタグの要素に適用
-擬似要素 セレクタの最後に付ける
--:first-letter
--:first-line
--:before
--:after
-属性セレクタ
h1[class] {} h1タグでclass属性を持っているものを選択
div[id="header"] {} divタグの id="header" の要素に適用
*セレクタの詳細度(specificity) [#g714c9af]
-複数のセレクタ指定で同じ要素に複数のスタイル指定が競合し...
-詳細度の高さは ID > クラス、属性選択、疑似クラス > 要...
*コンビネータ [#fa0af06e]
-子コンビネータ child combinator: 子供の要素を指定 例)h1...
-隣接コンビネータadjacent-sibling combinator: 兄弟の要素...
*プロパティの種類 [#u5714def]
-基本書式=<名前>:<値>;
-margin:0;
-color:#fff;
-background:#fff;
-display:none; //ある要素を表示させたくないとき
-margin, border, padding, height, width の関係
#ref(cssbox.png)
*コメント [#wd6412a3]
-コメントは /* */で囲む
ページ名: