CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットの一覧です。

August 16, 2018 追記

November 08, 2017 追記

November 07, 2017 追記

CSS Snippets #1

  1. 継承するbox-sizing指定
  2. clearfix
  3. テキストの回り込みを防ぐ
  4. センタリングレイアウト(レスポンシブ向け)
  5. max-widthやmin-widthを解除する
  6. 高さを100%にする
  7. 天地中央配置
  8. calc()を活用する
  9. :not()を使ってスタイル指定を少しシンプルに
  10. @supportsを使ったCSSの条件分岐

CSS Snippets #2

  1. 要素を上下反転・左右反転させる
  2. 要素の中身がないときのスタイル指定
  3. 可変幅要素を中央配置しつつテキストは左寄せにする
  4. attr()を使ってdata属性を表示させる
  5. 擬似要素を使って改行する
  6. 疑似要素で区切り記号を表示
  7. opacityで簡易ホバーエフェクト
  8. cubic-bezier()指定値一覧
  9. CSSカウンタで見出しやセクションに連番を表示
  10. CSSカウンタで順序リストの数値表示を自作する

CSS Snippets #3

  1. borderで矢印をつくる #1
  2. borderで矢印をつくる #2
  3. 要素に複数のボーダーを表示する
  4. ホバー時にレイアウトを崩さずに画像や要素にボーダーを表示する
  5. 画像を円形表示
  6. バランス良く角丸を指定する
  7. border-radiusで異なる半径を指定
  8. カーソルデザインを変更する
  9. 選択を制御する
  10. クリック・タッチイベントを制御する

CSS Snippets #4

  1. テキスト選択時のカラーを変更
  2. 2行目以降を字下げする
  3. 縦横比を維持した背景画像
  4. 背景画像をアニメーションでループ表示させる
  5. 背景カラーをアニメーションで切り替える
  6. グラデーションをアニメーションさせる
  7. linear-gradient()を使った分割背景カラー
  8. linear-gradient()で任意の破線をつくる
  9. repeating-linear-gradient()でストライプをつくる
  10. テーブルのセルに斜線を引く

CSS Snippets #5

  1. 属性やリンク先を用いたスタイル指定
  2. 縦のスクロールバー領域を常に表示させる
  3. 慣性スクロールを有効化する
  4. CSS Blink
  5. CSS Marquee
  6. 印刷時の不要な余白を取り除く
  7. 印刷時にhref属性を表示する
  8. 最初と最後以外の要素にスタイル指定
  9. 指定した要素以外にスタイル指定
  10. 表示数に応じて最終行のスタイルを変更

CSS Snippets #6

  1. @font-faceフォーマット
  2. テキストを無理やり斜体にする
  3. フォントサイズを無理やり小さく(Chrome対策)
  4. テキストを長体・平体で表示させる
  5. column-countで簡単に段組表示を実装
  6. placeholderの見栄えを変更する・揃える
  7. placeholderの挙動をIEに合わせる
  8. input type="number"のスピンボタンを非表示にする
  9. チェックされたらラベルをハイライト表示
  10. textareaのスクロールバーを非表示(IE対策)

CSS Snippets #7

  1. CSS変数(CSS Variables)
  2. imgのalt未指定を明示する
  3. 直前までに複数のnth-childで指定されたスタイルを上書く
  4. グラデーションを適用したシャドウを加える
  5. 頭文字が数字のid/classをセレクタ指定する
  6. コロンが含まれているid/classをセレクタ指定する
  7. ウィンドウサイズによってリストの見栄えを変更
  8. CSS Masonry
  9. CSS Glitch #1
  10. CSS Glitch #2