目次

HTML + CSS 関連

基本

📝ちゃんと使い分けてる?CSSのpx, em, rem, %, vw単位の違い|たかもそ/Web Creator.|note

カテゴリー別

YouTube 動画の埋め込みを CSS のメディアクエリを使ってレスポンシブ対応する方法
動画の構造化データ
Twitter のツイートを埋め込みする方法
特殊文字
Unicode 絵文字
Web サイトのダークモード対応
CSS プリプロセッサ
アニメーションGIFをビデオに置き換えてページの読み込みを高速化する
WebKit のカスタム スクロールバー
【初心者向け】CSSの擬似要素と擬似クラスを理解しよう! | ビジネスとIT活用に役立つ情報
擬似要素とは?便利な擬似要素を基礎から解説!

CSS ジェネレータ

CSS ローディングアニメーション
ブラウザ別 最小フォントサイズ

Sass、Scss、Less

Sass? Scss?! Less!? CSSと何が違うの? ・・まとめてみた。 - sparkle

Less

Less - Leaner Style Sheets

JSS

JSS - A lib for generating CSS from JavaScript

ツール

HTML Tidyは、無効なハイパーテキストマークアップ言語(HTML)を修正し、潜在的なWebアクセシビリティエラーを検出し、結果のマークアップのレイアウトとインデントスタイルを改善するためのコンソールアプリケーションである。
HTML Tidy - Wikipedia より

HTML Tidy
HTML Tidy Project Page

参考文献

読み込みが速い HTML ページを作成するための Tips - 開発者ガイド | MDN

【CSS】hover時にtransform:scale()で画像を拡大表示させる方法 | ゆうやの雑記ブログ
CSS|マウスオーバーで画像に効果を入れる方法 | コトダマウェブ
スマホでもhoverを対応させる方法 | ホームページ制作・LP制作 | 東京・大阪 | 株式会社イーナ
CSSだけでホバーエフェクトが実装できる!Hover.cssの使い方 | Web制作会社スタイル
スマホのhover対策を解説!(PCと同じCSS効果を実現)

コリス
サイトの表示高速化につながる18のこと | knowledge / baigie