CSSでアニメーション検索フォームを作成する方法
CSSを使えば、クリックすると入力欄がスムーズに広がるアニメーション付きの検索フォームを簡単に作成できます。実装の鍵となるのは、transitionプロパティと:focus擬似クラスの組み合わせです。
実装のポイント
- transition： widthの変化に対して0.4秒のease-in-outイージングを指定し、滑らかなアニメーション効果を実現します。
- :focus： 検索ボックスがクリックされてフォーカスされたタイミングで、widthを100%に変更することでフォームが横方向へ拡張されます。
コード例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
input[type=text] {
width: 170px;
font-size: 16px;
background-color: white;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<h1>アニメーション検索フォームの例</h1>
<form>
Search:
<input type="text" name="search" placeholder="ここに入力してください...">
</form>
</body>
</html>出力結果
上記のコードを実行すると、次のような画面が表示されます。
検索ボックスをクリックした場合
検索ボックスをクリックしてフォーカスを与えると、以下のように入力欄が滑らかに横へ広がります。
このように、わずか数行のCSSだけで、ユーザーの操作に応じて直感的に反応するスタイリッシュな検索フォームを実装できます。transitionの duration やイージング関数を調整すれば、アニメーションの速度や感触も自由にカスタマイズ可能です。
-
CSSを使ってクーポンを作成する方法【サンプルコード付き】
CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na
-
CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック
CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>