CSS関連

→HTML関連

→Web技術関連

用語 †

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

一般記事 †

• Tailwind CSS実装例(サンプルコード)の紹介 〜 フォトサイト／LP 〜 2022.8
• 【入門】Tailwind CSS入門に役立つ技術ブログ6つの紹介 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

• CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

• 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リファレンス
• スタイルシートリファレンス

ブラウザ対応 †

• IE共通の９つのCSSバグをそれぞれ解決する方法
• IE6、IE7、IE8におけるCSSの違いまとめ 2009.10.17
• IE6で泣かないための、9つのCSSハック 2009.10.9
• IE6でよく遭遇する６つのバグとその解決方法

Bootstrap †

• Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】 2017
• 超便利！Twitter BootstrapでさくさくWeb開発
  • CSSのフレームワークです。
  • https://getbootstrap.com/

Tips/サンプル †

• Can I use... Support tables for HTML5, CSS3, etc 2022.7

• 正多面体5種類全部描くぞ。HTMLとCSSだけで。 - Qiita 2022.7

• Amazing! Implementing artistic graphics with CSS - DEV Community 2022.7
  • This article mainly introduces how to use CSS to quickly create beautiful CSS graphics with the help of CSS-doodle.

• 16 CSS Units That Every Good Web Developer Should Know | by Nehal Khan | Jul, 2022 | Level Up Coding 2022.7

• 2行目から字頭をずらしたい時のHTML、CSSの書き方（インデント） - Qiita 2022.4

• 【HTML/CSSのみ】ぬるっと動くスムーススクロールの実装 - Qiita 2022.1

• Defensive CSS - Ahmad Shadeed 2021.12

• 動くWebデザインアイデア帳 | 動くWebデザインアイディア帳 2021.11

• 【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30 2019

• CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則 2019.11

• tableを使わないで位置を揃える方法 2015.8

• 枠線などを指定したい！CSSのborderの使い方【初心者向け】

• CSSだけでできるあんなことこんなこと 2019.7.16

• 改行削除するくらいなら gzip したらいいじゃない 2012.11.16

• レスポンシブWebデザインでテーブルを使う時の小技 2012.11.1

• [CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework 2012.9.20

• CSSの知識をもっと深める30+2の小技テクニック集 2011.6.10

• 1px欠けの角丸ボックスをCSSだけで作る方法 2009.12.22

• モダンブラウザでも使えるCSSハック18選 2009.12.16

• JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル

• とっても使えるoverflowプロパティ。その使い方いろいろ

• ページ送りのサンプル4種+2 2009.10.28

• 覚えておいて損は無い CSSの定番テクニック 2009.6.18

• Scrollovers
• Nifty Corners

• CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集 2009.10.21
• よいCSS開発を行うための8のTIPS 2009.4.1
• CSSでイメージをオシャレに修飾するサンプル集
• アイデア満載のスタイルシート30選
• Scriptを使わないCSSエフェクト、Tipsいろいろ
• DiggやFlickrのようなページ切り替えメニュー
• 知っておくといいかも知れない8つの小技
• 縦方向にセンタリング
• ページ全体に枠線をつけるCSS
• CSS Gradient Text Effect
• 101 CSS Techniques Of All Time Pt.1
  • 同 Pt.2
  • 101のCSS技術というエントリから抜粋
• 画面用と印刷用のスタイルシートを分けたいときはlinkタグのmedia属性を使う

  <link rel="stylesheet" type="text/css" href="hoge.css" />
  <link rel="stylesheet" type="text/css" href="print.css" media="print" />

• Changing Page Syle for Printing
• CSSでWii風のシンプルで角がまるいボタンを作る
  • http://www.hedgerwow.com/360/dhtml/css-simple-link-button-with-round-corner/demo.php

Flexbox †

• 【図解】ちゃんと理解するフレックスボックス【CSS】 - Qiita 2022.5
• 今覚えたい！エンジニアのための CSS の基礎講座 〜Flexbox レイアウト編〜 2017.7
• Mozillaのリファレンス
• 「CSSだけ」初心者に贈る、flexbox基本のキ - Qiita 2022.2
• 日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス 2017

ブラウザスタイルの初期化 †

• 参照：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", "Osaka", "ＭＳ Ｐ ゴシック", san-serif;
  }

セレクタの種類 †

• 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 の関係

コメント †

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