人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSS スタイルシートの設定方法を教えてください。

テキストの量や、中に入るコンテンツの大きさに合わせて
伸縮する、ボックスを作りたいのです。

良く2カラムや3カラムのサイドバーで見かける、ボックスです。
(人力検索はてなの右サイドバーのカテゴリー一覧も同じ形式)

上部画像、中部画像、下部画像に分けて、3つの画像を作成するのは
わかるのですが、CSSの設定方法がわかりません。

どのようにCSSを記述すれば、よいか教えていただけると助かります。
よろしくお願いします。

質問がわかりづらいかもしれないので、解説画像をアップします。

1292927103
●拡大する

●質問者: peach555
●カテゴリ:ウェブ制作
✍キーワード:CSS カテゴリー カラム コンテンツ サイドバー
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● あすか
●27ポイント

勝手ながら、回答にあたり質問の画像を流用させていただきました。


下記のようなイメージでいかがでしょうか。

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>
◎質問者からの返答

回答、本当にありがとうございます。

テキストが入る部分は白色。

画像の上部には、見出しテキスト、ボックスの周りは線で囲むようにしたいと思ってます。

再度、教えていただけると、とても助かります。

よろしくお願いします。


2 ● きあ
●27ポイント

こういうことでしょうか。innerというボックスを用意して、背景を白に指定してます。

background-colorをbackground-image:url(img/gazou.jpg)という感じで変えてください。

<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>


3 ● kaz
●26ポイント

まず、画像の青い部分にタイトル文字が入るのであれば、

その部分は h2 などで記述した方が、HTML 構造的にも良いでしょう。


次に、ボックス部分の装飾が、線で囲まれた箱という単純なデザインなら、

その箱に背景色と border を指定するのが最も簡単なのですが、

画像にも対応する方法としては以下のやり方が、応用範囲の広い方法です。

枠用の画像を以下の3つに区切って、それぞれ別に保存します。



<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; /* ボックスを囲むラインを指定 */
}
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ