Web Design

丸からスライドして出てくる検索ボックスの作り方


みなさまこんにちは、mayukouです。
今日は天気がいいのでランニングをしてきました。

さて、今回は、最近よく見かけるスライドして出てくる検索ボックスの
コードを紹介します。

スポンサードリンク

デモはこちら

デモ

 

<head>内の記述

<head>内には、

を記述

 

<body>内の記述

<body>内には

を記述

 

searchbox.cssの記述

参照サイトには、Sassファイルで書かれていたのですが、 コンパイルしてCSSに直しました。

以上となります。
デモはこんな感じです。
デモ

最後に

いかがでしたか? ブログなんかでよく見かけるこの検索ボックス、使ってみたいですね!

ぜひ参考にされてください。

参照サイト
CODEPEN

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  2. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法

    みなさんこんにちは、mayukouです。先日、ホームページを作る際に…

  3. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

  4. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順

    もっとあなたに作って欲しい!とどんどん注文がくるwebデザイナーになり…

  5. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Photoshop

    Photoshopでかすれたスタンプ風表現をする方法 その2
  2. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法
  3. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方
  4. iPad Pro

    iPad Proを液タブに♫Astropad Studioはイラストレーターには…
  5. マーケティング

    コンテンツマーケティングにおける有益な記事とは?ブログ運営3年目の私の最適解
PAGE TOP