CSS スタイルシートの設定方法を教えてください。
テキストの量や、中に入るコンテンツの大きさに合わせて
伸縮する、ボックスを作りたいのです。
良く2カラムや3カラムのサイドバーで見かける、ボックスです。
（人力検索はてなの右サイドバーのカテゴリー一覧も同じ形式）
上部画像、中部画像、下部画像に分けて、3つの画像を作成するのは
わかるのですが、CSSの設定方法がわかりません。
どのようにCSSを記述すれば、よいか教えていただけると助かります。
よろしくお願いします。
質問がわかりづらいかもしれないので、解説画像をアップします。
No.1
856
97
27pt
勝手ながら、回答にあたり質問の画像を流用させていただきました。
下記のようなイメージでいかがでしょうか。
divタグで囲まれた部分に応じて、上下に伸縮するようにしてあります。
<html> <body> <img src="http://img.f.hatena.ne.jp/images/fotolife/a/asuka645/20101221/20101221201055.gif" alt="top" /><br /> <div style="position:relative; top:0px; width:318px; background-color:#0068B7; color:#FFFFFF;"> あいうえお<br /> かきくけこ<br /> さしすせそ </div> <img src="http://img.f.hatena.ne.jp/images/fotolife/a/asuka645/20101221/20101221201054.gif" alt="bottom" style="margin:0px;" /> </body> </html>
No.2
39630
27pt
こういうことでしょうか。innerというボックスを用意して、背景を白に指定してます。
background-colorをbackground-image:url(img/gazou.jpg)という感じで変えてください。
57
54
<html>
<head>
<title>ホームページの練習</title>
<style type="text/css">
#box1 {
background-color: #FF9;
width:600px;
text-align:center;
}
#box2heder {
width:400px;
background-color:#00F;
color:#FFF;
}
#box3content {
width:400px;
background-color:#00F;
}
#inner {
width:390px;
background-color:#FFF;
border:solid 3px #F00;
}
#box4foot {
width:400px;
background-color:#00F;
background-image:url(img/ue.jpg)
color:#FFF;
}
</style>
</head>
<body>
<div id="box1">
11111
<div id="box2heder">
box2hederbox2hederbox2heder
</div>
<div id="box3content">
<div id="inner">
aaaaaa<br>
bbbbbb
</div>
</div>
<div id="box4foot">
box4footbox4footbox4footbox4foot
</div>
</div>
</body>
</html>
No.3
20042
26pt
まず、画像の青い部分にタイトル文字が入るのであれば、
その部分は h2 などで記述した方が、HTML 構造的にも良いでしょう。
次に、ボックス部分の装飾が、線で囲まれた箱という単純なデザインなら、
その箱に背景色と border を指定するのが最も簡単なのですが、
画像にも対応する方法としては以下のやり方が、応用範囲の広い方法です。
枠用の画像を以下の３つに区切って、それぞれ別に保存します。
<div class="box-xxx"> <h2 class="box-title">ボックスのタイトル</h2> <div class="contents-box"> <div class="contents-box-inner"> ここにコンテンツが入る<br /> コンテンツ量に合わせて<br /> ボックスの立て幅が伸縮します </div> </div> </div>
.box-xxx { width: 300px; /* ボックスの幅を決める */ } .box-xxx .box-title { margin: 0; padding: 5px 15px 8px; /* タイトル部分の文字の位置を調整 */ background: url(box_top.gif) left top no-repeat; color: #ffffff; /* タイトルの文字色を指定 */ } .box-xxx .contents-box { background: url(box_mid.gif) left top repeat-y; } .box-xxx .contents-box-inner { padding: 8px 10px; /* ボックス内部の余白を指定 */ background: url(box_bottom.gif) left bottom no-repeat; }
.box-xxx .box-title の padding で、箱の上部（タイトル部）の調整をしてください。
「contents-box」と「contents-box-inner」を入れ子にして、
内側に来る「contents-box-inner」に下部画像を指定しているのは、
箱を角丸などにした際、デザインに制限されず余白を設定するためです。
<div class="中身">コンテンツ</div> <div class="底"></div>
上記のようにして、コンテンツの下に底パーツを作って底画像を表示させると、
底部分にはコンテンツが入り込めないため、装飾性の高い枠の場合、妙なスペースができてしまいます。
箱に画像を使わず単純な「色背景＆ライン囲み」にする場合、
HTML は共通で CSS が以下のようになります。
box_top.gif は、サンプルの青い部分のみ（青色を少し下に伸ばして余裕を持たせた方が良い）
.box-xxx { width: 300px; /* ボックスの幅を決める */ } .box-xxx .box-title { margin: 0; padding: 5px 15px 8px; /* タイトル部分の文字の位置を調整 */ background: url(box_top.gif) left top no-repeat; color: #ffffff; /* タイトルの文字色を指定 */ } .box-xxx .contents-box-inner { padding: 8px 10px; /* ボックス内部の余白を指定 */ background: #ffffff; /* ボックスの背景色を指定 */ border: solid 1px #999; /* ボックスを囲むラインを指定 */ }
peach555
2010/12/21 19:38:42
きあ
あすか
1
1
2
回答、本当にありがとうございます。
テキストが入る部分は白色。
画像の上部には、見出しテキスト、ボックスの周りは線で囲むようにしたいと思ってます。
再度、教えていただけると、とても助かります。
よろしくお願いします。