【CSS】大胆なデザインの背景を設定する方法
- 下記サイトみたいな大胆なデザインとなる背景をcssでレイアウト設定する方法を解説します。
- ヘッダー部分のデザインがコンテンツ部分にまで関わり、コンテンツ枠の背景が違和感なく表示されるようなデザインを実現するために、いくつかの方法があります。
- 具体的なCSSの組み方や参考サイトの解析方法について詳しく説明します。
- ベストアンサー
下記サイトみたいな大胆なデザインとなる背景をcssでレイアウト設定する
下記サイトみたいな大胆なデザインとなる背景をcssでレイアウト設定するには？ お世話になります。css初心者です。 このサイトみたいに、http://www.blackcatpedals.com/pedal_od_1.html (1)ヘッダー部分のデザインがコンテンツ部分にまで関わっている（参考サイト→top左上のエフェクター写真みたいなデザイン） (2)コンテンツ枠の背景（参考サイト→情報が表示される部分＝中央白部分／両サイドに暗い壁のような背景）をtopから表示させ、情報量でheightが可変してもコンテンツ枠全体が違和感なく表示されている といったデザインのwebサイトを制作したいと考えています。 自分は全体の背景を#bodyにbackground-image no-repeatで表示していますが、#contensのbackground-colorを指定すると、ヘッダーからコンテンツ部分にまで関わっている上部のデザインが塗りつぶされてしまいます。 かといって、background-colorを指定しないと、背景が切れてしまいレイアウトが崩れます。これを解決するにはどうしたらよいのでしょうか？ 参考サイトはどのようにcssを組んでいるのでしょうか？ どなたか教えてください、よろしくお願いします。
- toonie
- お礼率26% (55/210)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
(1)画像を透過pngで書き出して、positionを使って位置を決定します。 (2)背景画像は大きな画像をbackground-image 0 center no-repeatで読ませているだけだと思います。 作りとしては、 <body> <div id="header"> <p class="h-img"><img src="透過png"></p> </div> <div id="contents"> <div id="contents_inner">編集エリア</div> </div> </body> CSS（ざっくり書きますが…） body:{background:#000;} ←全体の背景色 #header{position:relative;} ←透過pngの起点 #header p.h-img {position:absolute; top:0; left:-20px; width:●px; height:●px;} ←起点に対して、位置を指定 #contents{background:url(背景画像パス)0 center no-repeat;} ←編集エリアの背景画像（参考サイトで言うところの壁の画像） #contents_inner {width:●●px; margin:0 auto; background:#fff;}←編集エリアの背景（参考サイトの白い部分） ざっくりとこんな感じですが、これで実現できると思います。
その他の回答 (2)
- LOHA
- ベストアンサー率52% (203/388)
FwでデザインしてスライスしてDwで作りましたーー。 という典型的サイトですね。 恐ろしいことにtableレイアウトです。 >参考サイトはどのようにcssを組んでいるのでしょうか？ やはりhtmlのソースとcssを実際に見てみるのがベストじゃないですかね。 css: ttp://www.blackcatpedals.com/bc_interior.css 実際にやってみないと分かりませんがパッと見、左上の写真はposition:absoluteで指定するかと思います。 z-indexで前後関係は調整できるので、わざわざbackgroundなどは使わないです。 <body> <div id="container"> <div id="header"><img 左上画像/>メニューとか</div> <div id="content">本文とか</div> <div id="footer">コピーライトとか</div> </div> </body> #container { width: ...; margin: 0 auto; } #header { position: relative; } #header img { position: absolute; top: ...; left: ...; } ...
- outbrave
- ベストアンサー率60% (231/380)
(1)ヘッダー部分のデザインはコンテンツ部分とは、完全に分離されている (2)コンテンツ枠の背景に見える部分は、ページ全体の背景画像であり、高さ1700pxで終わっている。 背景画像が一枚（繰り返しなし）があり、上部にヘッダ、中央にコンテンツがある、ごく普通のページにみえます。
関連するQ&A
- body指定したimgが複雑なデザインでレイアウト
お世話になります。 現在作成しているサイトに関しての質問です。 bodyにbackground-image指定である画像を配置しています。 それはよくあるデザインレイアウトの仕方だと思いますが、問題はデザイン的な要素がdiv#contens部分（#leftmenuや#rightmenu含む）の領域まで影響しているということです。（※添付画像参照） デザイン的にdiv#headerの領域を中心としたデザインなので、うまく上下のバランスをとってrepeat-yすることもできません。 このIMGのheightを2500pxほどの大きな画像にして配置していました。そうするとPCで閲覧した時は、問題なく見れますが、iPadやスマートフォンで閲覧すると背景のみ大幅に縮小されて表示されレイアウトが崩れます。 かといってheightをiPadやスマートフォンで普通に閲覧できるサイズの1024pxにすると、当たり前ですが今度はコンテンツの途中で画像が切れます。ちょっとボリュームのあるページで画像が切れます。 コンテンツ部分の背景は白なので、div#contensにbackground-color指定することも考えましたが、そうするとbodyのbackground-imageの上に白がのってきてやはり見栄えが悪いです。 いろいろ手を尽くしましたし、検索したりしましたが、どうしてもいい解決策がありません。 bodyにbackground-imageをrepeat-yさせずに、それでもdiv#contensに情報量に応じて背景を可変させたい場合、何かいい方法はあるのでしょうか。恐らく考え方自体を全く新しい方法を取らなければならないかと思いますが、どうかご教授ください。うまく説明できたか自信がありませんが、よろしくお願いします。
- ベストアンサー
- CSS
- CSSでブラウザごとにレイアウトが崩れたりします。
はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■ ■＝ヘッダー □□●●●● □＝メニュー □□●●●● ●＝コンテンツ（中身）1 □□○○○○ ○＝コンテンツ（中身）2 □□○○○○ ▲＝フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE７のみでして、IE６やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか？ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSでのレイアウトが崩れてしまうんです。
お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }
- ベストアンサー
- ブログ
- CSSでのレイアウトについて
CSSやHTMLのテンプレートをカスタマイズ中です。 分からないことだらけですが構成としては BODYと#maincontで分かれていまして、 画面中央に四角いコンテンツ。 サイドに背景画像が表示されるようにしたいです。 BODY部分に背景画像のbackground指示を入れると 画面一面中央コンテンツ上にも背景画像が表示されてしまいます。 画像がかぶっている中央コンテンツの文章や 外枠は画像の上から表示されて読めます。 一枚構成になっているような状態だと思うのです。 枠外背景にのみ画像を表示する方法を教えてください。 画像なしの状態では閲覧に問題はないです。 下記CSSを一部抜粋します。 どなたかご親切な方。 分かりやすくお願いします。 BODY{ font-size:～～; font-family:～～～; color:#～～～; border-top:5px #000000; solid; background-image: url(～～～); background-repeat: repeat; } #maincont{ width:600px; margin:auto; padding:30px border-left:3px #～～～ dotted; border-right:3px #～～～ dotted; }
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSでレイアウト崩れ、＃rightmenuが下がって余白ができるのは
CSSでレイアウト崩れ、＃rightmenuが下がって余白ができるのはなぜ？ あまりCSSに詳しくないものです。どうかご教授ください。 添付画像のようにに、div分けして全体のデザインを制作しています。 #headerの下に#contensがあり、その中に#leftmenuと#rightmenuと区分けしています。 #leftmenuがメニューボタン部分で#rightmenuが情報を表示するコンテンツ部分です。 #contensはそれで閉じ、最後に#footerがあります。 ところが、#rightmenu部分に望んでいない余白ができます。 #leftmenuと頭で揃えたいのですが、何故か220pxほど下がって表示してしまうのです。（paddingやmarginの設定はしていません） 作業はdreamweaverで作なっているのですが、便利なものでボックスにマウスを寄せると赤いラインでボックスの表示をしてくれます。それを右クリックしてどのdivがそうさせているのか調べたら#contensだとありました。 しかし#contensのCSSをチェックしても何が原因なのか分かりません。 これはどうしてでしょうか？ 私個人の知識ではどうしても分かりかね質問させていただきました。 HTMLとCSSにどこかおかしなところがあればどうか教えてください。 よろしくお願いします。 HTML----------------- <body> <div id="header"> <h1>タイトル</h1> </div> <div id="contens"> <div id="leftmenu"> <a href="" id="ボタン1"></a> <a href="" id="ボタン2"></a> <a href="" id="ボタン3"></a> <a href="" id="ボタン4"></a> <a href="" id="ボタン5"></a> <a href="" id="ボタン6"></a> <a href="" id="ボタン7"></a> </div> <div id="rightrmenu"> <div id="rightbox-top"> <h3>本文</h3> <p>挨拶文</p> </div> <div id="rightbox-bottom"> </div> </div> </div> <div id="footer"> <p class="copyright">Copyrightうんぬん</p> </div> </body> CSS----------------- body { background-image:url(../image/top.jpg); background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); } div#header { width:800px; height:139px; margin-left:auto; margin-right:auto; } div#contens { width:800px; height:auto; min-height:520px; margin-left:auto; margin-right:auto; } div#leftmenu { width:161px; } div#rightmenu { width:639px; float:right; } div#footer { clear:both; height:100px; background-image:url(../image/top-bottom.jpg); background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin-left:auto; margin-right:auto; }
- ベストアンサー
- ホームページ作成ソフト
- CSSのレイアウト設定 （初心者）
たびたびの質問失礼します こんばんわ 今回はCSSのレイアウトについて質問があります まずCSSのソースをご覧くださいませ * レイアウトの設定*/ html{ background-color:#c0c0c0; } body{ margin:0px; padding:50px; font-size:90%; } /* ヘッダーの設定*/ #head{ width:900px; height:100px; background-color:#CCFFCC; } /* ラッパーの設定*/ #wrap{ position:relative; width:900px; background-color:#FFFFCC; } /* 左側の設定*/ #left{ width:100px; height:900px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:800px; height:900px; float:right; background-color:#CCCCFF; } HTML <!-- ********* ヘッダー ******** --> <div id="head"> <p>ここにイメージ記載予定</p> <!-- ********* 右側 ******** --> <div id="right"> あああああああああああああああああああああああああああ </div> 一部略 --------------------------------------------------------------- 1.まずヘッダーの部分が少しあいてると思うんですが これを一番上まで持っていき空白を無くす為には何を追加させたらいいんでしょうか？ 2.右側に文字を入力したとき ああああ という文字が左側に近寄りすぎてしまいます。。 これを中心に持って行くには <align="center">を入力してもうまく行きませんでしたT_T 説明下手で申し訳ないですが よろしくお願いします ちなみにHP作成は初めてです。
- ベストアンサー
- CSS
- cssで背景の幅を設定
cssで背景の幅を設定 GIGAZINE< http://gigazine.net/ >の各タイトル（黄色の背景）のように、文字の背景を一番右までになるように設定するにはcssをどういじればいいのでしょうか コードを読んでみてるのですが、特にかわったことをしている部分を見つけられませんでした 普通にbackground-colorを書くと普通に文字の部分だけに背景色が入ってしまいます
- ベストアンサー
- CSS
- CSSでの背景画像の設定について
CSSでの背景画像の設定について質問です。 参照ページ（http://www.balmuda.com/jp/）のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper> メニューバー部分の背景画像を指定 <topmenu> margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents> margin0 auto;で画面中央に配置 <footer-wrapper> フッター部分の背景画像を指定 <footer> margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。＞ 解決策を教えて頂ければ幸いです。よろしくお願い致します。
- ベストアンサー
- HTML
- CSSレイアウト・背景グラデーション
初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか？ 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。
- ベストアンサー
- CSS
- divで作成したレイアウトに背景画像を付けたいが付けられない
divでレイアウト作り背景画像を入れたいのですが背景画像が思うように適用されません。 以下のようなサイトのように、作成したレイアウトのコンテンツ部分（真ん中白い背景色部分）に背景画像をつけたいのですが、色々やってみたのですが背景画像が適用されません。 参考サイト：http://www.realbit.net/rb_results/index.html 私のソースコードは以下です。 HTML <body> <div id="header"> <p>ヘッダー</p> <p>あああ</p> </div> <div id="container"> <div id="incontainer"> <div id="main"> <p>メイン</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> <div id="leftMenu"> <p>左メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="rightMenu"> <p>右メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="footer"> <p>フッター</p> <p>あああ</p> <p>あああ</p> </div> </body> CSS #header { background-color: #FF3; width: 920px; margin-right: auto; margin-left: auto; } #container { background-color: #F00; width: 920px; margin-right: auto; margin-left: auto; } #incontainer { float: left; width: 720px; } #main { float: right; width: 520px; background-color: #900; } #leftMenu { background-color: #00F; float: left; width: 180px; margin-left: 20px; } #rightMenu { float: right; width: 180px; background-color: #FF9; margin-right: 20px; } #footer { background-color: #F0F; clear: both; width: 920px; margin-right: auto; margin-left: auto; } 参考サイトのようにコンテンツ部分に背景画像を入れたい、私の場合container部分にフォトショップで作成した背景画像をいれたいのですが、まずは実験的に、上記のように背景画像を入れる前に赤い背景色を入れて見ましたが赤い背景が出てきません。背景画像もためしに入れてみましたが適用されません。 なにが間違っているのでしょうか？
- ベストアンサー
- HTML
