CSSの質問です。

テーブルレイアウトで表現するとしたら以下のようになるものを、テーブルタグを使わずに実現したいです。
試行錯誤したのですがなかなか上手くいかないのでお知恵を貸して下さい。
<style type=”text/css”>
<!--
.bg{
background: url(/bg.gif) repeat-x center;
}
-->
</style>

<table width=”100%” border=”0” cellpadding=”0” cellspacing=”0”>
<tr>
<td width=”249”><img src=”left.gif” alt=”” width=”249” height=”60” /></td>
<td class=”bg”>?</td>
<td width=”511”><img src=”right.gif” alt=”” width=”511” height=”60” /></td>
</tr>
</table>

イメージとしては、ブラウザウインドウに水平に突っ張り棒をしてるような感じの画像になります。
左右の画像はそれぞれ左右にくっついて固定で、真ん中は背景画像をX軸方向にリピートにして、ブラウザサイズに合わせて可変させたいのです。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/11/02 22:54:04
  • 終了:--

回答(7件)

id:kai_ex No.1

kai_ex回答回数3ベストアンサー獲得回数02004/11/02 23:43:14

ポイント5pt

<html>

<head>

<style type=”text/css”>

<!--

.bg{

background: url(bg.gif);

background-repeat : repeat-x;

background-attachment : fixed;

background-position : 50% 50%;

}

-->

</style>

</head>

<body>

<table width=”100%” border=”0” cellpadding=”0” cellspacing=”0”>

<tr>

<td width=”249”><img src=”left.gif” width=”249” height=”60”></td>

<td class=”bg”>?</td>

<td width=”511”><img src=”right.gif” width=”511” height=”60”></td>

</tr>

</table>

</bldy>

</html>

ですが、ブラウザによって崩れると思います。

ブラウザは上部から読み取っていきますので。もし画面幅を制限して中央部?の<td>のwidthを大きめに取れば、右の画像は端に寄っていきます。ただ、これで希望通りのレイアウトになるのはIEだけかもしれません。

また、ブラウザとtableの間の隙間が気になる場合、

<body topmargin=”0” leftmargin=”0”>

にすると良いかと。

余談ですが、設問の”マークとスペースがすべて全角だったのですが、それが原因って事は・・・ないですよねぇ。

id:wintarsnow

回答ありがとうございます。

でもすみません、「テーブルタグを使わずに実現したい」んです。つまり、それぞれの画像をDivタグなどの背景に設定する方法になると思うのですが、そのタグの組み立て方と、CSSの設定の仕方で悩んでいるのです。

それからダブルクォーテーションが全角なのは、はてなで変換されるからなのです。なので実際は半角です。

?の部分もスペース文字を入れたのですが、?に変換されてしまった様です。実際は半角スペースです。

2004/11/02 23:51:21
id:diabah_blue No.2

diabah_blue回答回数129ベストアンサー獲得回数12004/11/02 23:45:24

ポイント40pt

http://cubic9.com/test/hatena/tsuppari/

はてな 1099403644 CSSで突っ張り棒

美しくはないかもしれませんが、URL1のようなCSSではどうでしょうか。

Windows版のInternet Explorer, Mozzila FireFox, Operaでは期待通りの見え方をしてくれるようです。

(その他の環境ではテストしていません)

URL2は伸び縮みする画像を通常の画像とCSSで実現する例です。

id:wintarsnow

回答ありがとうございます。

わざわざ作って下さったのでしょうか!?

ありがとうございます!!

実は既に似たような方法で試していたのですが、これだとウインドウ幅を小さくした時に右側の画像が左側に飛び出てしまうのです。説明がわかりにくくて恐縮ですが、作って下さったもので言うと、左側の角丸の部分がに左側が重なって見えなくなりますよね。

どこかに透明画像を入れれば良いのかとか考えたのですが、入れる場所が悪いのか効果が無くて。

2番目のURLの様に左側を通常の画像にすれば解決すると思うのですが、CSSを無効にした時に画像が表示されないようにしたいので困っています。

2004/11/03 00:22:26
id:mizunoto No.3

mizunoto回答回数13ベストアンサー獲得回数02004/11/02 23:50:28

ポイント10pt

http://www.cybergarden.net/webcss/technique.html#nontable

Error 404: File not found | CYBER@GARDEN

URLは段組レイアウト解説があります。(下部)

もし、左上に固定してしまうようでしたら・・・縦線をbodyで背景として流してはいかがでしょうか?

body {

background: url(/bg.gif) repeat-x center;

}

#left {

width: 249px;

float: left;

  margin: 0px

padding: 0px

}

#right {

width: 511px;

margin: 0px 0px 0px 250px;

padding: 0px;

}

</head>

<body>

<div id=”left”>

<img src=”left.gif” alt=”” width=249 height=60 />

</div>

<div id=”right”>

<img src=”right.gif” alt=”” width=511 height=60 />

</div>

id:wintarsnow

回答ありがとうございます。

bodyの背景画像は既に使用しているので使えないのです。すみません。

仮に使えた場合でも、この突っ張り棒は左右にくびれがあるので、そこからbodyの背景にした棒の可変部分が見えてしまうので、それも避けたいのです。

--

2番目の回答者様、コメントにミスがありました。

>左側の角丸の部分がに左側が重なって

→左側の角丸の部分に右側が重なって

でした。失礼致しました。

2004/11/03 00:32:17
id:sandaler No.4

sandaler回答回数671ベストアンサー獲得回数02004/11/03 00:14:48

ポイント10pt

<html>

<head>

<style type=”text/css”>

<!--

body {

background-image: url(back.gif);

background-repeat: repeat-x;

}

.hidari {

position:absolute; top:0px; left:0px;

}

.migi {

position:absolute; top:0px; right:0px;

}

-->

</style>

</head>

<body>

<img src=”hidari.gif” class=”hidari”>

<img src=”migi.gif” class=”migi”>

</body>

</html>

うちではこれでOKですが、環境によっては崩れるかもしれません

id:wintarsnow

回答ありがとうございます。

でも前のコメントにもありますようにbodyの背景は使えないのです。申し訳ないです。

2004/11/03 01:04:55
id:Mars No.5

Mars回答回数203ベストアンサー獲得回数202004/11/03 07:46:17

ポイント100pt

条件を満たしているか不安もありますが、とりあえずサンプルを作ってみました。

id:wintarsnow

回答ありがとうございます。

わざわざサンプルをつくっていただきありがとうございます!

そして、完璧です。まさしくこのようにしたかったのです。

positionを駆使しないといけなかったのですね。勉強になりました。

助かりました。ありがとうございました!

2004/11/03 13:17:43
id:diabah_blue No.6

diabah_blue回答回数129ベストアンサー獲得回数12004/11/03 08:48:56

ポイント40pt

> どこかに透明画像を入れれば良いのかとか考えたのですが、入れる場所が悪いのか効果が無くて。

で気付きました!下限は固定するんですね。

一般的に使われている方法かどうかは分からないのですが、一応手直ししておきました。

よろしかったら「過程」もご覧下さい。

id:wintarsnow

追加回答ありがとうございます!

あ、最小幅を設定する方法もあったんですよね。

この方法の方がスマートだし、私はSafariなのでこれで完璧!なのですが、ブラウザ対応を考えると、今は5番目の回答の方法を使いたいと思います。

でも今後の参考にさせていただきます! ありがとうございました!

2004/11/03 13:36:13
id:green-arrow No.7

green-arrow回答回数96ベストアンサー獲得回数12004/11/03 13:01:04

ポイント8pt

<head>

<title>こんなcssでいかがでしょうか?</title>

<style>

body {background: url(/bg.jpg) repeat-x center;}

.left {background-image: url(left.gif);

float: left;width: 20%;}

.main {float: left;width: 30%;}

.right {background-image: url(right.gif) ;

float: left;width: 50%;}

</style>

</head>

<body>

<div class=”left”></div>

<div class=”main”><p>コメント</p></div>

<div class=”right”></div>

</html>

body要素に割り当てる背景画像はそれとして、各div要素にも背景画像は上記cssのような方法で指定できますよ。

それと、左右にそれぞれ割り振りたい画像にも寄るのですが、そもそもpx値で横幅を固定されてしまっていると、お望みの「ブラウザサイズに合わせて可変させたい」という部分が実現されなくなってしまいます。

(横幅が249px+511px=760px以下のブラウザサイズになる場合だって多いですよね)

妥協案に近いと思いますが、%で指定するのはどうでしょうか?

画面の横幅の合計が100%になるように、各要素を配分するとたいていのブラウザで上手くいくようです。

id:wintarsnow

回答ありがとうございます。

イメージの説明が下手だったかもしれません。

質問にもあるように「突っ張り棒」だったのです。どうしてもこの質問だと「段組したいのかな」と受け取られそうなのですが、そうではなくまさに「突っ張り棒」で、ウインドウの幅と連動する棒の画像を置きたかったのです。ただのシンプルな棒なら悩まなかったのですが、両端に装飾のある棒だったので。

横幅左右の画像を足して760pxになってるのは、760px以上の環境を想定しているので、それより小さい環境の場合は右側が隠れてかまわなかったのです。

とにかく、質問にあるテーブルレイアウトと同じようにしたい、というのが目的だったのです。

--

皆様、ありがとうございました!

2004/11/03 13:55:48
  • id:diabah_blue
    勉強になりました!

    レイアウト用のdivに position:relative; 指定しちゃえばいいのかっ!
    とってもスマートで勉強になりました。
  • id:Mars
    Re:私も

    position:relative; でブロックの配置(absolute)が楽に出来る事をどこかの掲示板で見た時には感動でした。(^_^)v

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

トラックバック

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

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

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