Decoweb– Author –
-
【CSS】クリックで押した感のあるボタン（transform: scale & shadow）
実際に押したようなフィードバック演出をする ボタンをクリックしたとき、「へこむ」ような動きを加えることで、視覚的なフィードバックを演出できます。ユーザーにクリックが伝わったことを感覚的に示せる、非常に実用的なUI演出です。 HTML [crayon-6ace... -
ボタンをプルプル震えさせるアニメーション
注目を集めたいボタンや、遊び心を加えたい場面に ボタンが「プルプル」と震えるアニメーションは、ユーザーの注目を引きつけたり、遊び心を演出したいときに役立ちます。CTA（行動喚起）ボタンや、ゲーム風UI、インタラクティブな表現で活躍するテクニッ... -
box-shadowでボタンに立体感を出す方法
平面的なボタンを奥行きのあるデザインに変える 立体感のあるボタンは、押せそうな印象を与えるため、UIにメリハリをつけたいときに活躍します。box-shadowを活用することで影をつけ、見た目に奥行きを出すことができます。 HTML [crayon-6aced34000c2e068... -
ボタンホバー時にふわっと色を変える【CSS】
ボタンにマウスを乗せたとき、ふわっと色が変わる演出は非常に基本的ながら効果的です。CSSのtransitionプロパティを使えば、カラーチェンジやサイズ変更などのアニメーションをスムーズに表現できます。ユーザーに反応があることを示すため、ボタンやリン... -
CSSだけでローディングスピナーを作る
読み込み中や待機時間に最適な演出 ローディングスピナーは、処理中や通信中などの“待ち”時間にユーザーへ状況を伝える定番UIです。CSSだけで実装すれば、外部画像やJavaScript不要で軽量なインジケーターが作れます。 HTML [crayon-6aced340012e603100654... -
CSSによる無限ループアニメーションの実装方法
背景のオブジェクトを回し続けたい、ローディング状態を示し続けたいなど、繰り返し動く要素を作りたいときに無限ループアニメーションは役立ちます。 CSSのアニメーションとinfinite指定で簡単に実現できます。 HTML [crayon-6aced34001649655416227/] 基... -
CSSで点滅・点灯するテキストやアイコンの作り方
テキストやアイコンに注意を引かせたいときに ユーザーの視線を引きつけたいときや、「新着」「エラー」など目立たせたい情報があるときに、点滅・点灯するアニメーションは非常に効果的です。CSSの@keyframesを使えば、JavaScriptを使わずに実装できるた... -
フェードイン・アウトをCSSだけで作る
要素を徐々に表示・非表示する フェードイン・フェードアウトは、ページ遷移やコンテンツ表示時に柔らかい印象を与える演出です。CSSだけで滑らかな出現・消失を表現できます。 HTML [crayon-6aced340020e8223366090/] 基本CSS [crayon-6aced340020ea49516... -
CSSだけでスライドインアニメーション（@keyframes）
画面外から要素をスライド表示する コンテンツをふわっと横からスライドインさせるアニメーションは、ページの動きにメリハリをつけたいときに役立ちます。JavaScriptを使わずCSSだけで実装できるのが魅力です。 HTML [crayon-6aced3400246c615824167/] 基... -
見出しに下線を引くスタイリッシュな方法（border-bottom）
シンプルな下線にデザインを加えることで、印象的な見出しを作れます。border-bottomを利用します。 CSS [crayon-6aced3400276b948169926/] display を inline-block にすることで横幅が要素に合うようになります。 応用：グラデーションの下線 グラデーシ...
