「 #出会えたことに感謝したいCSSベスト3 」のトップ3

なんとなく呟いたこちらのツイート。

「#出会えたことに感謝したいCSSベスト3」というハッシュタグをつけて皆のも教えて！と言ったところ数々の反応を頂きました。

Togetterにもまとめて頂きました。

特にプロパティ限定とか値や要素は対象外みたいなこともなく、「私これに感謝してる」に「わかる」と言いたかったし言われたかっただけなので、私の『わかる欲』はだいぶ充たされました。

そしてふと考える。

「出会えたことに感謝したいCSSベスト3」のトップ3がわかったら、もっと出会えたことに感謝したくなるんじゃね？

というわけで、第3位から順にご覧いただきましょう。

第3位「box-sizing: border-box;」

票数14票

幅や高さにborderとpaddingを含めてくれるデキるやつです。

過去に数カラムレイアウトで組んでいる最中、電卓を片手にwidthとpaddingとborderを計算していざプレビュー画面を見てみたら「いや幅デカいわ」みたいなことを繰り返してきた方も多いのではないでしょうか？

特にカラム数やレイアウトが大きく変わるレスポンシブデザインのサイトを組むときにはこのborder-boxが大活躍しますよね。

私も初めてborder-boxを知った時は「キミみたいな存在をずっと探していたよ」と喜びの涙を流したことをよく憶えています。

【参考】
・【CSS】box-sizing:border-boxの使い方｜効かない時は？
・CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定

第2位「calc()」

票数28票

プロパティの値を計算式で入力してもちゃんとそれを実行してくれるデキるやつです。

特にトップページのメインビジュアルをheight: 100vh;で全画面表示して、そこからヘッダー分を減らす～みたいなアレとか。

width: calc(100%/3);みたいなやつとか。

何ていうかもう好き好き大好きありがとう。

私も初めてcalc()を知った時は「キミみたいな存在をずっと探していたよ」と喜びの涙を流したことをよく憶えています。

【参考】
・[CSS]「calc()」を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ
・CSSで計算式を可能にするcalc()ファンクション

第1位「display: flex;」

票数42票

通称「Flexbox」とも呼ばれているレイアウト界の救世主です。

CSS初心者が最初に躓きそして恐れていたfloatパイセンに取って代わって現れたflexのアニキは、とにかく豊富な関連プロパティが揃っているのが魅力的です。

この項の票数にはカウントしていませんがjustify-content: space-between;やalign-items: center;なども人気でした。

もう本当にLOVEずっきゅん。

私も初めてdisplay: flex;を知った時は「キミみたいな存在をずっと探していたよ」と喜びの涙を流したことをよく憶えています。

【参考】
・CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門
・CSS Flexbox の各プロパティの使い方を詳しく解説

統計日：2018年4月8日22時くらい
対象のツイート数：72ツイート

個人的に思ったこと

自分が初めて学習したのはHTML4.1&CSS2.1の頃なので、border-radiusはかなり衝撃的でした。

他にもグラデーションとか。

CSSには関係無いですけどロゴの透過GIFにはちゃんとアンチエイリアス（だっけ？）しないとフチが綺麗に表現できないんだよ！みたいなのありましたよね。

他にも疑似クラスや疑似要素が多く挙げられているのが印象的でした。

なるべくHTMLに余計なコードを増やしたくない！という思いが強いのかもしれませんね。

中には初めて知ったことなんかもあったり。

こりゃいい企画だわ。

もしよければあなたの「#出会えたことに感謝したいCSSベスト3」も教えてください。

最後に、今回の統計表を置いておきます。（かなり雑ですすみません）

#出会えたことに感謝したいcssベスト3