Web Design

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


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

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

スポンサードリンク

デモはこちら

デモ

 

<head>内の記述

<head>内には、

を記述

 

<body>内の記述

<body>内には

を記述

 

searchbox.cssの記述

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

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

最後に

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

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

参照サイト
CODEPEN

投稿者プロフィール

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

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

関連記事

  1. Photoshop

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

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

  2. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

  3. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた

    みなさんこんにちは、mayukouです。ウェブデザインのトレンドであ…

  4. Web Design

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

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

  5. Web Design

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

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

  6. illustration

    簡単!Illustratorでキラキラ星を作る方法

    みなさんこんにちは。mayukouです。だいぶ秋らしくなってきまし…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Web Design

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

    ワイヤーフレームがプロ仕様に!素敵なグラフィックスタイル「WireMagic」
  3. illustration

    簡単!Illustratorでキラキラ星を作る方法
  4. Photoshop

    イラストをスタンプにしよう!描いたイラストをphotoshopのカスタムシェイプ…
  5. ブログ

    [書評]サラリーマンだけが知らない好きなことだけ食っていくための29の方法
PAGE TOP