虫眼鏡マークをクリックすると、検索窓が伸びて出現

検索
-虫眼鏡マークをクリックすると、検索窓が伸びて出現-

デモページを見る

See the Pen 7-2-1 虫眼鏡マークをクリックすると、検索窓が伸びて出現 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の要素をクリックして動きを確かめてね!

動きを実現する仕組み

CSS の擬似クラスである:focus を使い、テキスト入力エリアがフォーカスされた際に横幅を広くする。
テキストエリアには背景画像に虫眼鏡マークを指定する。
伸びる際のアニメーションはCSS のtransition を使って滑らかに動かす。

HTMLの書き方

  1. head終了タグ直前に自作のCSSを読み込みます。
    <link rel="stylesheet" type="text/css" href="css/7-2-1.css">
    </head>
  2. body内の検索窓を表示させたい場所にHTMLを記載します。
    <div id="search-wrap">
    <form role="search" method="get" action="">
    <input type="text" value="" name="" id="search-text">
    </form>
    <!--/search-wrap--></div>

自作のCSS内の書き方

/*========= 検索窓のためのCSS ===============*/

/*検索窓のエリア*/
 #search-wrap {
     position: absolute;/*絶対配置にして*/
	 z-index: 2;/*最前面に設定。数字は変更可*/
	 top:10px;
	 right:10px;
}

/*テキスト入力input設定*/
 #search-text{
	-webkit-appearance:none;/*SafariやChromeのデフォルトの設定を無効*/
	width: 60px;/*テキスト入力エリアが伸びる前の横幅*/
	height: 60px;
    padding: 20px;
	border: none;
	background:#fff url("../img/icon_search.svg") no-repeat 17px center;/*虫眼鏡アイコンを背景に表示*/
	background-size: 25px 25px;
	transition: all 0.5s;/*transitionを使ってスムースに伸ばす*/
	outline: none;
	cursor: pointer;/*カーソルを指マークに*/
}

/*テキスト入力inputにフォーカスした時の形状*/
 #search-text:focus {
	width: 250px;/*テキスト入力エリアが伸びる後の横幅*/
	padding: 20px 0 20px 60px;
	box-shadow: 0 2px rgba(6,0,1,.26);
}

この技術を使ったサンプルサイト

バリエーション
を見る

「機能」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top