CSS Snippets CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットの一覧です。 CSS Snippets #1 継承するbox-sizing指定 clearfix テキストの回り込みを防ぐ センタリングレイアウト（レスポンシブ向け） max-widthやmin-widthを解除する 高さを100%にする 要素の中央配置 calc()を活用する :not()を使ってスタイル指定を少しシンプルに @supportsを使ったCSSの条件分岐 CSS Snippets #1 CSS Snippets #2 要素を上下反転・左右反転させる 要素の中身がないときのスタイル指定 可変幅要素を中央配置しつつテキストは左寄せにする attr()を使ってdata属性を表示させる 擬似要素を使って改行する 疑似要素で区切り記号を表示 opacityで簡易ホバーエフェクト cubic-bezier()指定値一覧 CSSカウンタで見出しやセクションに連番を表示 CSSカウンタで順序リストの数値表示を自作する CSS Snippets #2 CSS Snippets #3 borderで矢印をつくる #1 borderで矢印をつくる #2 要素に複数のボーダーを表示する ホバー時にレイアウトを崩さずに画像や要素にボーダーを表示する 画像を円形表示 バランス良く角丸を指定する border-radiusで異なる半径を指定 カーソルデザインを変更する 選択を制御する クリック・タッチイベントを制御する CSS Snippets #3 CSS Snippets #4 テキスト選択時のカラーを変更 2行目以降を字下げする 縦横比を維持した背景画像 背景画像をアニメーションでループ表示させる 背景カラーをアニメーションで切り替える グラデーションをアニメーションさせる linear-gradient()を使った分割背景カラー linear-gradient()で任意の破線をつくる repeating-linear-gradient()でストライプをつくる テーブルのセルに斜線を引く CSS Snippets #4
