ダークモードは、目に優しいデザインやバッテリーの節約に役立ち、スマホで使っている人も結構いると思います。 多くの海外製テーマはダークモード対応しています。対応できない場合はプラグインを使ってもいいです。僕は一応コーダーなので、できるだけ使い…

どちらもウェブページに図形や画像を描画するために使用されますが、それぞれ異なる特徴や用途があります。今回では、SVGとCanvasの違いについて解説します。 SVG SVGは、XMLベースのベクター画像フォーマットです。 ベクター画像は、数学的な形状や座標を使…

グラデーションは、一定の方向に徐々に色が変わる効果を指します。今回はCSSグラデーションの基本的な使い方を紹介します。 CSSグラデーションの基本 CSSグラデーションを使用するには、要素の背景にグラデーション関数を指定します。 主に三つの種類があり…

CSSで要素の高さや幅を指定する際はpxや%といった単位を使うのが一般的ですが、本文はビューポートの単位を紹介します。 ビューポート単位 まず、ビューポート単位とは、ビューポート（Viewport）というブラウザの表示領域のサイズに基づいた相対単位です。 …

CSS3では、フォントサイズの指定に「rem」と「em」という単位が使えます。 これらの単位は、どちらも相対的な値であり、親要素のフォントサイズに対する相対値で指定されます。以下、remとemの違いと使い分け方について解説します。 remとは？ remとは「root…

.haku-20230306{ display: flex; justify-content: space-around; align-items: center; height: 100%; } .haku-20230306 div{ display: inline-block; color: transparent; } .haku-20230306 span{ font-size: 40px; animation: twinkle 4.6s linear infini…