CSS関連
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
] [
Twitter
]
開始行:
→HTML関連
→Web技術関連
→JavaScript関連
#contents
*用語 [#xa33efe1]
-置換要素 replaced element：要素の内容がドキュメントの内...
-非置換要素 nonreplaced element：要素自体が表示されるもの...
-ブロックレベル要素：親要素のコンテンツエリアを埋める要素...
-インラインレベル要素：行の流れを分断することなく、テキス...
*一般記事 [#yb6dea1d]
-[[【フロントエンド初心者向け】なんでこんなところにリンク...
-[[僕「デザイナーが言うてる〇〇モーフィズムってなんやねん...
--ニューモーフィズム、グラスモーフィズム、クレイモーフィ...
-[[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...
-[[CSSでレイアウトするなら絶対覚えておきたい配置のルール...
-[[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?...
*Tailwind CSS [#hb7188c9]
-[[A Beginner's Guide to Tailwind CSS - DEV Community ...
-[[Tailwind CSS実装例(サンプルコード)の紹介 〜 フォ...
-[[【入門】Tailwind CSS入門に役立つ技術ブログ6つの紹介>ht...
*入門サイト [#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...
*ブラウザ対応 [#m27a8ac0]
-[[IE共通の９つのCSSバグをそれぞれ解決する方法>http://php...
-[[IE6、IE7、IE8におけるCSSの違いまとめ>http://journal.my...
-[[IE6で泣かないための、9つのCSSハック>http://www.atmarki...
-[[IE6でよく遭遇する６つのバグとその解決方法>http://colis...
*Bootstrap [#mbf2efbe]
-[[Webデザインの知識がなくてもOK！Bootstrapの使い方【入門...
-[[超便利！Twitter BootstrapでさくさくWeb開発>http://blog...
--CSSのフレームワークです。
--https://getbootstrap.com/
*Tips/サンプル [#bf64fe79]
-[[ワイ「z-index完全に理解した」 - Qiita>https://qiita.co...
-[[【React / Next】gifを使わずにcssだけでオーバーレイスピ...
-[[【CSS】 Magic Circle>https://codepen.io/_developes/pen...
-[[Can I use... Support tables for HTML5, CSS3, etc>https...
-[[正多面体5種類全部描くぞ。HTMLとCSSだけで。 - Qiita>htt...
-[[Amazing! Implementing artistic graphics with CSS - DEV...
--This article mainly introduces how to use CSS to quickl...
-[[16 CSS Units That Every Good Web Developer Should Know...
-[[2行目から字頭をずらしたい時のHTML、CSSの書き方（インデ...
-[[【HTML/CSSのみ】ぬるっと動くスムーススクロールの実装 -...
-[[Defensive CSS - Ahmad Shadeed>https://ishadeed.com/art...
-[[動くWebデザインアイデア帳 | 動くWebデザインアイディア...
-[[【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル3...
-[[CSSは奥が深い！セレクタの書き方・命名や管理を改善する5...
-[[tableを使わないで位置を揃える方法>https://teratail.com...
-[[枠線などを指定したい！CSSのborderの使い方【初心者向け...
-[[CSSだけでできるあんなことこんなこと>https://qiita.com/...
-[[改行削除するくらいなら gzip したらいいじゃない>http://...
-[[レスポンシブWebデザインでテーブルを使う時の小技>http:/...
-[[[CSS]高性能すぎてビックリしました、レスポンシブデザイ...
-[[CSSの知識をもっと深める30+2の小技テクニック集>http://w...
-[[1px欠けの角丸ボックスをCSSだけで作る方法>http://www.we...
-[[モダンブラウザでも使えるCSSハック18選>http://www.atmar...
-[[JavaScriptなしでCSSのみで実現するクールなドロップダウ...
-[[とっても使えるoverflowプロパティ。その使い方いろいろ>h...
-[[ページ送りのサンプル4種+2>http://css-happylife.com/log...
-[[覚えておいて損は無い CSSの定番テクニック>http://c-brai...
-[[Scrollovers>http://www.scrollovers.com/]]
-[[Nifty Corners>http://www.html.it/articoli/nifty/index....
-[[CSSでリストを整形するなら覚えておくべき８つのリストデ...
-[[よいCSS開発を行うための8のTIPS>http://phpspot.org/blog...
-[[CSSでイメージをオシャレに修飾するサンプル集>http://php...
-[[アイデア満載のスタイルシート30選>http://coliss.com/art...
-[[Scriptを使わないCSSエフェクト、Tipsいろいろ>http://www...
-[[DiggやFlickrのようなページ切り替えメニュー>http://www....
-[[知っておくといいかも知れない8つの小技>http://www.ideax...
-[[縦方向にセンタリング>http://blog.livedoor.jp/dankogai/...
-[[ページ全体に枠線をつけるCSS>http://phpspot.org/blog/ar...
-[[CSS Gradient Text Effect>http://www.webdesignerwall.co...
-[[101 CSS Techniques Of All Time Pt.1>http://www.noupe.c...
--[[同 Pt.2>http://www.noupe.com/css/101-css-techniques-o...
--[[101のCSS技術というエントリから抜粋>http://e0166.blog8...
-画面用と印刷用のスタイルシートを分けたいときはlinkタグの...
<link rel="stylesheet" type="text/css" href="hoge.css" />
<link rel="stylesheet" type="text/css" href="print.css" ...
-[[Changing Page Syle for Printing:http://www.codeproject...
-[[CSSでWii風のシンプルで角がまるいボタンを作る>http://gi...
--http://www.hedgerwow.com/360/dhtml/css-simple-link-butt...
**Flexbox [#h7977d23]
-[[【図解】ちゃんと理解するフレックスボックス【CSS】 - Qi...
-[[今覚えたい！エンジニアのための CSS の基礎講座 〜Flexbo...
-[[Mozillaのリファレンス>https://developer.mozilla.org/ja...
-[[「CSSだけ」初心者に贈る、flexbox基本のキ - Qiita>https...
-[[日本語対応！CSS Flexboxのチートシートを作ったので配布...
*ブラウザスタイルの初期化 [#sebaea52]
-参照：http://code.nanigac.com/source/view/134
*{
margin: 0;
padding: 0;
background-color: transparent;
color: black;
font-size: medium;
font-family: Verdana, Arial, "ヒラギノ角ゴ Pro W3", "...
}
*セレクタの種類 [#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
*用語 [#xa33efe1]
-置換要素 replaced element：要素の内容がドキュメントの内...
-非置換要素 nonreplaced element：要素自体が表示されるもの...
-ブロックレベル要素：親要素のコンテンツエリアを埋める要素...
-インラインレベル要素：行の流れを分断することなく、テキス...
*一般記事 [#yb6dea1d]
-[[【フロントエンド初心者向け】なんでこんなところにリンク...
-[[僕「デザイナーが言うてる〇〇モーフィズムってなんやねん...
--ニューモーフィズム、グラスモーフィズム、クレイモーフィ...
-[[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...
-[[CSSでレイアウトするなら絶対覚えておきたい配置のルール...
-[[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?...
*Tailwind CSS [#hb7188c9]
-[[A Beginner's Guide to Tailwind CSS - DEV Community ...
-[[Tailwind CSS実装例(サンプルコード)の紹介 〜 フォ...
-[[【入門】Tailwind CSS入門に役立つ技術ブログ6つの紹介>ht...
*入門サイト [#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...
*ブラウザ対応 [#m27a8ac0]
-[[IE共通の９つのCSSバグをそれぞれ解決する方法>http://php...
-[[IE6、IE7、IE8におけるCSSの違いまとめ>http://journal.my...
-[[IE6で泣かないための、9つのCSSハック>http://www.atmarki...
-[[IE6でよく遭遇する６つのバグとその解決方法>http://colis...
*Bootstrap [#mbf2efbe]
-[[Webデザインの知識がなくてもOK！Bootstrapの使い方【入門...
-[[超便利！Twitter BootstrapでさくさくWeb開発>http://blog...
--CSSのフレームワークです。
--https://getbootstrap.com/
*Tips/サンプル [#bf64fe79]
-[[ワイ「z-index完全に理解した」 - Qiita>https://qiita.co...
-[[【React / Next】gifを使わずにcssだけでオーバーレイスピ...
-[[【CSS】 Magic Circle>https://codepen.io/_developes/pen...
-[[Can I use... Support tables for HTML5, CSS3, etc>https...
-[[正多面体5種類全部描くぞ。HTMLとCSSだけで。 - Qiita>htt...
-[[Amazing! Implementing artistic graphics with CSS - DEV...
--This article mainly introduces how to use CSS to quickl...
-[[16 CSS Units That Every Good Web Developer Should Know...
-[[2行目から字頭をずらしたい時のHTML、CSSの書き方（インデ...
-[[【HTML/CSSのみ】ぬるっと動くスムーススクロールの実装 -...
-[[Defensive CSS - Ahmad Shadeed>https://ishadeed.com/art...
-[[動くWebデザインアイデア帳 | 動くWebデザインアイディア...
-[[【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル3...
-[[CSSは奥が深い！セレクタの書き方・命名や管理を改善する5...
-[[tableを使わないで位置を揃える方法>https://teratail.com...
-[[枠線などを指定したい！CSSのborderの使い方【初心者向け...
-[[CSSだけでできるあんなことこんなこと>https://qiita.com/...
-[[改行削除するくらいなら gzip したらいいじゃない>http://...
-[[レスポンシブWebデザインでテーブルを使う時の小技>http:/...
-[[[CSS]高性能すぎてビックリしました、レスポンシブデザイ...
-[[CSSの知識をもっと深める30+2の小技テクニック集>http://w...
-[[1px欠けの角丸ボックスをCSSだけで作る方法>http://www.we...
-[[モダンブラウザでも使えるCSSハック18選>http://www.atmar...
-[[JavaScriptなしでCSSのみで実現するクールなドロップダウ...
-[[とっても使えるoverflowプロパティ。その使い方いろいろ>h...
-[[ページ送りのサンプル4種+2>http://css-happylife.com/log...
-[[覚えておいて損は無い CSSの定番テクニック>http://c-brai...
-[[Scrollovers>http://www.scrollovers.com/]]
-[[Nifty Corners>http://www.html.it/articoli/nifty/index....
-[[CSSでリストを整形するなら覚えておくべき８つのリストデ...
-[[よいCSS開発を行うための8のTIPS>http://phpspot.org/blog...
-[[CSSでイメージをオシャレに修飾するサンプル集>http://php...
-[[アイデア満載のスタイルシート30選>http://coliss.com/art...
-[[Scriptを使わないCSSエフェクト、Tipsいろいろ>http://www...
-[[DiggやFlickrのようなページ切り替えメニュー>http://www....
-[[知っておくといいかも知れない8つの小技>http://www.ideax...
-[[縦方向にセンタリング>http://blog.livedoor.jp/dankogai/...
-[[ページ全体に枠線をつけるCSS>http://phpspot.org/blog/ar...
-[[CSS Gradient Text Effect>http://www.webdesignerwall.co...
-[[101 CSS Techniques Of All Time Pt.1>http://www.noupe.c...
--[[同 Pt.2>http://www.noupe.com/css/101-css-techniques-o...
--[[101のCSS技術というエントリから抜粋>http://e0166.blog8...
-画面用と印刷用のスタイルシートを分けたいときはlinkタグの...
<link rel="stylesheet" type="text/css" href="hoge.css" />
<link rel="stylesheet" type="text/css" href="print.css" ...
-[[Changing Page Syle for Printing:http://www.codeproject...
-[[CSSでWii風のシンプルで角がまるいボタンを作る>http://gi...
--http://www.hedgerwow.com/360/dhtml/css-simple-link-butt...
**Flexbox [#h7977d23]
-[[【図解】ちゃんと理解するフレックスボックス【CSS】 - Qi...
-[[今覚えたい！エンジニアのための CSS の基礎講座 〜Flexbo...
-[[Mozillaのリファレンス>https://developer.mozilla.org/ja...
-[[「CSSだけ」初心者に贈る、flexbox基本のキ - Qiita>https...
-[[日本語対応！CSS Flexboxのチートシートを作ったので配布...
*ブラウザスタイルの初期化 [#sebaea52]
-参照：http://code.nanigac.com/source/view/134
*{
margin: 0;
padding: 0;
background-color: transparent;
color: black;
font-size: medium;
font-family: Verdana, Arial, "ヒラギノ角ゴ Pro W3", "...
}
*セレクタの種類 [#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]
-コメントは /* */で囲む
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
