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


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

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

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

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

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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/12/21 19:25:06
  • 終了:2010/12/28 19:30:03

回答(3件)

id:asuka645 No.1

あすか回答回数856ベストアンサー獲得回数972010/12/21 21:20:00

ポイント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>
id:peach555

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

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

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

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

よろしくお願いします。

2010/12/21 21:31:33
id:kia_44 No.2

きあ回答回数396ベストアンサー獲得回数302010/12/21 23:05:32

ポイント27pt

こういうことでしょうか。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>

id:kaz No.3

kaz回答回数200ベストアンサー獲得回数422010/12/22 10:17:58

ポイント26pt

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

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


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

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

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

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


  • タイトル部分(サンプルなら青い部分)と、その下が少し入るくらい:box_top.gif
  • 箱の中央部分を、リピートしても違和感のないサイズに:box_mid.gif
  • 箱の下部分:box_bottom.gif

<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;    /* ボックスを囲むラインを指定 */
}
  • id:peach555
    質問内に書き忘れてしまったのですが、
    添付した画像の、上部青い部分には、
    見出しテキストを入れたいと考えてます。
    どうぞよろしくお願いします。
  • id:kia_44

    ごめんなさい。たぶん上のじゃセンタリングできていないためにボックスになっていないのでこちらで。
    box2heder,box3content,box4footで3分割し、それぞれに背景を与えます。このソースでは
    色として与えていますが、イメージに差し替えていただければ大丈夫です。
    イメージサイズに合わせてbox2に幅を設定してください。
    innerで中身を記載するところを作り、背景を与え、左右にmarginを設定しています。

    <html>
    <head>
    <title>ホームページ</title>
    <style type="text/css">
    #box1 {
    background-color: #FF9;
    text-align:center;
    width:100%;
    }
    #box2 {
    text-align:left;
    margin:0px auto;
    width:400px;
    }
    #box2heder {
    width:400px;
    background-color:#00F;
    color:#FFF;
    }
    #box3content {
    width:400px;
    background-color:#00F;
    }
    #inner {
    margin:0 10px;
    background-color:#FFF;
    border:solid 3px #F00;
    }
    #box4foot {
    width:400px;
    background-color:#00F;
    color:#FFF;
    }
    </style>
    </head>
    <body>
    <div id="box1">
    11111
    <div id="box2">
    <div id="box2heder">
    box2hederbox2hederbox2heder
    </div>
    <div id="box3content">
    <div id="inner">
    aaaaaa<br>
    bbbbbb
    </div>
    </div>
    <div id="box4foot">
    box4footbox4footbox4footbox4foot
    </div>
    </div>
    </div>
    </body>
    </html>
  • id:asuka645
    >画像の上部には、見出しテキスト、ボックスの周りは線で囲むようにしたいと思ってます。

    「画像の上部」とは、具体的にどこを指すのでしょうか?

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません