Beeeat’s log

Beeeat’s log

プログラミングで出くわした知識やツール、日常生活、働き方その他色々なことをメモしていくブログ

CSS

CLS(Cumulative Layout Shift)を調査する時に使ったツールやサービスをまとめてみた

Google が「Core Web Vitals(コアウェブバイタル)」という新しいWebの指標を2021年以降に導入予定ということで話題になっています. web.dev developers-jp.googleblog.com Core Web Vitals は LCP(Largest Contentful Paint), FID(First Input Delay), CLS(…

「Web Developer」を使いこなすとフロンエンド開発がかなり捗りそうなことがわかった

フロントエンドの開発をしている時に自分が書いた HTMLの要素 や CSS セレクタやプロパティが実際にどのように組まれて表示されているかを確認するために Chrome DevTools を立ち上げてインスペクト機能や Elements を見ながら確認をする必要がある. しかし…

ブラウザで CSS のちょっとした手直しをしたい時は「Stylus」が便利だった

Webページをある程度コーディングし,ブラウザで表示の確認をした時にその場で CSS のちょっとした手直しをしたい時がある. その時に Chrome の dev ツールをよく立ち上げていたが,不意にリロードをしてしまったり,タブを閉じるとせっかく修正したコード…

「Pesticide for Chrome」を使って CSS のレイアウトのチェックをする

「Vuetify.js」のキャッチアップをしている過程で,どうやら「CSS Flexbox」のキャッチアップも必要だと思い,進めているのですが CSS が崩れているかのチェックや実際はどのようなレイアウトでスタイルされているのかを確認するのが少し面倒になってきまし…