最新記事

新しい記事が上に来ます。

CSS 画面切り替えアニメーション9選

CSS 画面切り替えアニメーションとは、ページを読み込み直さずに、画像が別の画像に変わったり、注文が確定したり、フォームが次の段階へ進んだりするとき、その変化を滑らかに見せる短い動きのことです。画面が切り替わる瞬間ごとにそのまま貼れる9種

読む

パステルデザインは、クリーム色の地にバブルガムピンク・ピーチ・レモン・ミント・ラベンダーの淡い色を重ね、影までグレーではなく同系色のパステルで描いて、飴のようにやわらかく、さわやかに見せるスタイルです。名前がなくて検索できなかった、あのデ

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

ボタン2026-09-11

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

i18n2026-09-11

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

サムネイルや名前の横に小さく貼りついて、いまの状態を一目で伝えるラベルがバッジです。新着・セール・認証済み・完売など、写真を使わずコードだけで作れます。ここに載せたcss バッジデザインはどれもコピペOKで、画像ファイルは一切要りません。

gallery2026-09-119種

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

HTMLメール2026-09-119種

メールテンプレートデザインは、ニュースレターを一枚きれいに作ることではなく、ウェルカム・領収書・パスワード再設定のようにサービスが自動送信する「取引型」メールを種類ごとに用意することです。9個のうち1つには、請求金額が0円から実際に12,

入力UI2026-09-119種

入力欄デザインとは、電話番号やカード番号、数量、タグのように会員登録や購入フォームでよく使うのに、素のHTMLだけでは思うように動かない入力ウィジェットのことです。9個のうち5個(タグ・自動伸長・ドラッグ&ドロップ・再送信タイマー・リアル

選択UI2026-09-119種

セグメントコントロールとは、iOSの設定画面でよく見る、いくつかの選択肢から一つを選ぶと背景のピルがその位置までスライドするタブ切り替えボタンです。セグメントコントロールから絵文字リアクション・カラースウォッチまで、名前は知らなくてもアプリ