鹿野 壮 Takeshi Kano（@tonkotsuboy_com）さんの人気ツイート（リツイート順）

1
HTMLとCSSだけで作られたイラスト。 何を言ってるかわからねーと思うが、HTMLとCSSだけで作られている。 PureCSS Gaze diana-adrianne.com/purecss-gaze/ #CSS
2020/05/27(Wed) 14:17:51
リツイート 492 いいね 1,636
このツイートへ このユーザの人気ツイート
2
おじさんが若い頃はmargin-leftだのpadding-rightだのborder-bottomだの使っていました。 今どきのナウでヤングでチョベリグな若者は、margin-inline-start、padding-inline-end、border-block-endを使います。 全モダンブラウザで対応済み。 medium.com/@elad/new-css-… #CSS #インターネット老人会
2020/08/18(Tue) 12:16:18
リツイート 450 いいね 1,552
このツイートへ このユーザの人気ツイート
3
最高に意味がわからない（褒め言葉） → HTML + CSSでリアルな目玉焼きを作る - Qiita qiita.com/ics-nishihara/… #HTML #CSS
2019/10/09(Wed) 17:20:26
リツイート 360 いいね 823
このツイートへ このユーザの人気ツイート
4
CSSの上下左右中央揃え。 現代のCSSでは、2行です。 .container { display: grid; place-items: center; } ＿人人人人人人人＿ ＞　2行です　＜ ￣Y^Y^Y^Y^Y^Y^Y^￣ サンプル codepen.io/tonkotsuboy/pe… 画像はかぴのんスタジオより kapinon.com #CSS
2020/07/03(Fri) 18:06:24
リツイート 306 いいね 1,885
このツイートへ このユーザの人気ツイート
5
Safari（PC, iOS）でinput type="date"が使えるようになりました💐 わざわざライブラリを使わなくても日付選択用インターフェイス（カレンダーUI）を作れて便利🗓 Safariが対応したことで、Chrome・Edge・Firefox・Safariの全モダンブラウザの対応完了🥰 developer.mozilla.org/ja/docs/Web/HT… #Safari #HTML
2021/04/27(Tue) 12:55:58
リツイート 284 いいね 905
このツイートへ このユーザの人気ツイート
6
新しいCSS単位svh・cqw全部盛りデモを作った。 - ウインドウサイズを変えてもメインビジュアルがいっぱい - 文字サイズは必ず親コンテナ幅の1/5 ポイント ■ 100svh, 30svw ■ font-size: 20cqw デモ codepen.io/tonkotsuboy/pe… svhとは zenn.dev/moneyforward/a… #CSS #ポストIE時代のモダンCSS
2023/02/28(Tue) 18:46:20
リツイート 283 いいね 1,927
このツイートへ このユーザの人気ツイート
7
本日、JavaScriptの最新仕様ES2022がリリースされました🌼 ES2022で使えるようになった全新機能について、 - 何が使えるようになったのか？ - どうしてそれが必要だったのか？ を、23,000字を使って全力で解説しました📝 zenn.dev/tonkotsuboy_co… #ES2022 #JavaScript
2022/06/22(Wed) 23:04:48
リツイート 265 いいね 937
このツイートへ このユーザの人気ツイート
8
JavaScriptの最新仕様ES2021が、6/22に正式仕様になりました💐💐💐 ES2021の全新機能を紹介する記事を、Zennで書きました🖊 → 正式仕様リリース！ JavaScriptの最新仕様ES2021で追加された新機能まとめ zenn.dev/tonkotsuboy_co… #JavaScript #ES2021
2021/06/24(Thu) 09:22:16
リツイート 196 いいね 588
このツイートへ このユーザの人気ツイート
9
最高だ👏 Safari 16.4が本日リリースし、media queryのrange記法に対応💐 Chrome, Edge, Firefox対応済なので、全ブラウザ対応に🌸 昔 @Media (min-width: 600px) and (max-width: 799px) { } 🥰今後 @Media (600px <= width < 800px) { } デモ codepen.io/tonkotsuboy/pe… #CSS
2023/03/28(Tue) 09:51:38
リツイート 180 いいね 872
このツイートへ このユーザの人気ツイート
10
Safari 15が正式リリースされたので、CSSでアスペクト比を固定できるaspect-ratioが全モダンブラウザで使えるようになりました💐 ずっと待ってました🥰 例えば16:9にしたい場合 ▼ 平成😡 padding-top: 56.25%; ▼ 令和🥳 aspect-ratio: 16 / 9; デモ codepen.io/tonkotsuboy/pe… #CSS
2021/09/21(Tue) 11:13:40
リツイート 175 いいね 752
このツイートへ このユーザの人気ツイート
11
めでたい💐 Chrome Canaryで、遂にCSSネストに対応しました。 .container { .child { color: red; } } の入れ子が、「SassではなくCSSで」できるようになります🧑🏻‍🎨 使い方や各シーン毎の事例について、デモを交えて紹介しました zenn.dev/moneyforward/a… #css #cssnite #codershigh2022
2022/11/18(Fri) 09:25:52
リツイート 162 いいね 520
このツイートへ このユーザの人気ツイート
12
いま、CSSでif文の議論がされている。 Sassではなく、CSS。 アツい✨ W3C csswg-drafts github.com/w3c/csswg-draf… 解説 bram.us/2020/12/30/the… #CSS
2020/12/31(Thu) 23:49:34
リツイート 157 いいね 597
このツイートへ このユーザの人気ツイート
13
さ：さっすが〜！ し：しらなかったー！ す：すごーい！ せ：センスいい〜〜〜！ そ：ソースコード見せてもらえますか〜〜？
2020/09/23(Wed) 15:02:46
リツイート 146 いいね 762
このツイートへ このユーザの人気ツイート
14
勉強会での登壇について、いつも感じている正直な気持ちを書きました。
2022/10/24(Mon) 10:18:19
リツイート 142 いいね 783
このツイートへ このユーザの人気ツイート
15
今回リリースされたSafari 14.1、iOS Safari 14.5で、Flexboxでのgapプロパティが使えるようになりました💐 Chrome・Edge・Firefox・Safariの全モダンブラウザで、Flexbox用gapが使えることになります☺️ ずっと待ってました🐶 昔作ったデモ codepen.io/tonkotsuboy/pe… #CSS #ギャップ萌え
2021/04/27(Tue) 12:35:00
リツイート 134 いいね 470
このツイートへ このユーザの人気ツイート
16
複数要素のa:hoverとa:focusにスタイルをあてたいとき、大昔は長くて重複だらけのコードを書いていた🤮 （たまに現場で見かけて指摘している） 現代は :is() が使えるので、短く重複なしで書ける👍 2年前から全ブラウザ対応済 zenn.dev/moneyforward/a… #CSS #脱IE時代のモダンCSS
2023/01/14(Sat) 18:21:41
リツイート 133 いいね 1,182
このツイートへ このユーザの人気ツイート
17
本日のSafari 15.4リリースにより、「全」モダンブラウザで使えるようになったウェブ技術 HTML ・<img loading='lazy'> ・<dialog> CSS ・:focus-visible ・scroll-behavior ・@Layout ・accent-color ・contain JavaScript ・hasOwn() Cascade Layers、全ブラウザ実装の判断が早い🫥 #CSS
2022/03/15(Tue) 13:12:44
リツイート 132 いいね 491
このツイートへ このユーザの人気ツイート
18
今日リリースされたFirefox 89が、CSSのaspect-ratioに対応しました💐 例えば16:9にしたい場合 ▼ 平成😡 padding-top: 56.25%; ▼ 令和🥳 aspect-ratio: 16 / 9; Chrome・Edge・Firefoxで対応したので、あとはSafariだけです🚀 デモ codepen.io/tonkotsuboy/pe… #CSS #Firefox
2021/06/02(Wed) 10:44:04
リツイート 128 いいね 434
このツイートへ このユーザの人気ツイート
19
新しい人向けに、ウェブとHTMLとCSSとJavaScriptの基本の基本を教えてくれる資料ないかなあ…と思っていたら、すぐ側に神がいた。 ウェブ入門 developer.mozilla.org/ja/docs/Learn/… HTML の基本 developer.mozilla.org/ja/docs/Learn/… CSS の基本 developer.mozilla.org/ja/docs/Learn/… JavaScript の基本 developer.mozilla.org/ja/docs/Learn/… #MDN
2022/04/14(Thu) 17:58:50
リツイート 123 いいね 887
このツイートへ このユーザの人気ツイート
20
待ってました🤩 CSSのimage-setがFirefox 88で対応し、全モダンブラウザでの対応が完了💐 ディスプレイの解像度に応じ、適切な解像度の画像をブラウザが選ぶ便利機能☺️ HTMLのsrcsetのCSS版のような挙動で、画像読み込み最適化に役立ちます。 デモを作りました💪 codepen.io/tonkotsuboy/pe… #CSS
2021/05/07(Fri) 10:52:37
リツイート 115 いいね 521
このツイートへ このユーザの人気ツイート
21
びっくり🤯 「JavaScript」で const foo: string = "飯" や type Bar = number 等のTypeScript構文の型を「ブラウザで」「コンパイルなしで」動かす提案が進行中💐 TypeScriptをコンパイルする手間が消え、型の恩恵は受けられる、素敵な開発体験への道だ🦄 devblogs.microsoft.com/typescript/a-p… #JavaScript
2022/03/10(Thu) 10:07:51
リツイート 115 いいね 427
このツイートへ このユーザの人気ツイート
22
確かにこれはとんでもないプラグインかもしれない… 私がコードを書こうとすると、deep learningで"その先"を予測して補完してくれる… TabNine tabnine.com IntelliJ IDEA、WebStorm用プラグインはこちら… plugins.jetbrains.com/plugin/12798-t… いい…とてもいい… #WebStorm #JavaScript
2020/04/15(Wed) 20:39:21
リツイート 107 いいね 285
このツイートへ このユーザの人気ツイート
23
すごい🤩 CSSの @scroll-timelineを使って、CSSだけでパララックス効果+スクロール位置連動エフェクトが作れた💐 JSのIntersection Observerはスクロール位置に応じた演出は難しいし、scrollイベントは面倒だった。 デモ tonkotsuboy.github.io/css-scroll-tim… ※ ChromeでフラグをONに #Chrome #CSS
2022/02/20(Sun) 18:15:00
リツイート 104 いいね 624
このツイートへ このユーザの人気ツイート
24
「aタグにtarget="_blank"を設定したら絶対rel="noopener"をつけろ」と稀に聞く。 現在Chrome・Firefox・Safari・Edgeではtarget="_blank"は暗黙的にrel="noopener"の挙動になる。 昔パパ達が使ってたIE？というブラウザで必要だったらしい🤔 caniuse.com/mdn-html_eleme… #HTML #インターネット老人会
2022/08/01(Mon) 14:42:03
リツイート 103 いいね 521
このツイートへ このユーザの人気ツイート
25
HTMLの挿入のinnerHTMLは、コード内のJSの実行を防げず、危険なので使うべきでない😡 codepen.io/tonkotsuboy/pe… これを防ぐため、本日リリースのChrome 105にてSanitizer APIが実装された💐 ライブラリ無しにXSS対策が可能🥰 codepen.io/tonkotsuboy/pe… 解説 developer.mozilla.org/en-US/docs/Web… #JavaScript
2022/08/31(Wed) 10:10:10
リツイート 103 いいね 503
このツイートへ このユーザの人気ツイート
ユーザ検索
@
ハッシュタグ検索
#