ページのヘッダー部分のみをブラウザのサイズに合わせて横幅いっぱいに表示したいのですが、どのようにすれば良いのでしょうか？このヘッダーには1枚の写真を配置し、スライダー等は使用しないものを検討しています。これまで色々調べてjQueryを使用して、背景いっぱいに写真を表示することはできたのですが、ヘッダーのみに指定するプラグインが見つけられず困っています。IE6,7にも対応したものを探しているのですが、どなた様かお詳しい方いらっしゃいましたら、ご教授お願い致します！
jQueryうんぬん言う前にCSSの基本からやり直せ。エスパーすると、#wrapの外にheader配置してwidth:100%。
コメントありがとうございます。勉強不足で申し訳ありません、、。width:100%は理解できるのですが、一枚の写真をそのように配置すると間延びしたような画像になってしまうので、他の方法で写真の縮尺を変えずに表示する方法はないのかと思いお聞きしたかったのです。
まず、試してみましたか？
はい。実は何度も試しているのですが、希望しているような出来にならず、投稿させてもらいました。headerに使用している写真がよくないのか、100%で指定するとやはりビヨーンと間延びして縮尺が狂った画像になってしまします。縦横の比率を変えることなく、ブラウザに左右されない、headerのみ横幅いっぱいのデザインにできればと思っているのですが、、。
ほれ。
<!DOCTYPE html><html lang="ja"><head> <title>hoge</title> <style type="text/css"> html,body{ width:100%; padding:0; margin:0; } </style></head><body> <img src="hoge.jpg" width="100%"></body></html>
コメントありがとうございます。今試してみました。画像はきちんと横幅いっぱいに表示されます。ただ、この画像の上にロゴやメニューバーを設けようと思っていまして、このままの状態で設置してみるとズレてしまいます。class指定でbackground-imageでwidth:100%指定してみると今度は横幅いっぱいには表示されず、左側に作成時のサイズで表示されてしまいます。どのようにすればよいのでしょうか？もう少しお付き合いいただけませんでしょうか。宜しくお願い致します。
横幅に応じて可変する背景ならロゴやボタンのデザインがずれるのは当たり前では？？イマイチ詳細が伝わらないですが。横幅2000くらいの背景画像を用意して。backgroundにセンター寄せでいけませんか？実際やりたい形のラフをアップして、これを実現するために今こうしたんですけどって感じのコードを見せればみんなちゃんとアドバイスくれると思いますよ。
コメントありがとうございます。おっしゃる通りですよね。横幅2000の画像を作ってセンター寄せにしてみます。
うーん、CSSの理解度が低いですな…CSSを勉強しなはれ。しなはれ！
勉強不足、、申し訳ありません。
小さな画像を無理に大きくすれば画像劣化は否めませんが、それはいいのでしょうか？私的な意見ですが、やはり2000ぐらいの画像を用意なさって配置したほうがいいのではと思います。どうしても100%で設置したいのであれば、ラフや現状のコードを見せていただかなければ、イマイチどのようにされたいのか伝わってまいりません。
勉強不足だと気づかれたのであれば、書籍などを購入されるより、たくさんのサイトのソースをご覧になり、知識を増やすことをオススメします。
コメントありがとうございます。やはり2000ぐらいの画像を作って配置してみます。ご指摘頂いたように、もっと色々なサイトのソースを見て勉強していきます！
自分の理想通りに出来てるサイトを探して、そのソース参考にするのが早いと思いますよ。
コメントありがとうございます。もっと色々なサイトのソースを見て、勉強してみます。
jqueryやjavascriptですらなく、単にhtml/cssの話なんだから、最低限基本的なことは聞くよりも調べるべきだと思ったり。リファレンスを調べれば分かる内容だと、おそらくみんな思ってるよ。
コメントありがとうございます。初歩的な質問をしてしまい、申し訳ありませんでした。反省しています、、。みなさんからご指摘があった通り、色々なサイトのソースを見て勉強してみます。
みんなの回答 5 件
jQueryうんぬん言う前にCSSの基本からやり直せ。
エスパーすると、#wrapの外にheader配置してwidth:100%。
うーん、CSSの理解度が低いですな…
CSSを勉強しなはれ。
しなはれ！
小さな画像を無理に大きくすれば画像劣化は否めませんが、それはいいのでしょうか？
私的な意見ですが、やはり2000ぐらいの画像を用意なさって配置したほうがいいのではと思います。
どうしても100%で設置したいのであれば、ラフや現状のコードを見せていただかなければ、イマイチどのようにされたいのか伝わってまいりません。
勉強不足だと気づかれたのであれば、書籍などを購入されるより、たくさんのサイトのソースをご覧になり、知識を増やすことをオススメします。
自分の理想通りに出来てるサイトを探して、そのソース参考にするのが早いと思いますよ。
jqueryやjavascriptですらなく、単にhtml/cssの話なんだから、最低限基本的なことは聞くよりも調べるべきだと思ったり。リファレンスを調べれば分かる内容だと、おそらくみんな思ってるよ。
関連するトピックス