CSS
CSS
メディアクエリの書き方メモ
特にプリンターやで別のCSSを適用する 主なメディアタイプ（メディア種別） all すべての機器向け print プリンター向け …
CSS
Sass で px → rem の自動計算
mixin の場合 関数の場合 stylelint で CSS プロパティの並べ替えをしている場合は関数の方が良いかも。
CSS
video タグを使って背景に mp4 動画を流す
キービジュアル箇所などに背景動画を流すサンプルです。HTML の video タグを使用して mp4 形式の動画を再生します。 フ…
CSS
リキッド/PC幅固定の viewport 設定（ソリッドレスポンシブ）
リキッドレイアウトとPC幅固定レイアウト（タブレットでPCのレイアウトを表示する）の viewport設定色々 PC幅固定（ソリッ…
CSS 
Flexbox / Grid レイアウトチートシート
Flexレイアウトでややこしいなぁ…と思うこと覚え書き Flexbox & Grid レイアウト共通 gap …
CSS
CSS clamp() で設定したフォントサイズサンプル
見出しサイズ計算に便利なサイト https://type-scale.com/ オンラインの自動計算ツール The Clamp C…
CSS
CSS clamp() でフォントサイズの推奨値を計算する
font-size: clamp( 最小値、推奨値、最大値 ) 最小値は下限。最大値は上限。推奨値は最小値と最大値の間で使用される…
CSS
CSS min() max() clamp()
min() width と max-width を1行で記述できる。下記2つは同じ。 max() width と min-widt…
CSS
CSS でボタンを hover した時だけ内側にボーダーを付ける方法
hover した時に ボーダーを付けるには hoverする前の状態にもボーダーを付けておく、というのが通常の方法だと思うのですが、…
CSS
CSS :is() と :where() の使い方とその違い
下記はヘッダー、メインコンテンツ、フッターの内側の幅を1000pxにして中央寄せしたい場合の例。 HTML :is() 下記の①と…