- ベストアンサー
CSS:3カラム センター固定
- 3カラムでセンターを900px固定にするウェブサイトの作り方
- センターカラムを固定幅にして、左右カラムを可変幅にする方法
- 異なる背景画像を縦にタイルする方法を含むCSSの適用方法
- leoism-oreism
- お礼率100% (1/1)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
背景にする画像を縦に張り付けるのは簡単ですが、横に張り付けるとなると、ちょっと変則的なテクニックを使う必要があります。 900pxではあまりに広すぎて、小さなウィンドウでは苦しいので700にしてあります。 他にもさまざまな方法があるでしょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,body{margin:0px;padding:0px;height:100%} body>div{width:700px;margin-left:auto;margin-right:auto;background-color:rgb(255,255,255);padding:20px;position:relative;height:100%;z-index:1;} body>div>div{background:url(./img/left.gif) repeat-x 0% 0%;width:700px;height:100%;position:absolute;top:0px;left:-700px;z-index:-1} body>div>div+div{background:url(./img/right.gif) repeat-x 0% 0%;width:700px;height:100%;position:absolute;top:0px;left:740px;z-index:-1} --> </style> </head> <body> <div> <h1>サンプル</h1> <h1>質問内容</h1> <p> 質問させてください。 </p> <p> コンテンツを挟んで左右違う背景をつけたウェブサイトを作ろうと思います。 </p> <p> 3カラムのうちセンターのカラムだけは900px固定の中央配置で左右のカラムはウィンドウ幅に合わせて可変幅にしたいのですが、 </p> <div></div> <div></div> </div> </body> </html>
お礼
子セレクタを使って、Z-indexで画像を見せるんですね。 思いつきませんでした。 ORUKA1951様 ありがとうございました。