2020年、知っておくと便利なCSSのプロパティのまとめ
Post on:2020年7月21日
sponsors
ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。
一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。
Uncommon CSS Properties
by Ahmad Shadeed
- はじめに
- CSS Gridでの中央揃え place-itemsプロパティ
- Flexboxと古き良きmargin: auto;
- あまり知られていない::marker疑似要素
- text-alignプロパティ
- display: inline-flex;プロパティ
- column-ruleプロパティ
- background-repeat: round;
- object-fitプロパティ
- 終わりに
はじめに
知らないのもあれば、知ってはいるけど必要なときに使用するのを忘れてしまう、そんなCSSのプロパティがたくさんあります。それらのプロパティには、JavaScriptを使用する手間を省くものもあれば、CSSを書く時間を節約できるものもあります。
私はフロントエンドのデベロッパーとして、時々そのようなことに遭遇し、自問自答しました。あまり使用されていないけど、便利なプロパティをまとめた記事がないのだろうか？
この記事では、知っておくと便利なCSSのプロパティを紹介したいと思います。
準備はいいですか？ では、始めましょう 🙂
CSS Gridでの中央揃え place-itemsプロパティ
要素を天地左右の中央に配置
このテクニックはBenjamin De Cockで知りました。たった2行のCSSで、要素を水平・垂直方向の中央に配置できます。
|
1 2 3 4 5 6 7 |
<div class="hero"> <div class="hero-wrapper"> <h2>CSS is awesome</h2> <p>Yes, this is a hero section made for fun.</p> <a href="#">See more</a> </div> </div> |
|
1 2 3 4 |
.hero { display: grid; place-items: center; } |
詳細を説明する前に、place-itemsはjustify-itemsとalign-itemsを組み合わせた省略形のプロパティであることに触れておきます。
上記のCSSは、下記のようになります。
|
1 2 3 4 5 |
.hero { display: grid; justify-items: center; align-items: center; } |
これはどのように機能しているのでしょうか？
place-itemsを使用すると、グリッドの各セルに適用されます。そして、セルのコンテンツが中央に配置されます。つまり、このテクニックは複数のセルでも機能するということです。列の数を増やすと、より明確になります。
|
1 2 3 4 5 |
.hero { display: grid; grid-template-columns: 1fr 1fr; place-items: center; } |
中央配置は複数のセルに適用できる
サポートブラウザ
place-itemsプロパティは、IEを除くすべてのブラウザにサポートされています。
参考: Can I use
Flexboxと古き良きmargin: auto;
要素を天地左右の中央に配置
Flexboxと組み合わせることで、margin: auto;はFlexアイテムを水平・垂直方向の中央に配置できます。
|
1 2 3 |
<div class="parent"> <div class="child"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.parent { width: 300px; height: 200px; background: #ccc; display: flex; } .child { width: 50px; height: 50px; background: #000; margin: auto; } |
簡単でしょ！
あまり知られていない::marker疑似要素
::marker疑似要素を使うと便利
最初にはっきりさせておきたいことは、リストの各アイテムの横にあるデフォルトの小さな円は、マーカー（marker）と呼ばれるものです。::maker疑似要素を知る前は、リストのスタイルをリセットし、::beforeや::afterの疑似要素で円を追加するという手順でしたが、これは実用的ではありません。その悪いやり方を紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
ul { list-style: none; padding: 0; } li { color: #222; } li::before { content: "•"; color: #ccc; margin-right: 0.5em; } |
<li>のカラーは#222で、::before疑似要素では#cccが定義されています。<li>と::beforeの色が同じであれば、円はデフォルトで継承されるので、疑似要素は全く必要ありません。
これを行うより良いやり方を見てみましょう。
|
1 2 3 4 5 6 7 |
li { color: #222; } li::marker { color: #ccc; } |
これで完了です、簡単ですね。
サポートブラウザ
::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です。
|
1 2 3 4 |
<span class="badge"><svg></svg></span> <span class="badge"><svg></svg></span> <span class="badge"><svg></svg></span> <span class="badge"><svg></svg></span> |
|
1 2 3 4 5 |
.badge { display: inline-flex; /* where the magic happens */ justify-content: center; align-items: center; } |
次のプロジェクトで、Flexの機能を備えたインライン要素が必要になったときは、inline-flexを使用してください。とてもシンプルで簡単です。
サポートブラウザ
inline-flexは、すべてのブラウザでサポートされています。
参考: Can I use
column-ruleプロパティ
列と列の間にボーダーを追加
CSS columnsは、要素を列に分割できるレイアウト方法です。一般的な使用例としては、段落のテキストコンテンツを2行に分割することが挙げられます。しかし、あまり一般的ではありませんが、列と列の間にボーダーを追加できます。このテクニックはManuel Matuzovicの記事で知りました。
|
1 2 3 4 |
p { columns: 3; column-rule: solid 2px #222; } |
column-ruleプロパティ名はその目的を反映していないかもしれませんが、border-rightをイメージすると分かりやすいです。
サポートブラウザ
column-ruleプロパティはIE10を含め、すべてのブラウザにサポートされています。
参考: Can I use
background-repeat: round;
背景のクリッピングを防ぐ
roundという値が使えることを、このツイートで知りました。background-repeatには、背景のクリッピングを防ぐ値があります。
|
1 2 3 4 |
.element { background-size: contain; background-repeat: round; } |
roundがどのように機能するか、CSS Tricksよると、
画像を両方向にタイル状に並べます。1枚の画像が大きすぎて収まらない場合を除き、画像のトリミングは絶対にしないでください。複数の画像が残りのスペースに収まる場合は、画像を縮小するか、引き伸ばしてスペースを埋めます。残りの画像の幅が半分以下の場合は引き伸ばし、以上の場合は引き伸ばします。
サポートブラウザ
IE9を含め、すべてのブラウザにサポートされています。
参考: Can I use
object-fitプロパティ
不揃いのロゴ画像をいい感じに揃える
object-fitプロパティはまるで魔法のようです。私が初めてこのプロパティを知ったときには多くのことが変わり、フロントエンドのデベロッパーとして私の人生を楽にしてくれました。ロゴのグリッドを表示するセクションを実装する際、ロゴのサイズに一貫性がなく、困難な時があります。横長のロゴもあれば、縦長のロゴもあります。
そんな時は、object-fit: contain;が便利です。ロゴの幅と高さをコントロールし、定義された幅と高さに画像を強制的に収めることができます。
|
1 2 3 4 5 6 7 8 |
<ul class="brands"> <li class="brands__item"> <a href="#"> <img src="img/logo.png" alt=""> </a> </li> <li> <!-- other logos --> </li> </ul> |
|
1 2 3 4 5 |
img { width: 130px; height: 75px; object-fit: contain; } |
widthとheight@supportsでラップして、object-fitをサポートしてないブラウザでロゴ画像が引き伸ばされないようにすることができます。
|
1 2 3 4 5 6 |
@supports (object-fit: contain) { img { object-fit: contain; height: 75px; } } |
サポートブラウザ
object-fitプロパティはIE11を除く、すべてのブラウザでサポートされています。
参考: Can I use
終わりに
関連記事
- Aligning Logo Images in CSS
- I Used CSS Inline Flex For The First Time
- The Hidden Power of CSS Text Align
コメントや提案があれば、@shadeed9までお願いします。
sponsors
