LP

用途

スクロールアニメーション CSSで作る9種 — コピペでApple風

スクロールアニメーション CSSは、指でページを下へスクロールする動きに画面が応える仕組みで、Appleの製品ページがその基準です。スクロール用ライブラリ一切なしのCSSだけで、横流しパネル・固定画面の切替・単語の着色・背景色の入れ替えま

読む

ボタン2026-09-11

css ボタンデザインとは、ボタンの色・形、マウスを乗せたときと押したときの反応までを、コード数行で決める作業です。どこかのランディングページで見たキャンディのようなグラデーションボタンや、指でぐっと押せる立体ボタンを自分のサイトにそのま

i18n2026-09-11

多言語サイト作り方で検索する人の多くは、翻訳ファイルの抜けに気づかないまま公開してしまいます。ko.jsonとen.jsonのキーが半分しか揃っていなくても、画面は静かに空欄を返すだけだからです。ここに集めた9個はコピペで検査できる出発点

gallery2026-09-11

ビフォーアフタースライダーは2枚の写真を重ね、動かせる境界線で前後を並べて見せるUIです。境界線はクリックやドラッグにリアルタイムで反応する必要があるため、CSSだけでは作れずJSが数行必要です。

ニューモーフィズムデザインとは、カードやボタンの背景色を画面の背景とほぼ同じにしたうえで、明るい影と暗い影を反対方向に重ねることで、色ではなく影だけで立体感を出すデザイン手法です。名前も作り方も知らなかった、あの「押し込まれたようにふくら

gallery2026-09-119種

CSS フォトギャラリーは、複数の写真をグリッドやウォーターフォール状に並べ、ホバーやクリックに反応させるレイアウト技法です。Pinterestで保存したあのギャラリーのように見えても、実際にコードに落とすとグリッドの数式や画像のクロップ

HUD デザインとは、ゲームやSF映画の照準器やレーダーのように、座標や状態の数値を画面に重ねて表示し、まるで自分が見つめ返されているような印象を与えるインターフェース手法です。この記事では、その監視カメラのような雰囲気をそのまま動くランデ

y2k webデザインとは、2000年代のCDやホログラム包装紙にあったクロムの輝きと虹色の反射を、CSSだけで蘇らせるスタイルです。CDの裏で虹色ににじんでいたあの光が、今度はボタンや見出しの中に入ってきました。

ネオブルータリズム UIとは、太い墨色の枠線とにじみのない直角の影、彩度の高い原色ブロックを飾らずにそのまま画面へ置くデザイン手法です。ボタンやカードによく使われます。

css カードホバーとは、商品カードやブログ記事カードにマウスを乗せたりキーボードでフォーカスを移したりした瞬間だけ、画像が拡大したり隠れていた説明が現れたりする短い動きのことです。商品・記事カードにそのまま貼り付けられる9種類を、実際に