Mimi's Memo

テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design

はじめに Tailwind CSS v4で、カラーシステムがHEXからOKLCHに変更されました。 「oklchってなんだよ！俺らのHEXを返せよ！！」と激怒した方も多いのではないでしょうか。 まぁそんなに怒らず、まずはoklchを知ろうということで調べました。 TL;...

はじめに 2025年の Advent Calendar で CSSのことを取り扱ったのですが、今年も様々な CSS のプロパティや機能が発表・実用化されてきました。 発表されてもすぐに使えるわけでは無いのがもどかしいところでもあるのですが、今のうちから備えておいて損になる...

Scroll-drivenAnimations（スクロール駆動アニメーション）を使うと、スクロール量そのものをアニメーションの進捗に使えます。スクロールと完全に連動して動くスクラブアニメーションや、スティッキーな表現をCSSだけで実装できるのが特徴です。

404ページは、存在しないページをリクエストされたときに表示されるページです。Webサイトに必須なページですが、WordPress自体に404ページを設定する機能はありません。

Swiperのページネーションをクリックしてもスライド画像が動かない・・・。クリックを有効にする方法が知りたい。 Swiperは、デフォルトだとページネーションのクリック機能は｢OFF｣になっているため、ドットをクリックしてもスライドは動き

はじめに CSSセレクタである疑似要素と疑似クラスは有用なものが多いですが、数多く存在するため覚えきれていないという方も少なくないはずです。 今回は、この2つのセレクタについてまとめていきます。 (Experimentalな機能については除外します。) 出来るだけアルファ...

この記事ではjQueryのプラグインLightboxがより進化した「Lightbox２」の使い方を紹介します。画像が拡大される動きをつけることができます。簡単に導入でき、ポートフォリオサイトに使いやすいのでオススメです。

この記事では「CSS変数で管理している色をCSS上で半透明にしてから使う」という状況に限定して、color-mix()関数と相対カラー構文についての話をします。 CSS変数で管理している色をCSS上で半透明にするとは 筆者はもともとSass

CSSを使ってナビゲーションの表示／非表示を切り替えるメニューボタンのCSSレシピを紹介します。

デザインやAI、コーディング中に思いついたり、つまづいたりしたことを、メモに残しています。

HTMLのテーブルのカラム幅を設定する方法 方法1: HTMLでのカラム幅の設定 方法2: CSSでのカラム幅の設定 HTMLファイル CSSファイル 方法3: レスポンシブデザインでのカラム幅の設定 HTMLファイル CSSファイル HTMLのテーブルのカラム幅を設定する方法 HTMLテーブルのカラム幅を設定する方法にはいくつかのアプローチがあります。 以下に、具体的な方法とそれぞれの利点を説明し、サンプルコードを示します。 方法1: HTMLでのカラム幅の設定 テーブルのカラム幅を設定するためには、HTMLのcolgroupとcol要素を使用する方法があります。 colgroup要素は、テ…

ドロップダンメニューを、横幅が可変の（widthを指定していない）親要素の真ん中へ配置するためには、少しだけ工夫する必要が有ります。当記事ではX軸（left:）の指定にcalc()関数を使う方法を解説します。

今日は、Swiperを使ってスライドを中央寄せにする方法を一緒に見ていきましょう。初心者の方でも簡単に設定できるように、具体的なコード例と共に分かりやすく説明しますね。 もくじ1 Swiperの基本設定2 中央寄せにする […]