「出会えたことに感謝したいCSSベスト3」まとめ

綿貫 佳祐 / Qiita @xrxoxcxox

#出会えたことに感謝したいCSSベスト3 1. display: flex 2. E:not 3. vw, vh とか……？ 結構悩みますねコレ🤨

チミヲ🐰Webデザイナー @chimiochimio

#出会えたことに感謝したいCSSベスト3 1.display: flex; 2.margin: 0 auto; 3.position: relative;

チミヲ🐰Webデザイナー @chimiochimio

1.は言わずもがな。これ無くしてはコーディングやる気しない。2.を知ることでサイトのwrapperを画面の左右真ん中に持って来れる事を知ったし、3.は使い方知ってから、配置を自由に調整出来る様になったんだ…( ˘ω˘) #出会えたことに感謝したいCSSベスト3

なつき🐰Webデザイン&AI @Stocker_jp

#出会えたことに感謝したいCSSベスト3 というのが流行ってるけど、ほぼflex関連だな。

SnO₂WMaN @SnO2WMaN

#出会えたことに感謝したいCSSベスト3 1. transform-origin 2. display:flex 3. justify-content:center

SnO₂WMaN @SnO2WMaN

4. align-items:center 5. flex-direction:column

かたばみ @katabame

#出会えたことに感謝したいCSSベスト3 1. display: flex 2. justify-content: center 3. :nth-child

Uemura Takashi @uemera

CSSなんかあるからWEBの世界が複雑になるんや。感謝することなんてない。 #出会えたことに感謝したいCSSベスト3

ももさんとアワくんとひめさまの下僕 @my_atsu07

display:flex（flexに付随するその他指定） 擬似セレクタ指定全般（notもemptyも使い勝手いいよ） アニメーション関係全般 #出会えたことに感謝したいCSSベスト3

吉川雅彦 🦌旅行しおりサービスPen @masahiko888

#出会えたことに感謝したいCSSベスト3 いま技術書典用に書いていることにもちょっと関係するので、自分も。 1. display: flex 2. ::before(:before),::after(:after)擬似要素 3. position: sticky

ゆり@神戸 @yuri_kobe

1. border-radius 角丸画像使ってた頃のhtmlを思い返すと涙を禁じ得ない 2. content 気軽にアイコン入れられる良き時代になった 3. calc これがなかった頃どう対応してたかもはや思い出せない #出会えたことに感謝したいCSSベスト3

ともたけ @_tomotake

思わず。 display:flex calc() box-sizing #出会えたことに感謝したいCSSベスト3

池田 泰延 @clockmaker

1. pointer-events: none 2. filter 3. font-feature-settings ②と③は個人的に大好きなCSS。①は異論を認めないぐらい必要不可欠なCSSだと思ってます。 #出会えたことに感謝したいCSSベスト3

daidai @daidai1126__

1. font-smoothing: antialiased; 2. box-sizing: border-box; 3. border-radius: x% x% x% x% / y% y% y% y%; #出会えたことに感謝したいCSSベスト3

スダ氏 @sudarexyz

地味に伸びてて嬉しい。 CSS歴長い人ほどborder-radiusの衝撃は大きかったんだろうなぁって思う。 あとだいたいflexが入っているところを見ると、やっぱりみんなfloatには苦労させられたんだね…わかりみが深い… #出会えたことに感謝したいCSSベスト3

タグチ｜座組クリエイター @tagu5959

1位:height:100vh; 2位:calc(100% - 100px); 3位:translate(-50%,-50%); #出会えたことに感謝したいCSSベスト3

のなかもえこ／UIデザイナー／エルモアデザイン @lmore_d

box-sizing: border-box; →出会えた時の感動 content: “”; →::before ::afterとの組み合わせ display: none; →blockとのコンビネーションが好き flexは殿堂入りぽいからそれ以外にしてみました #出会えたことに感謝したいCSSベスト3

ゆい🍓 @yui_nk222

#出会えたことに感謝したいCSSベスト3 このタグ見てると、<font>で囲って色とか文字のサイズ変えたりフレームで2カラムにしてメニュー表示したりしてた時代が懐かしい…小学生の頃に運営してたサイトはそんな感じで作ってたなあ…

Naoya @nxworld_net

#出会えたことに感謝したいCSSベスト3 の流れで ＃お前必要？CSSベスト3 とか見たい

ペペ @pepechima

#出会えたことに感謝したいCSSベスト3 1: position:absoluteとtranslate(-50%,-50%)の組み合わせ 2:width:100vw height:100vh 3:transform全般 選びきれない…transitionもいれたいしbefore: after:ないと最早何も出来ない 1は天地中央寄せ以外にも応用効くからテンプレ作ってすぐ貼れるようにしてある

クマ🐻‍❄️🍊🎍 @bear_illust

:not() flexbox calc() #出会えたことに感謝したいCSSベスト3

カルボナーラつぼち @carbonaratsubo

calc flex border-radius #出会えたことに感謝したいCSSベスト3

ぬくす @nukusu

color font-size text-align (fontタグとcenterタグの撲滅) #出会えたことに感謝したいCSSベスト3

wakamsha@webフロントエンドディベロッパー @wakamsha

#出会えたことに感謝したいCSSベスト3 ハッシュタグ眺めてたら height: calc(100vh - 100px); てのを見つけて目からウロコでした。なるほど、これ良いですね。IE11 だと vh に完全対応出来てないみたいなので事前検証が必要ですが、便利なのは間違いない。

SnO₂WMaN @SnO2WMaN

見慣れた連中すき pic.twitter.com/QqmxBZkOYY

拡大