CSSでここまでできるのか！知っておくと便利なCSSのプロパティや疑似要素のまとめ
Post on:2019年7月12日
sponsors
CSSの進化は早いですね。
一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。
知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。
CSS can do that?
by Ananya Neogi
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- 1. box-decoration-break 改行する際の表示形式を定義
- 2. attr() -簡単ツールチップ
- 3. backface-visibility -フリップするカードも簡単
- 4. conic-gradient -円グラフを簡単に実装できる
- 5. filter -画像に多彩なフィルタを適用
- 6. mix-blend-mode -画像やテキストにも使える
- 7. first-letter -美しいドロップキャップ
- 8. shape-outside -複雑な形に便利
- 9. writing-mode -タイポグラフィのデザインにも
- 10. テキストにグラデーションを付ける
- 11. scroll-snap-type -スクロールのスナップが可能に
1. box-decoration-break 改行する際の表示形式を定義
box-decoration-breakプロパティは、複数の行・列、またはページにまたがる場合に、要素の断片を表示する方法を定義できます。
See the Pen
CSS: box-decoration-break by Ananya Neogi (@ananyaneogi)
on CodePen.
- サポートブラウザ
- box-decoration-breakのサポートブラウザ
- ポリフィル
- Polyfill for box-decoration-break
2. attr() -簡単ツールチップ
attr()プロパティは、選択した要素の値を参照します。ツールチップのように補足情報の表示にも便利です。
See the Pen
attr() in CSS by Ananya Neogi (@ananyaneogi)
on CodePen.
- サポートブラウザ
- attr()のサポートブラウザ
- ポリフィル
- CSS attr() polyfill
3. backface-visibility -フリップするカードも簡単
backface-visibilityプロパティは、要素をユーザーに向けたときにその背面を表示するかどうかを定義します。回転するカードUIも簡単に実装できます。
See the Pen
CSS Card Flip On Hover by Ananya Neogi (@ananyaneogi)
on CodePen.
- サポートブラウザ
- CSS3 3D Transformsのサポートブラウザ
4. conic-gradient -円グラフを簡単に実装できる
グラデーションは素晴らしいものです。線形グラデーションを使用して背景のスタイルを設定したことがあるかもしれません。conic-gradientプロパティを使用して、円グラフを簡単に実装できることを知っていますか？
See the Pen
Pie Chart With Pure CSS by Ananya Neogi (@ananyaneogi)
on CodePen.
参考: MDN
- サポートブラウザ
- conic-gradientのサポートブラウザ
- ポリフィル
- Conic Gradient Polyfill
5. filter -画像に多彩なフィルタを適用
filterプロパティがあれば、Photoshopのフィルタは必要ないかもしれません。このプロパティは画像の外観にグラフィカルな変更を適用します。使用できる効果は次の通りです。blur, brightness, contrast, grayscale, hue-rotate, opacity, invert, sepia, saturate, drop-shadow.
See the Pen
CSS Filters by Ananya Neogi (@ananyaneogi)
on CodePen.
- サポートブラウザ
- CSS Filter Effectsのサポートブラウザ
- ポリフィル
- CSS Filters Polyfill
例えば、drop-shadowはかなり素晴らしいです。簡単に、画像にシャドウを加えることができます。
See the Pen
CSS Drop Shadow by Ananya Neogi (@ananyaneogi)
on CodePen.
6. mix-blend-mode -画像やテキストにも使える
mix-blend-modeプロパティは要素のコンテンツと、要素の背景または親のコンテンツとのブレンド方法を設定できます。
See the Pen
CSS Blend Modes by Ananya Neogi (@ananyaneogi)
on CodePen.
驚くべきことは、ブレンドモードやフィルタを画像やテキストと組み合わせることで実現できます。
参考: MDN
7. first-letter -美しいドロップキャップ
私が本や雑誌で好きなところの一つが、美しいドロップキャップです。ドロップキャップはfirst-letter疑似要素で簡単に作成できます。
See the Pen
CSS Drop-Cap by Ananya Neogi (@ananyaneogi)
on CodePen.
- サポートブラウザ
- ::first-letterのサポートブラウザ
8. shape-outside -複雑な形に便利
shape-outsideプロパティを使用すると、単純な四角形のボックスではなく、複雑なオブジェクトを囲む隣接するインラインコンテンツを囲う方法をカスタマイズできます。
See the Pen
CSS Shape-Outside by Ananya Neogi (@ananyaneogi)
on CodePen.
別ウインドウでデモを開き、幅を変更してみてください。テキストがイメージの周囲を囲むようになっています。
- サポートブラウザ
- CSS Shapes Level 1のサポートブラウザ
- ポリフィル
- shapes-polyfill
9. writing-mode -タイポグラフィのデザインにも
writing-modeプロパティはテキストを水平または垂直に配置するかを定義します。
- horizontal-tb: テキストは横書きで、左から右に、上から下に流れます。
- vertical-lr: テキストは縦書きで、左から右に、上から下に流れます。
- vertical-rl: テキストは縦書きで、右から左に、上から下に流れます。
デモページで、これらが実際に動作していることを確認してください。
- サポートブラウザ
- writing-modeのサポートブラウザ
10. テキストにグラデーションを付ける
テキストにグラデーションを付けるには、-webkit-background-clip: textと-webkit-text-fill-color: transparentの2つのプロパティを組み合わせることで実現でます。
See the Pen
Gradient Text with CSS by Ananya Neogi (@ananyaneogi)
on CodePen.
11. scroll-snap-type -スクロールのスナップが可能に
scroll-snap-typeプロパティは、スクロールコンテナにスナップポイントをどのように適用するかを設定します。
See the Pen
Scroll Snap with CSS by Ananya Neogi (@ananyaneogi)
on CodePen.
デモは垂直方向にスナップさせています。
参考: CSSでスクロールのスナップが可能に！scroll-snapプロパティの基礎知識と便利な使い方
- サポートブラウザ
- CSS Scroll snapのサポートブラウザ
- ポリフィル
- css-scroll-snap-polyfill
sponsors
