人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

スタイルシートCSSの設定について教えて下さい。
希望通りの形で設定ができた場合は、2000ポイント進呈させていただきます。

対象サイト http://www.obanzaiya.com/
参照サイト http://www.agoda.jp/asia/indonesia/bali.html

対象サイトの左カラム最上部に“検索”という欄があります。
下部に宿泊日、出発日等の入力項目のある、検索ボックスがありますが、
CSSを設定して、上記参照サイト左上部の検索ボックスと、同じようなスタイル(見栄え)にしたいのですが、どのように設定すればよいでしょうか?
検索ボタンに使う画像は、サイズが同じであれば、後程変更しますので、何でも構いません。
参照サイトの検索ボックス内にある「価格保証」の箇所は不要です。
どうぞよろしくお願いいたします。

検索ボックスのHTML構造は、以下のURLにアップしてあります。
http://www.obanzaiya.com/html-example
また、検索ボックスの見本CSSは以下のURLにアップしてあります。
http://www.obanzaiya.com/css-example


●質問者: Tomo
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●2000ポイント ベストアンサー
#agoda_calImg1, #agoda_calImg2 {
 vertical-align: -9px !important;
 margin-top: 0 !important;
}

#agoda_checkin_selection, #agoda_checkout_selection {
 float: left;
 margin: 10px 0 !important;
}

#agoda_checkin_selection {
 margin-right: 40px !important;
}

#agoda_roompeople_selection, #agoda_button_selection {
 clear: left;
}

#agoda_button_selection {
 margin-top: 10px !important;
}

#agoda_room_selection, #agoda_adult_selection {
 float: left;
}

#agoda_btnSubmit {
 background: url("http://cdn-ak.f.st-hatena.com/images/fotolife/C/Cherenkov/20120125/20120125212909.gif") no-repeat transparent;
 border-radius: 7px 7px 7px 7px;
 box-shadow: 3px 3px 5px #C0BEC3;
 border: 3px solid #109FFF;
 height: 55px;
 width: 165px;
 cursor: pointer;
 text-indent: -9999px;
}

#agoda_btnSubmit:hover {
 border: 3px solid #1971EF;
}

#agoda_btnSubmit:active {
 background: url("http://cdn-ak.f.st-hatena.com/images/fotolife/C/Cherenkov/20120125/20120125215009.gif") no-repeat;
}

この回答は要望に対して技術的に可能であることを証明する目的であり、パクリを推奨するものではありません。一応念のため。


Cherenkovさんのコメント
ボタンの画像わすれてました

Cherenkovさんのコメント
これ画像ではないですね。cssです。

Tomoさんのコメント
ありがとうございます。助かります。 検索ボタンなのですが、テキストを「料金チェック!」に変更して、色を参照サイトと同じような色にするのは、難しいでしょうか? この部分はCSSではなく、画像を使っても構わないと思っています。 参照サイトと似た感じにすることを優先したいと考えています。 お手数をおかけしまして、申し訳ありませんが、そのようにお願できると助かります。 是非よろしくお願いします。

Cherenkovさんのコメント
ボタンのlinear-gradient(背景色のグラデーション)が抜けてますね… 最新のブラウザではないと適用されないので画像にしたほうが手堅いですね。

Tomoさんのコメント
なるほど。画像で問題ありません。どうぞよろしくお願いします。

Cherenkovさんのコメント
ボタンの「検索」の文字を消すために、text-indentを使って飛ばしていますが、使うべきではないといった意見もあります。text-indentを使わない方法としてはボタンのvalueの値を空にするだけです。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ