- ベストアンサー
検索boxを画像化するには？
今コーディング中のサイトに検索欄があります。 検索boxはデフォルトのboxではなく、デザインされたもの （例えばアップルサイト：http://www.apple.com/jp/のような）を 使用したいと考えております。 どのようにしたら実装できるのでしょうか？ JavaScriptなど必要なのでしょうか？ できればhtml＋cssでできたらいいなぁと思っております。 ご存知の方お教えください！
- dwilk
- お礼率51% (15/29)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
CSSでテキストボックス内を背景画像にするといいですよ。 余白はpaddingで。
関連するQ&A
- amazon.comの様な検索ボックスの作り方
amazon.comの様な検索ボックスの作り方がわからなく困っています。 http://www.amazon.com/ アマゾン（米）のサイトでは、検索ボックスで <div>タグの上に<span>タグを重ねています。 HTMLとCSSを見ても、どうやっているのか解読できません。 どのようにすればいいのか教えてください。
- 締切済み
- HTML
- モバイルサイトの検索box作成
モバイルサイトで検索boxをコーディングしたいのですが、 テキストboxの右にボタン並ぶようにしたいんですけど i‐modeだと改行が入ってしまいます。 幅の指定をしてもタグに直接記述してあるcss自体を読み込んで くれないようなんですが、回避方法はありますか？
- 締切済み
- その他([技術者向] コンピューター)
- JavaScriptを使わずにcssでフォームのcheckboxをオリジナルの画像にすることは可能でしょうか?（IEのみ対応でOKです）
ただいまフォームを作成中です。 そこで、チェックボックスをデフォルトのものではなくて、 オリジナルのチェックボックスに変更したいと考えておりますが、 できればJavaScriptを使用せずにcssのみで実装したい(IEのみ対応でOK)のです。 以前、IEのみ対応の方法があると聞いたことがあるのですが、 調べてもほとんどJavaScriptを使用したものばかり紹介されています。 ご存知の方いらっしゃいましたら、お教えください。
- 締切済み
- HTML
- 商品検索の見せ方、方法
独学でWEBデザイン、コーディングを勉強している学生です。 ＥCサイトの商品検索ついて様々なサイトを調べていたのですが、下記２サイトが非常に印象に残りました。 http://www.tiffany.co.jp http://www.bluenile.com/jp/ HTML、CSS、JSをかじった程度の知識では一体どういった方法で、条件を入力してリアルタイムに検索結果を表示させているのか見当つきせん。 詳しい解説や、こういったものを勉強したら良いなど、教えていただけたら幸いです。
- 締切済み
- CSS
- ボックスの作り方【CSS】
ボックスの作り方【CSS】 下記のサイトにボックス？が多数並んでますが、これはどうやればCSSで表現できるでしょうか。 HTMLのtableだったら出来るのですが、下記のサイトのようにCSSでやりたいのですが。 http://www.2step-css.com/ 『CSS ボックス 装飾』など思いつく単語で検索してみたのですが、なかなかたどり着かないので。 詳しい方いらっしゃいましたらご教示ください。 よろしくお願いします。
- 締切済み
- CSS
- チェックボックスを使った検索システム
チェックボックスを使った検索システム ホームページの中にチェックボックスを使って希望に合う商品や案件を検索できるシステムを導入したいです。 そして、検索後、表示されるページはホームページと同じようにデザインしたいのと、検索エンジンを使った検索にもそのページがヒットするようにしたいです。 あまりよくわからないのですが、こういったシステムはありますでしょうか？ できれば無料で導入したいです。教えてください。 今は http://www.cgi-amigo.com/ を使ってます。 これだと、デザインの変更もできず、検索エンジンにもなかなかヒットしないような気がします。 不動産の物件探しのようにチェックボックスを使い、案件ページが検索エンジンにヒットするようにしたいです。 何もなければ、案件ページなどを全てhtmlやcssで作るしかないのかと考えてます。 無知で申し訳ないですが、よろしくお願いします。
- ベストアンサー
- その他(データベース)
- リンクにオンマウスで検索ボックス表示
おわかりになる方に教えていただきたいのですが、 http://lll.s21.xrea.com/m/s/20.html ような簡単なYahooの検索ボックスをHP上に文字だけ、 たとえばYahooとだけ書いておいてオンマウスすると検索ボックスが 現れるというスクリプトまたはCSSでもできれば、教えていただきたいのですが、いろいろと調べてみたのですが、なかなかこれはないようで。。。 できれば、 http://www.lucky-bag.com/appendix/css-popup/popup.html のようなページで現わすことができれば、（オンマウスなのでマウスオーバーしてまた検索ボックスを消したいのですが、） オンマウスの時だけに検索ボックスが現れるとなると、検索文字を打ち込んでさらに検索ボタンを押さないとならないので、その間に マウスオーバーしてしまったら検索することができなくなってしまうので、元のリンクの文字にある程度くっついていて、上記のページのサンプルのようにオンマウスの間にカーソル移動ができるのであれば 問題はないと思うのですが、難しいのです。 オンマウスで検索ボックスを表示して検索できる、というようなことは可能なのでしょうか？ HP内部をすっきりしたいので、たくさんの検索ボックス、GoogleやYahooなど４つも５つもになりますと配置の余裕がなく考えたのもなのですが。。。。 とても困っております、なにとぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- Photoshopで作成した検索ボックスについて…
ＷＥＢ作成初心者です。 すみませんわかる方いらっしゃいましたら教えてください。 http://www.webdesignlibrary.jp/2009/06/professional-dark-header.php#4 ↑ 自分のＷＥＢサイト内検索用のボックスを作りたく、上記のサイトをみて作成していますが、上記サイトにて「Photoshopでプロフェッショナルがデザインするダークなヘッダーを作る方法」の内容の中でわからない部分があるので質問です。 手順後半部分の「検索ボックス」を手順通りにPhotoshopで作っていますが、手順には「テキストを入力すると次のようになります。」さくっと書かれて終わっていますが、どの段階でそうなるのでしょうか？ またこれを実際に自分で作ったサイトで機能するうようにするにはどうしたらよいでしょうか？ 教えていただけたら幸いです。 宜しくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- フォトショップで作ったカンプを使ってコーディング
プロはフォトショップで作ったカンプを使ってコーディングするときに、ボックスなどのさいずをどう確認していますか？ 下記サイトに下記のような記載があるのですが、情報を見ながらボックスをパス選択ツールなどで囲ってみるということでしょうか？ それだと１PXくらいずれることがありませんか？ それともボックスを作った段階ですべてサイズをメモって、テキストで何pxと記載しておくのでしょうか？ デザインを見るときに見えないようにするというのはどうでしょうか？ 5．photoshopでF8キーの「情報」を見ながら、サイズを確認しながらエディターでCSSコーディング。 http://okwave.jp/qa/q5279110.html
- ベストアンサー
- CSS
お礼
chikottoさんご回答ありがとうございました！ できましたーーーーー！！！！！ 背景画像にして、<input>でデフォルトで表示される borderを「none」にしてpaddingで調節したらできました。 とても助かりました！ ありがとうございました♪