Mimi's Memo

北海道在住webエンジニアの忘備録

[2010mimi-memo]

カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法

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

[2010mimi-memo]

Tailwind CSS v4が採用した「OKLCH」を理解する - Qiita

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

[2010mimi-memo]

複数行かつ 溢れたら 3 点リーダーを付ける処理を CSS だけで実現したい

[2010mimi-memo]

2026 年に向けて備えよう。 CSS のあれこれ。 - Qiita

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

[2010mimi-memo]

CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは - ICS MEDIA

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

[2010mimi-memo]

WordPressで独自の404ページを作る方法（プラグイン無し） – ワードプレステーマTCD

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

[2010mimi-memo]

【Swiper】ページネーションのクリックを有効にする方法

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

[2010mimi-memo]

疑似要素と疑似クラスを一挙にまとめてみる - Qiita

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

[2010mimi-memo]

動くサイト制作「Lightbox２」の使い方[初心者向け]

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

[2010mimi-memo]

【CSS】CSS変数で管理している色を半透明にするのに使えるcolor-mix()と相対カラー構文とは？ | deep-space.blue

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

[2010mimi-memo]

テキストリンクのCSSレシピ

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

[2010mimi-memo]

縁取り文字はCSSのtext-strokeで可能。（非推奨の時代は終わり。） / いがわ

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

[2010mimi-memo]

HTMLのテーブルのカラム幅を設定する方法 - Web開発における知見共有系ページ

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

[2010mimi-memo]

ドロップダウンメニューを親要素の真ん中へ配置する方法【CSSで実装】

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

[2010mimi-memo]

【簡単】Swiperでスライドを中央寄せにする方法【centeredSlides設定】 | WEBエンジニア なかえもんブログ

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

[2010mimi-memo]

Size （※半角） width（横幅） height（高さ） ファイルを選択すると サイズ と 各アスペクト比に重ねたイメージ が確認できます。（※イメージファイルのみ） 【現在のサイズ】width（横幅）: px /...

[2010mimi-memo]

【境界線に使える】波線・曲線SVG画像ジェネレーター

波線・曲線のSVG画像を出力するジェネレーターです。プレビューを見ながら波の数や高さ、色などをカスタマイズ可能。セクションやコンテンツの区切り等に使えます。