ブラウザレイアウトに応じて消える余白の作り方
-
0 名前： 白兵 ： 2005/07/06 22:33
- ユーザーが『お気に入り』を表示した状態で見た場合は一番左の余白が消えて、
『お気に入り』無表示のユーザーが見た場合は、本文が中央程度に表示される様にしたいのですが、
どうしたらいかわかりません。
感じとしては
■『お気に入り』無し
余白 本文 余白
■『お気に入り』有り
『お気に入り』 本文 余白
という感じになる様にするには、何を使う必要があるのでしょうか。
<BODY STYLE="margin: 10%;">
使ったりしたのですが、ヤフーのトップページの様に
余白が率先して消えてなくならないもので。
宜しく宜しくお願いします。
-
1 名前： カヅサツ ： 2005/07/06 22:33 ［URL］
- yahoo のトップページについていえば、内容を横幅 675ピクセルのブロックに放り込んで、そのブロックを中央に持って来ているだけです。
> ■『お気に入り』有り
> 『お気に入り』 本文 余白
という状況にはなっていないように見えます。
-
2 名前： 白兵 ： 2005/07/06 22:33
- そうですか。
私の方では、ＩＥで『お気に入り』を表示してその幅を大きくしていくと
ヤフーのトップページの左右の余白が率先して縮まって消えていくのですが。
正確に言えば、
『お気に入り』 本文
という状態になります。
-
3 名前： カヅサツ ： 2005/07/06 22:33 ［URL］
- ええと、まぁ、なんにせよ、yahooのトップページみたいにしたいのですよね？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
div#main{
background-color: #FFC; /* 分かりやすさのために背景色 */
width: 675px; /* 横幅 */
margin: 0px auto; /* ブロックを中央に */
}
</style>
</head>
<body>
<div id="main">
<h1>見出し</h1>
<p>段落</p>
</div>
</body>
</html>
ただ、ウィンドウサイズが 675以下の読み手は横スクロールバーが出てみずらいですし、1000ピクセル以上の読み手は幅が余ってせっかくの広いデスクトップが生かせないので、個人的にはあまりオススメしません。
