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

@sudarexzy さんから始まった #出会えたことに感謝したいCSSベスト3 のタグが有用だったのでまとめました
377
スダ氏 @sudarexyz

出会えたことに感謝したいCSSベスト3 1位 display: flex; 2位 box-sizing: border-box; 3位 height: 100vh;

2018-04-07 21:44:27
スダ氏 @sudarexyz

justify-content: space-between; align-items: center; この辺も入れたかったけど全部FlexBox関係になっちゃうし、ランキングは今着手している案件に強く依存してる。 他の人のも見てみたい。 #出会えたことに感謝したいCSSベスト3

2018-04-07 22:02:07
平尾誠@arutega.jp @Makopontass

1位:height:100vh; 2位:font-size:4vw; 3位:calc (100vh - 100px ); 高さの調整はありがたいよなー。 #出会えたことに感謝したいCSSベスト3 twitter.com/sudarexyz/stat…

2018-04-07 22:11:23
のらコーダー @noracoder

@sudarexyz 1位 :not(:first-of-type); 最初の要素のスタイルだけ打ち消すという必要がなくなりました 2位 transform: translate(-50%, -50%); 中央寄せでよく使ってます 3位 border-radius 今では当たり前ですが、これが無い時代は大変でした こんな感じです。 #出会えたことに感謝したいCSSベスト3

2018-04-07 22:40:50
Naoya @nxworld_net

1. flexbox 2. calc 3. transition #出会えたことに感謝したいCSSベスト3 3つに絞るの割と悩む

2018-04-07 22:41:21
かまだ @neokamayan

#出会えたことに感謝したいCSSベスト3 1位 box-sizing: border-box; 2位display:flex; 3位--hoge:95vw; width:calc(var(--hoge) - 50px); いや〜 display:none;を入れるか迷った…

2018-04-07 22:42:32
とくめい @tokumewi

1. box-sizing: border-box; 2. transition or animation 3. transform #出会えたことに感謝したいCSSベスト3

2018-04-07 22:43:47
かんろ✨aicocco @kanrame

display: flex; calc(100% - 100px); transform: translate 3つはなかなかむずかしい、アニメーションがCSSでも簡単にできるようになったのは結構うれしい、calcはめちゃくちゃ便利!flexboxは言わずもがな。 #出会えたことに感謝したいCSSベスト3

2018-04-07 22:51:55
arisa_dev @arisa_dev

#出会えたことに感謝したいCSSベスト3 justify-content: space-between; box-sizing: border-box; border-radius

2018-04-07 23:03:36
みっちー @micchimouse

display: flex calc() box-sizing: border-box calcはほんと便利だと思う('ω') #出会えたことに感謝したいCSSベスト3

2018-04-07 23:06:03
クラク🐧QRANOKO @Qrac_JP

1. display: flex; コリスでこれが紹介されてたあたりでCSS始めた。floatを後から覚えた。 2. font-family フォントがフォールバックに対応していたおかげでYakuHanJP作れた。 3. transform: translate(-50%, -50%); 自分のサイズの半分だけずらす発想に感動。 #出会えたことに感謝したいCSSベスト3

2018-04-07 23:39:33
sawa / note inc. @sawamemo

1. iepngfix.htc (ie6で透過png使える喜び) 2. display:inline-block (ie8あたりでようやく使えるようになった喜び) 3. background-size:cover (当時はイケてた感動) #出会えたことに感謝したいCSSベスト3

2018-04-07 23:45:26
Kentaro Koga🏋️‍♂️🧖‍♂️☕️ @kentaro_koga

1位:flexbox 2位:calc 3位:grid gridのauto-fitとminmaxも便利と思った^ ^ ブラウザサポートはflexboxの方が良いみたいやけど、、 他にもrepeat、1 / -1、fr、justify-content、align-items・・・ 3つ選ぶの難しい笑 #出会えたことに感謝したいCSSベスト3

2018-04-08 00:13:32
Ln-north @Ln_north

#出会えたことに感謝したいCSSベスト3 1. flex(安定したらcss-grid) 2. transform 3. :not() 個人的にcssの世界見てて、特にこの三つで大きく変わったなぁと思うものをあげてみた。

2018-04-08 00:22:38
リク @fabrec_jp

display:flex calc translate(-50%,-50%) ありすぎて難しい #出会えたことに感謝したいCSSベスト3

2018-04-08 01:46:19
鹿鹿🦌 @shika_design

Progateはfloatしか教えてくれないからFlexboxレイアウトを初めて覚えた時極めて興奮したの覚えてる #出会えたことに感謝したいCSSベスト3

2018-04-08 06:22:28
akari☯️ @kokona_san

出会えたことに感謝したいCSS、もはや当たり前すぎてみんな忘れているようだが、角丸を画像で作ってた時代もあるんですよ、間違いなくランクインしてもいいと思うで。 border-radius

2018-04-08 07:37:21
やぎちゃん @ygkn35034

#出会えたことに感謝したいCSSベスト3 これ、どんなCSSを普段書いてるとかCSS歴がどれくらいかとかがなんとなくわかってたのしい。

2018-04-08 08:21:37
残りを読む(132)

コメント

RGB000 @19666_61 2018年4月8日
趣味程度しかやってないけどtext-shadow、transition、:hoverあたり...楽しい
0
SAKURA87@多摩丙丁督 @Sakura87_net 2018年4月8日
calcなんて素敵な構文あったのか。
1
小書会 @kosyokai 2018年4月8日
CSSちゃん飲み込みがはやいしいろんなことできちゃうから大好き…
0
(あ)@お気持ちヤクザ @MutsuniNaruBeam 2018年4月9日
自分の知らないものいっぱいある! このまとめに出会えたことに感謝したい。
0
ぱたゆみ@いつも心に音楽を @papanda_san 2018年4月9日
ほんと、四隅に角丸画像配置からborder-radiusはありがたいことこのうえなし。
10
tsukina @tsukina_ttt 2018年4月9日
正直border-radiusは登場があまりにも遅すぎたと思うの
2
ダムゼミ山 @darude_yama 2018年4月9日
可変角丸boxしたかったら初期はtable、次がdiv祭りだったねえ flex好きなのはIEにおけるfloat&marginを体験したかどうか プログラムは思った通りには動かない。書いたとおりに動く。っていうけど書いた通りに動かねえのがIEだったからな…
9
アドマイボー @admaiboh 2018年4月9日
わかる!(ちんぷんかんぷん)
0
さおたん @sao_tan 2018年4月9日
めっちゃわかる!(首もげる
0
みさり@media screen (\\٩( 'ω' )و //) @misari 2018年4月9日
新しいもんをポンポンと気軽に出せる人はいいなーcalcとか使いたいけど対応環境考えたら使わせてもらえないもんなーって腐ってる老害社畜がここに
0
點面悪鬼百之助 @x743 2018年4月9日
使いたい時に名前が思い出せない『letter-spacing』
0
みっくす・じゅーす @mixjuice_100cc 2018年4月9日
出会ったことを忘れたい劣悪CSSベスト3
5
pintu_darurat @langsung_ke 2018年4月15日
@media が入ってないのが意外。これとcalc、vwはほんと重宝する
0
ハト @toshiyvki 2018年4月16日
チェックボックスの:checked で js使わなくてもメニューの開閉ができるテクニックを知ったときの感動
0