#author("2024-03-08T23:44:15+09:00","default:irrp","irrp")
#author("2024-03-16T22:31:05+09:00","default:irrp","irrp")
→HTML関連

→Web技術関連

→JavaScript関連

#contents

*サブトピック [#o9e1899e]
-CSS関連Tips


*用語 [#xa33efe1]
-置換要素 replaced element:要素の内容がドキュメントの内容では直接表せないものと置き換えられる要素。コンテンツがない。例)img, input
-非置換要素 nonreplaced element:要素自体が表示されるもの。例)span
-ブロックレベル要素:親要素のコンテンツエリアを埋める要素。要素ボックスの前後に改行を生成する。例)p, div
-インラインレベル要素:行の流れを分断することなく、テキスト行に要素ボックスを生成する。要素ボックスの前後に改行を生成しない。例)a, strong, em


*一般記事 [#yb6dea1d]
-[[あなたが教わってるそのCSSテクニックはもう古い | TAKLOG>https://www.tak-dcxi.com/article/that-css-technique-you-learned-is-outdated/]] 2024.3

-[[Web エンジニアなら知っておきたい重ね合わせコンテキスト - Fenrir Engineers>https://engineers.fenrir-inc.com/entry/2024/03/08/181105]] 2024.3

-[[:has() が全ての主要ブラウザで利用可能に! - What's new in Browsers!>https://zenn.dev/cybozu_frontend/articles/20231221_whats-new-in-browser-firefox-121]] 2023.12

-[[【CSS】スタイルが適用される範囲を限定する@scopeが非常に便利で有能 #CSS - Qiita>https://qiita.com/rana_kualu/items/22546111bb12e56b1304]] 2023.11

-[[最近Sassを使ってないなぁって話 | Webクリエイターボックス>https://www.webcreatorbox.com/tech/bye-sass]] 2023.10

-[[CSSはこんなにも進化していたのか! CSSのかなり高度なテクニック -Expert CSS: The CPU Hack | コリス>https://coliss.com/articles/build-websites/operation/css/expert-css-the-cpu-hack.html]] 2023.9

-[[:is(), :where() を活用してCSSを「後置修飾」で書く>https://zenn.dev/kagan/articles/css-is-where-tips]] 2023.8

-[[【フロントエンド初心者向け】なんでこんなところにリンク領域が?aタグの『見えないクリック領域』を暴け! - arms inc. Engineers' Blog>https://tech.arms-soft.co.jp/entry/2023/02/08/090000]] 2023.2

-[[僕「デザイナーが言うてる〇〇モーフィズムってなんやねん」 - Qiita>https://qiita.com/alpaca1231/items/6c980848a783660aef8d]] 2022.12
--ニューモーフィズム、グラスモーフィズム、クレイモーフィズム

-[[GCP上でGoogle Cloud Speech-to-Textをpythonで動かしてみた - Qiita>https://qiita.com/kakuchotakaku/items/fc7ea5a6be3578577065]] 2022.9

-[[CSSでよく使う指定方法をまとめてみた - Qiita>https://qiita.com/kabechiyo13/items/01d6652a5fbfe291595a]] 2022.9

-[[10 GitHub Repositories to Become a CSS Master - DEV Community>https://dev.to/martinageradams/10-github-repositories-to-become-a-css-master-9h4]] 2022.8

-[[IEのサポート終了で使えるHTML&CSS - Qiita>https://qiita.com/yoshimochin/items/216b5ac82a8827b8f505]] 2022.6

-[[【CSS】Gridレイアウトを使いこなすエンジニアはかっこいい! - Qiita>https://qiita.com/degudegu2510/items/8ef80cd811bf7d21c060]] 2022.4

-[[【CSS】IE環境では使うの躊躇していた、便利なCSS。 - Qiita>https://qiita.com/degudegu2510/items/2939294031cdf6fc23b5]] 2022.1
--Grid Layout, clamp(), object-fit

-[[【初心者必見】CSSチートシート集まとめ - 現役エンジニアが使い方も合わせて徹底解説(保存版)>https://sbucks-blog.com/program/tool/cheatsheet/css02/]] 2021.7

-[[【これからScssを使う人へ】Scssの使い方と便利さをさらっと紹介するぞ>https://qiita.com/mame_hashbill/items/e5f01d0f2523de6a13e5]] 2019.11

-[[今更聞けない!エンジニアのための CSS の基礎講座 〜ボックスモデル編〜>https://nulab.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/]]

-[[[HTML/SCSS]BEM設計を図を使って解説してみる>https://qiita.com/mame_hashbill/items/c5b09461d7acfce047fa]] 2019.8
-[[scssをwebpack4でトランスパイル>https://qiita.com/t-motoki/items/4eab2fcd46198c2377b3]] 2019.3

-[[レスポンシブ・ウェブデザインでの CSS コードの書き方>http://yomotsu.net/blog/2012/10/01/mediaquery-goodpractice.html]] 2012.10.9

-[[CSS の勉強中に困ったら>http://unformedbuilding.com/articles/if-stuck-in-the-study-of-css/]] 2012.7.4

-[[CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ>http://webdesignrecipes.com/css-visual-formating-model/]]

-[[2010年総まとめ:CSSの実用的なテクニック集>http://coliss.com/articles/build-websites/operation/css/best-of-css-tutorials-in-2010.html]] 2011.1.6

-[[画像を一切使わずにCSS3だけでドラえもんを描いてみた>http://shopdd.blog51.fc2.com/blog-entry-932.html]] 2010.5.5

-[[CSSだけで JavaScriptのような動きを実装するサンプル30>http://blog.creamu.com/mt/2010/04/cssjavascript30.html]] 2010.4.28

-[[覚えて良かったCSSテクニック>http://zaru.tofu-kun.org/2010/04/22/%E8%A6%9A%E3%81%88%E3%81%A6%E8%89%AF%E3%81%8B%E3%81%A3%E3%81%9Fcss%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF/]] 2010.4.23

-[[Tableのヘッダーをすべてのページに表示>http://www.ideaxidea.com/archives/2009/10/table_repeat_header_css.html]] 2009.10.27

-[[Web開発者に便利。WebサイトのCSSプロパティが簡単に分かる「CSSViewer」>http://www.moongift.jp/2008/12/cssviewer/]] 2008.12.27
--https://addons.mozilla.org/en-US/firefox/addon/2104

-[[インストール不要!Web制作者必見のCSS解析ツール>http://ascii.jp/elem/000/000/193/193926/]]
--http://www.westciv.com/xray/index.html
-[[ドロップダウン型ナビゲーションを作るフレームワーク>http://coliss.com/articles/build-websites/operation/css/1593.html]]
-[[CSSを書くときに使っているツールの紹介>http://labs.unoh.net/2008/08/introduction-of-css-coding-tools.html]] 2008.8.7

-[[ムダなCSSをチェック>http://news.atode.cc/bar.php?u=http%3A%2F%2Fphpspot.org%2Fblog%2Farchives%2F2007%2F09%2Fcsswebcss_redun.html]]

-[[CSS Library>http://www.dynamicdrive.com/style/]]

-http://jp.cssez.com/
--CSSEZは、短時間で簡単にCSSデザインが作成できる、オンラインCSSメーカーです。

-[[CSSデザインサイトまとめ>http://gigazine.net/index.php?/news/comments/20070425_bestcss/]]


*入門サイト [#n8a25b08]
-[[CSS Tutorial links>http://www.smashingmagazine.com/2006/10/25/css-techniques-tutorials-layouts/]]
-http://www.free-css-templates.com/
-[[CSS for Beginners:http://www.codeproject.com/html/cssbeginner.asp]]
-[[Ten more CSS tricks you may not know:http://www.codeproject.com/useritems/css-tricks-2.asp]]
-[[CSSリファレンス:http://hp.vector.co.jp/authors/VA013937/cssref/index.html]]
-[[スタイルシートリファレンス:http://www.htmq.com/style/index.shtml]]


*セレクタの種類 [#r2e6bda6]
-[[CSSセレクタ総復習>http://redline.hippy.jp/lab/css/css_20105.php]]

-基本のセレクタ
 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 > クラス、属性選択、疑似クラス > 要素 (p.66)


*コンビネータ [#fa0af06e]
-子コンビネータ child combinator: 子供の要素を指定 例)h1 > strong{}
-隣接コンビネータadjacent-sibling combinator: 兄弟の要素を指定 例)h1+p {}


*プロパティの種類 [#u5714def]
-基本書式=<名前>:<値>;
-margin:0;
-color:#fff;
-background:#fff;
-display:none; //ある要素を表示させたくないとき
-margin, border, padding, height, width の関係

#ref(cssbox.png)

*コメント [#wd6412a3]
-コメントは /* */で囲む

トップ   編集 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS