CSS関連

→HTML関連

→Web技術関連

→JavaScript関連

サブトピック†

• CSS関連Tips

用語†

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

一般記事†

• あなたが教わってるそのCSSテクニックはもう古い | TAKLOG 2024.3

• Web エンジニアなら知っておきたい重ね合わせコンテキスト - Fenrir Engineers 2024.3

• :has() が全ての主要ブラウザで利用可能に！ - What's new in Browsers! 2023.12

• 【CSS】スタイルが適用される範囲を限定する@scopeが非常に便利で有能 #CSS - Qiita 2023.11

• そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています | コリス 2024.4
• 最近Sassを使ってないなぁって話 | Webクリエイターボックス 2023.10

• CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack | コリス 2023.9

• :is(), :where() を活用してCSSを「後置修飾」で書く 2023.8

• 【フロントエンド初心者向け】なんでこんなところにリンク領域が？aタグの『見えないクリック領域』を暴け！ - arms inc. Engineers' Blog 2023.2

• 僕「デザイナーが言うてる〇〇モーフィズムってなんやねん」 - Qiita 2022.12
  • ニューモーフィズム、グラスモーフィズム、クレイモーフィズム

• GCP上でGoogle Cloud Speech-to-Textをpythonで動かしてみた - Qiita 2022.9

• CSSでよく使う指定方法をまとめてみた - Qiita 2022.9

• 10 GitHub Repositories to Become a CSS Master - DEV Community 2022.8

• IEのサポート終了で使えるHTML&CSS - Qiita 2022.6

• 【CSS】Gridレイアウトを使いこなすエンジニアはかっこいい！ - Qiita 2022.4

• 【CSS】IE環境では使うの躊躇していた、便利なCSS。 - Qiita 2022.1
  • Grid Layout, clamp(), object-fit

• 【初心者必見】CSSチートシート集まとめ - 現役エンジニアが使い方も合わせて徹底解説(保存版) 2021.7

• 【これからScssを使う人へ】Scssの使い方と便利さをさらっと紹介するぞ 2019.11

• 今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜

• [HTML/SCSS]BEM設計を図を使って解説してみる 2019.8
• scssをwebpack4でトランスパイル 2019.3

• レスポンシブ・ウェブデザインでの CSS コードの書き方 2012.10.9

• CSS の勉強中に困ったら 2012.7.4

• 2010年総まとめ：CSSの実用的なテクニック集 2011.1.6

• 画像を一切使わずにCSS3だけでドラえもんを描いてみた 2010.5.5

• CSSだけで JavaScriptのような動きを実装するサンプル30 2010.4.28

• 覚えて良かったCSSテクニック 2010.4.23

• Tableのヘッダーをすべてのページに表示 2009.10.27

• Web開発者に便利。WebサイトのCSSプロパティが簡単に分かる「CSSViewer」 2008.12.27
  • https://addons.mozilla.org/en-US/firefox/addon/2104

• インストール不要！Web制作者必見のCSS解析ツール
  • http://www.westciv.com/xray/index.html
• ドロップダウン型ナビゲーションを作るフレームワーク
• CSSを書くときに使っているツールの紹介 2008.8.7

• ムダなCSSをチェック

• CSS Library

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

• CSSデザインサイトまとめ

入門サイト†

• CSS Tutorial links
• http://www.free-css-templates.com/
• CSS for Beginners
• Ten more CSS tricks you may not know
• 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)†

• 複数のセレクタ指定で同じ要素に複数のスタイル指定が競合した場合は、セレクタの詳細度が最も詳細なスタイルが適用される。
• 詳細度の高さは ID ＞ クラス、属性選択、疑似クラス ＞ 要素 （p.66)

コンビネータ†

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

プロパティの種類†

• 基本書式＝<名前>:<値>;
• margin:0;
• color:#fff;
• background:#fff;
• display:none; //ある要素を表示させたくないとき
• margin, border, padding, height, width の関係

コメント†

• コメントは /* */で囲む

最新の50件