1カラムのリキッドレイアウトについて。

締切済

質問者：hiro1506
質問日時：2012/02/08 00:46
回答数：3件

１カラムのサイトを作っています。
背景に一枚の写真を表示し、ブラウザのサイズに合わせて可変させたいのですがうまくいきません。

【html】
<body>
<div id="wrapper">→背景画像を表示

<div id="logo"></div>
<div id="travel"></div>
<div id="member"></div>
<div id="bbs"></div> 　→これらはボタン。絶対配置。

</div>
</body>

【css】
#wrapper{
width:100%;
height:100%;(→これらの数値を入れてみたのですがうまくいきません・・・)
background:url(../images/1000.jpg) no-repeat;
position:relative;
}

#logo{
height:120px;
width:360px;
position:absolute;
top:50px;
left:50px;
background:url(../images/logo.gif);
}

#travel{
height:80px;
width:200px;
position:absolute;
top:250px;
left:400px;
background:url(../images/travel.gif);
}

#member{
height:75px;
width:200px;
position:absolute;
top:400px;
left:100px;
background:url(../images/member.gif);
}

#bbs{
height:80px;
width:200px;
position:absolute;
top:300px;
left:700px;
background:url(../images/bbs.gif);
}

ヘッダー、フッターを作らず、#wrapperの中に#logo、#travel、#member、#bbsはボタンになるのですが、これらを絶対配置で配置しています。
文章などのコンテンツがないため、背景画像が全画面で表示されないのです。

どのようにしたら意図する表示が可能でしょうか？
できればFlashは使いたくないのでcssやjavascriptを使用した方法を教えていただきたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2012/02/08 19:43

＞背景に一枚の写真を表示し、ブラウザのサイズに合わせて可変させたい

下記は、完全なリキッドスタイルです。
・背景画像/リンクボタンを含めて最小640pxまで伸縮します。
　i-phoneなどでは、そのサイズで一端描画し、それをディスプレイ巾に縮めます。
・IEは、背景画像の伸縮(background-size:)に未対応なので、背景画像ではなく画像としてマークアップし、それを背景にしています。他のウェブ標準ブラウザFirefox,Opera,googleChromemsafariとも、その必要はありません。<h1>～</h1>を削除すると表示確認できます。
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
　(注) オプションでCSS3を選択
で検証済みのHTML4.01strictです。
　(注) タブは＿に置換してあるので戻すこと
　(注) HTMLはIE対策の部分を除き文書構造だけを記述してあるので、先でどのようにもデザインは変更可能です。

<!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 name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
html,body{
height:100%;margin:0;padding:0;
width:100%;height:100%; /* 画面サイズを基準にするため */
}
body{
/* ここから */
background-image:url(../images/1000.jpg);
background-size:cover;
/* ここまではなくても良い(IEを無視してよいならh1を消しここも消す) */
overflow:hidden;
min-width:640px;
}
h1{width:100%;height:100%;position:absolute;top:0;left:0;padding:0;margin:0;}
div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;}
h1,h2,div.nav ul li{position:absolute;z-index:100;}
/* 表示位置とサイズの指定 */
h2{top:5%;left:5%;width:36%;}
div.nav ul li{width:20%;}
div.nav ul li.travel{top:40%;left:40%;}
div.nav ul li.member{top:66%;left:10%;}
div.nav ul li.bbs{top:50%;left:70%;}
/* 画像を枠いっぱいに表示する。 */
h1 img,h2 img,div.nav ul li img{display:block;width:100%;height:auto;}

div.footer{position:absolute;bottom:0;text-align:right;z-index:1000;width:100%;}
-->
＿</style>
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1><img src="../images/1000.jpg" width="12" height="9" alt="タイトル"></h1>
＿＿<h2><img src="../images/logo.gif" width="360" height="120" alt="タイトル"></h2>
＿</div>
＿<div class="nav">
＿＿<ul>
＿＿＿<li class="travel"><a href="travel.html"><img src="../images/travel.gif" width="200" height="80" alt="トラベル"></a></li>
＿＿＿<li class="member"><a href="members.html"><img src="../images/member.gif" width="200" height="75" alt="メンバー"></a></li>
＿＿＿<li class="bbs"><a href="bbs.html"><img src="../images/bbs.gif" width="200" height="80" alt="掲示板"></a></li>
＿＿</ul>
＿</div>
＿<div class="footer">
＿＿<address>連絡先</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2012/02/08 09:10

まず、HTMLやBODY要素はブロック要素として扱われないのでこれらをブロックとして認識させなければなりません。

　また、背景画像をウィンドウ巾に合わせて伸縮させるためにはCSS3のbackground-sizeプロパティを使う必要があります。
　画像を親の古典ナブロックに合わせて伸縮させるために、置換インライン要素である画像をブロック要素に変更しないとなりません。
　また、リキッドデザインでしたらその中に配置するボタン類も伸縮させないと意味がありません。
　最後に、本題とは関係ありませんが、class名やid名は、『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』のですから、#wrapper、#logo、#travel、#member、#bbsなどでないほうが良いです。具体的にはHTML5で導入される『新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』が、どういう場所にどの名称を使うかを含めて、とても良い参考になるでしょう。
★HTMLは文書構造だけを記述します。これがウェブページを作成する最も重要な基本です。そのために、まず文書構造だけが明確にわかるようHTMLを書きます。

　以上を踏まえて書くと楽ですし、後でどのようにも変更できますよ。
　ちょっと書いてみましょう。
<body>
　<h1>タイトル</h1>
　<div class="nav">
　　<ul>
　　　<li class=travel"><a href="travel.html">トラベル</a></li>
　　　<li class="member"><a href="members.html">メンバー</a></li>
　　　<li class="bbs"><a href="bbs.html">掲示板</a></li>
　　</ul>
　</div>
　<div class="footer">
　　<address>連絡先</address>
　</div>
</body>　　　
　こだと機械--検索エンジンにもどの記事が何かわかるでしょう。なお、「トラベル」などの文字を<img src="../images/travel.gif" width="200" height="80" alt="トラベル">としても良いでしょう。そうすると画像を伸縮させることも出来ます。

　こうすると、スタイルシートはとても簡単なものになるであとで書いておきます。

- 0
- 件

通報する

No.1

回答者： kosukejlampnet
回答日時：2012/02/08 01:00

body {

height:100%; //←追加
}
#wrapper{
width:100%;
height:100%;(→これらの数値を入れてみたのですがうまくいきません・・・)
background:url(../images/1000.jpg) no-repeat;
position:relative;
}