- ベストアンサー
【CSS】大胆なデザインの背景を設定する方法
- 下記サイトみたいな大胆なデザインとなる背景をcssでレイアウト設定する方法を解説します。
- ヘッダー部分のデザインがコンテンツ部分にまで関わり、コンテンツ枠の背景が違和感なく表示されるようなデザインを実現するために、いくつかの方法があります。
- 具体的なCSSの組み方や参考サイトの解析方法について詳しく説明します。
- みんなの回答 （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で終わっている。 背景画像が一枚（繰り返しなし）があり、上部にヘッダ、中央にコンテンツがある、ごく普通のページにみえます。
