css

SQLiteで履歴を管理!Electron製クリップボードアプリ

SQLiteで履歴を管理!Electron製クリップボードアプリ

Electron × SQLiteで最強のクリップボードアプリを実現! 前回はlocalStorageを使ったシンプルなクリップボード履歴アプリを紹介しましたが、今回はSQLiteを採用したバージョン…

続きを読む →
Electronで作るクリップボード履歴アプリ開発入門

Electronで作るクリップボード履歴アプリ開発入門

この記事は、Electron と HTML/CSS/JavaScript を使って開発した「クリップボード履歴管理アプリ」の完成までの実装手順を整理した手順ガイドです。 目的 Mac上で実行できる、履…

続きを読む →
CSSネスト×BEM×FLOCSS対応コーディングガイド

CSSネスト×BEM×FLOCSS対応コーディングガイド

SSネスト(CSS Nesting Module)は、2023年以降モダンブラウザに標準実装され、SCSSなしでも構造的にスタイルを記述できるようになりました。本記事では、このCSSネストを活用しなが…

続きを読む →
CrossGlide:上下スクロール中に画像がすり替わるスタイリッシュなアニメーションを実装しよう

CrossGlide:上下スクロール中に画像がすり替わるスタイリッシュなアニメーションを実装しよう

CrossGlide:上下スクロール中に画像がすり替わるスタイリッシュなアニメーションを実装しよう Webサイトに動きのあるビジュアル要素を取り入れたいとき、スクロールに連動するアニメーションは非常に…

続きを読む →
CSSが効かない原因9選|初心者が見落としがちなミスと解決方法をチェック!

CSSが効かない原因9選|初心者が見落としがちなミスと解決方法をチェック!

Web制作において「CSSが反映されない」「デザインが変わらない」という問題に一度はぶつかるものです。この記事では、初心者が見落としがちな原因を9つのチェックリストにまとめ、わかりやすく解決策をご紹介…

続きを読む →
Neumorphismデザインのトグルボタン14選|CSSだけで実装できるクリック&ホバー切替

Neumorphismデザインのトグルボタン14選|CSSだけで実装できるクリック&ホバー切替

はじめに CSSだけで表現力の高いUIを作れるようになりたい──そんな方におすすめなのが、今回ご紹介するNeumorphism(ニューモーフィズム)スタイルのトグルボタンです。 本記事では、クリックで…

続きを読む →
Tailwind CSSの学習方法|初心者が最短でマスターする7つのステップ

Tailwind CSSの学習方法|初心者が最短でマスターする7つのステップ

Tailwind CSSは、クラス名を組み合わせて直感的にデザインを組み立てられる「ユーティリティファーストCSSフレームワーク」です。初心者でも理解しやすく、CSSが苦手な方でも実装力がつくため、学…

続きを読む →
Tailwind CSSで作る!製品LP|Swiper・アニメーションも解説

Tailwind CSSで作る!製品LP|Swiper・アニメーションも解説

近年、Tailwind CSSの人気はますます高まり、ランディングページ(LP)の制作においても大きな力を発揮しています。本記事では、実際に公開しているスマホ製品LP(デモはこちら)を例に、Tailw…

続きを読む →
FadeGlyph ― テキストがふわっと浮かぶランダムアニメーションの作り方

FadeGlyph ― テキストがふわっと浮かぶランダムアニメーションの作り方

「背景にふわっと現れる文字で、上品な雰囲気を演出したい」 そんな時にぴったりのCSSアニメーションが「FadeGlyph(フェードグリフ)」です。 このアニメーションでは、日本語明朝体フォント「Zen…

続きを読む →