Web Design

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


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

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

スポンサードリンク

デモはこちら

デモ

 

<head>内の記述

<head>内には、

を記述

 

<body>内の記述

<body>内には

を記述

 

searchbox.cssの記述

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

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

最後に

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

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

参照サイト
CODEPEN

投稿者プロフィール

mayukou
mayukou

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

詳しくはこちら


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

関連記事

  1. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

  2. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  3. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  4. Web Design

    コピペでOK!wordpressに設置するシンプルな検索ボックス

    こんにちは。mayukouです。最近は、wordpressのカスタマ…

  5. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しました

    みなさんこんにちは、mayukouです。このあいだ1月に行われたセミ…

  6. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

コメント

  • コメント (0)

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

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

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Tutorial

    簡単!photoshopでスタンプ風のかすれた表現をする方法
  2. iPad Pro

    今や欠かせない存在!iPad Pro “9.7を購入して、約3ヶ月が…
  3. Web Design

    WordPressブログを同じサーバーに複数作る方法
  4. 未分類

    wordpress初期化してしまいました。
  5. Web Design

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