2020年、知っておくと便利なCSSのプロパティのまとめ

ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。

一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。

知っておくと便利なCSSのプロパティのまとめ

Uncommon CSS Properties
by Ahmad Shadeed

はじめに

知らないのもあれば、知ってはいるけど必要なときに使用するのを忘れてしまう、そんなCSSのプロパティがたくさんあります。それらのプロパティには、JavaScriptを使用する手間を省くものもあれば、CSSを書く時間を節約できるものもあります。

私はフロントエンドのデベロッパーとして、時々そのようなことに遭遇し、自問自答しました。あまり使用されていないけど、便利なプロパティをまとめた記事がないのだろうか?

この記事では、知っておくと便利なCSSのプロパティを紹介したいと思います。
準備はいいですか? では、始めましょう 🙂

CSS Gridでの中央揃え place-itemsプロパティ

要素を天地左右の中央に配置

要素を天地左右の中央に配置

このテクニックはBenjamin De Cockで知りました。たった2行のCSSで、要素を水平・垂直方向の中央に配置できます。

詳細を説明する前に、place-itemsjustify-itemsalign-itemsを組み合わせた省略形のプロパティであることに触れておきます。
上記のCSSは、下記のようになります。

これはどのように機能しているのでしょうか?
place-itemsを使用すると、グリッドの各セルに適用されます。そして、セルのコンテンツが中央に配置されます。つまり、このテクニックは複数のセルでも機能するということです。列の数を増やすと、より明確になります。

中央配置は複数のセルに適用できる

中央配置は複数のセルに適用できる

サポートブラウザ

place-itemsプロパティは、IEを除くすべてのブラウザにサポートされています。
参考: Can I use

Flexboxと古き良きmargin: auto;

要素を天地左右の中央に配置

要素を天地左右の中央に配置

Flexboxと組み合わせることで、margin: auto;はFlexアイテムを水平・垂直方向の中央に配置できます。

簡単でしょ!

あまり知られていない::marker疑似要素

::marker疑似要素を使うと便利

::marker疑似要素を使うと便利

最初にはっきりさせておきたいことは、リストの各アイテムの横にあるデフォルトの小さな円は、マーカー(marker)と呼ばれるものです。::maker疑似要素を知る前は、リストのスタイルをリセットし、::before::afterの疑似要素で円を追加するという手順でしたが、これは実用的ではありません。その悪いやり方を紹介します。

<li>のカラーは#222で、::before疑似要素では#cccが定義されています。<li>::beforeの色が同じであれば、円はデフォルトで継承されるので、疑似要素は全く必要ありません。

これを行うより良いやり方を見てみましょう。

これで完了です、簡単ですね。

サポートブラウザ

::maker疑似要素は、Firefox 68+とSafari 11.1+でサポートされています。ChromeとEdgeは80+で実験的な機能でサポートされています。
参考: Can I use

text-alignプロパティ

CSSのFlexboxとGridの人気が高まるにつれ、CSSを始めたばかりの人は中央揃えや配置する際にtext-alignの代わりにFlexboxやGridを使用することがよくあります。しかし、text-alignでもしっかり機能します。

text-align: center;の方が、簡単にすばやく実装できることがあります。
下記の例を見てみましょう。

テキストを左右の中央に配置

テキストを左右の中央に配置

コンテンツを中央に揃える必要があります。この実装にFlexboxやGridを使用する価値がありますか?
text-alignで簡単に実装できます。

サポートブラウザ

text-alignプロパティのサポート状況は気にする必要はありません。現在すべてのブラウザでサポートされています。
参考: Can I use

display: inline-flex;プロパティ

バッジのリストをインラインで表示

バッジのリストをインラインで表示

バッジのリストをインラインで表示し、それぞれのバッジをFlexbox要素にする必要がありますか? それを簡単に実装するのがinline-flexです。

次のプロジェクトで、Flexの機能を備えたインライン要素が必要になったときは、inline-flexを使用してください。とてもシンプルで簡単です。

サポートブラウザ

inline-flexは、すべてのブラウザでサポートされています。
参考: Can I use

column-ruleプロパティ

列と列の間にボーダーを追加

列と列の間にボーダーを追加

CSS columnsは、要素を列に分割できるレイアウト方法です。一般的な使用例としては、段落のテキストコンテンツを2行に分割することが挙げられます。しかし、あまり一般的ではありませんが、列と列の間にボーダーを追加できます。このテクニックはManuel Matuzovicの記事で知りました。

column-ruleプロパティ名はその目的を反映していないかもしれませんが、border-rightをイメージすると分かりやすいです。

サポートブラウザ

column-ruleプロパティはIE10を含め、すべてのブラウザにサポートされています。
参考: Can I use

background-repeat: round;

背景のクリッピングを防ぐ

背景のクリッピングを防ぐ

roundという値が使えることを、このツイートで知りました。background-repeatには、背景のクリッピングを防ぐ値があります。

roundがどのように機能するか、CSS Tricksよると、

画像を両方向にタイル状に並べます。1枚の画像が大きすぎて収まらない場合を除き、画像のトリミングは絶対にしないでください。複数の画像が残りのスペースに収まる場合は、画像を縮小するか、引き伸ばしてスペースを埋めます。残りの画像の幅が半分以下の場合は引き伸ばし、以上の場合は引き伸ばします。

サポートブラウザ

IE9を含め、すべてのブラウザにサポートされています。
参考: Can I use

object-fitプロパティ

不揃いのロゴ画像をいい感じに揃える

不揃いのロゴ画像をいい感じに揃える

object-fitプロパティはまるで魔法のようです。私が初めてこのプロパティを知ったときには多くのことが変わり、フロントエンドのデベロッパーとして私の人生を楽にしてくれました。ロゴのグリッドを表示するセクションを実装する際、ロゴのサイズに一貫性がなく、困難な時があります。横長のロゴもあれば、縦長のロゴもあります。

そんな時は、object-fit: contain;が便利です。ロゴの幅と高さをコントロールし、定義された幅と高さに画像を強制的に収めることができます。

widthheight@supportsでラップして、object-fitをサポートしてないブラウザでロゴ画像が引き伸ばされないようにすることができます。

サポートブラウザ

object-fitプロパティはIE11を除く、すべてのブラウザでサポートされています。
参考: Can I use

終わりに

関連記事

コメントや提案があれば、@shadeed9までお願いします。

sponsors

top of page

©2020 coliss