Twitter 人気のつぶやき 2020年 トップ30
WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。昨年同様、今年人気だったつぶやきトップ30を紹介します。週間ランキングで1位、2位だったものがほとんどなので面白い記事がつまっていますよ！時事ネタや特設サイト等で既に見ることのできないサイトは省いているので、そんな記事も見逃したくない方はぜひフォローしてみてくださいね！
See the Pen
dropplets by Oscar Salazar (@raczo)
on CodePen.
2. HTML：【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
この記事をRTする
3. JavaScript：配列で使えるコードの早見表。ふと書き方忘れちゃったりしますよね。。
#javascript array cheatsheet
?concat
?join
?slice
?indexOf
?forEach
?every
?some
?filter
?map
?reduce
?sort
?reverse
?shift
?unshift
?pop
?push
?splice#100DaysOfCode #CodeNewbies #freeCodeCamp #javascript30 pic.twitter.com/EEBIlRRtLw— Proful ✍ sketchnotes (@profulsadangi) July 28, 2020
4. デザイン：最近のアイコンが似通ってきている問題
この記事をRTする
5. iOS Safariの高さ100vhを指定した時のviewportバグを min-height: -webkit-fill-available; で解決
? TIL a #CSS trick to handle that annoying mobile viewport bug with `100vh` in WebKit (iOS Safari)! #WebDev #ProTip pic.twitter.com/lefD0Klqzd
— Matt Smith (@AllThingsSmitty) April 25, 2020
CSS：background-repeatプロパティー、repeatなら画像が切れてしまいますが、roundなら画像が切れないようサイズを変えて、spaceなら画像のサイズは同じまま、見切れないよう余白を調整して繰り返し表示しますよ！ pic.twitter.com/GpZkMpr1rd
— Webクリエイター ボックス (@webcreatorbox) June 25, 2020
7. CSS：CSSで描かれた3Dの部屋。マリオしてるし…どうなってんのこれ（褒め言葉）
See the Pen
3D Room | Pure CSS by Ricardo Oliva Alonso (@ricardoolivaalonso)
on CodePen.
8. CSS：Web制作の面倒な作業をラクにするCSS便利ツール59個まとめ
この記事をRTする
9. 調査：HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作
この記事をRTする
Photoshop：今更ですがPhotoshopのノックアウト（抜き）オプションってのを知った…！切り抜きたいレイヤーをダブルクリック→レイヤーオプション→ノックアウトメニュー「浅い」→塗りを0に。いろいろオプションもあるので試してみてください〜 pic.twitter.com/auVF0TtWRy
— Webクリエイター ボックス (@webcreatorbox) February 5, 2020
11. ツール：Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
この記事をRTする
12. Adobe XDの新機能「スタック」はグループ化した余白を維持して要素の入れ替えやサイズの変更が可能！これは作業効率上がりそう！
Adobe XDの新機能「スタック」はグループ化した余白を維持して要素の入れ替えやサイズの変更が可能！これは作業効率上がりそう！ pic.twitter.com/UTtJYmbRIT
— Webクリエイター ボックス (@webcreatorbox) June 17, 2020
13. HTML：あなたがまだ使っていないかもしれないHTML5の便利機能10選
この記事をRTする
14. HTML：iframeのネイティブLazy-loadがウェブ標準に、<iframe>タグにloading=lazy属性を追加するだけで遅延読み込み可能に
Native lazy-loading for <iframe> was added to the HTML standard today: https://t.co/KgO8lIBdEK
Thanks @domfarolino for the heavy lifting with spec & tests ? https://t.co/GLy6qHE7l5
— Simon Pieters (@zcorpan) July 8, 2020
15. CSS：CSSで作成できる背景模様いろいろ。大きさや色のカスタマイズ可能。右上アイコンからコードコピーできます。【CSS Background Patterns】
この記事をRTする
16. CSS：user-select: all; で要素内の文字が全選択できるようになるんですねー！Safari用には -webkit- 必須。
CSS：user-select: all; で要素内の文字が全選択できるようになるんですねー！Safari用には -webkit- 必須。 pic.twitter.com/AfWiyDMyXr
— Webクリエイター ボックス (@webcreatorbox) April 30, 2020
Chrome's new default form styles are out ? pic.twitter.com/Pr6qi1LpPn
— Hakim El Hattab (@hakimel) May 26, 2020
18. CSS：【暫定】コーダー歴2年で辿り着いた保守しやすいコーディング手法
この記事をRTする
19. ツール：Googleサービスのロゴを旧版に戻すChrome拡張公開。「新ロゴは区別が付かない」との声を受けて
この記事をRTする
20. CSS：CSS設計において特に大切にしている思想をまとめてみた
CSSを書く時のコツは
1. CSSをなるべく書かない方がいいけどコードが長くなっても気にしないをメンタルを持つ
2. 一番大事なのは保守性
3. 無理に共通化すると改修の時に死ぬ
4. 最初から最適化しようとしない
5. 誰が触っても問題が起きにくい設計がゴールだよ
— TAK / Web Creator. (@tak_dcxi) July 14, 2020
21. CSS：CSSで作られたNintendo Switch
See the Pen
switch.css by Sarah Fossheim (@fossheim)
on CodePen.
22. JavaScript：新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」
この記事をRTする
24. ビジネス：フリーランスのための「これだけは知るべし！！改正民法」
この記事をRTする
25. CSS：ギザギザや波型など、Webサイトのエリア分割時に使える形をコピペで実装できます。形を選んでドラッグで形の調整、HTML/CSSタブにコードが表示されます【CSS Section Separator Generator】
この記事をRTする
26. JavaScript：jQueryを素のJavaScriptに書き換えるとこうなるよ、というコードまとめ
この記事をRTする
27. ニュース：Chromeもダメ、Edgeもダメ… マイナポイント予約、PCは「IE11」のみ対応です
この記事をRTする
28. CSS：全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現
この記事をRTする
29. 2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説
この記事をRTする
30. CSS：box-shadowのサンプル一覧。クリックでコードをコピーできます【Beautiful CSS box-shadow examples】
この記事をRTする
Facebookページでも同じ情報を流しています。いますぐ「いいね！」
