【復活求む!】惜しくも解散してしまったバンド|J-ROCK編 >>

CSSについての質問ですが、面倒なのでいつも左右のサイズを固定しています、ところが最近ワイド画面のパソコンを見て左右が可変のCSSに変更したい気持ちが湧いて来ました。左右可変(伸びる)様にする場合の気をつけるポイントがあれば教えてください(型崩れが怖いので)

このQ&Aに関連する最新のQ&A

A 回答 (4件)

とっても簡単で、単純にwidth:min-width:max-width:および、margin:の値がautoです。


 御存知のとおり、スタイルシートを利用する最大の目的は、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」の分離です。HTMLには文書構造だけを記述して、プレゼンテーションはスタイルシートに任せることで、『スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

ごく簡単な例:
★タブは_に置換してあるので戻す。
<!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{margin:0;padding:0;}
div.header,div.section,div.section,div.footer{
width:80%;min-width:630px;max-width:900px;
margin:0 auto;
padding:5px;
}
div.section{min-height:400px;}
body{background-color:silver;}
div.header{background-color:lime;}
div.section{background-color:white;}
div.footer{background-color:aqua;}


-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>・・・</p>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
___<dt id="LAST-MODIFIED">Last Modified</dt>
___<dd>2012-08-10 12:00:00 (JST)</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

ご丁寧な回答恐れ入ります、咀嚼させていただきます。

お礼日時:2014/01/03 02:35

No.3です。


>(型崩れが怖いので)
 ならfloatなんて使わないこと。
 floatは、本来は挿絵などの周囲にテキストを回りこませる方法で、段組に使
うといくつか問題が発生します。特に!
1) フォントや、画像サイズが変わると崩れる。
2) 必然的にfloatするデータを先に書かなければならないので、文書構造が制約
される。
 例えば目次を右端に置こうとすると目次を先に書かなければならない。検索エ
ンジン最適化SEO上、これは不利ですね。
 例えばも先のHTMLにナビゲーションと目次を追加したサンプルをあげて置きま
すが、ウィンドウ幅やフォントサイズを変更しても崩れないです。そもそもHTML
本体には文書構造しかいてないので、どのようにもデザインを変更できるし、検
索エンジンにもきちんと内容が伝わる。
 サンプルを表示させてスマホ480px程度から幅を広げてと色々表示させてみて
ください。float使ってないのでデザインは崩れないですよね。
 それでいて、HTMLはシンプルなので記事を追加するのも簡単だし、何を書き加
えてもデザインは崩れない。
★タブは_に置換してあるので戻す。
<!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{margin:0;padding:0;}
div.header,div.section,div.section,div.footer{
width:80%;min-width:470px;max-width:900px;
margin:0 auto;
padding:5px;
}
div.header{position:relative;}
div.header
div.nav{height:40px;line-height:40px;width:100%;overflow:hidden;text-align:center;}
div.header div.nav ol{list-style:none;margin:0;padding:0;}
div.header div.nav ol li{width:20%;display:inline-block;position:relative;}
div.header div.nav ol li
a{display:block;width:100%;height:100%;text-decoration:none;}
div.section h2,div.section p,div.section div.section{margin-left:160px;}
div.section{min-height:400px;position:relative;}
div.section div.section{width:auto;min-width:0;}}
div.section div.section p{margin:0;}
div.section div.section{min-height:300px;}
div.section div.nav{position:absolute;top:0;left:0;height:100%;width:160px;}
/* 分かりやすいように色分け */
body{background-color:silver;}
div.header{background-color:lime;}
div.header div.nav ol li a{background-color:yellow;}
div.header div.nav ol li a:hover{background-color:white;}
div.section{background-color:rgb(220,220,220);}
div.section div.section{background-color:white;}
div.section div.nav{background-color:yellow;}
div.footer{background-color:aqua;}

-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
__<div class="nav" id="siteMap">
___<ol>
____<li><a href="/Top">トップ</a></li>
____<li><a href="/products">製品</a></li>
____<li><a href="/info">情報</a></li>
____<li><a href="/contactUs">問合せ</a></li>
___</ol>
__</div>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>・・・</p>
__<div class="section" id="sub1">
___<h3>項見出し</h3>
___<p></p>
__</div>
__<div class="section" id="sub2">
___<h3>項見出し</h3>
___<p>2項の文章</p>
__</div>
__<div class="section" id="sub3">
___<h3>項見出し</h3>
___<p>3項の文章</p>
__</div>
__<div class="nav" id="contentTable">
___<ol>
____<li><a href="#sub1">1項</a></li>
____<li><a href="#sub2">2項</a></li>
____<li><a href="#sub3">3項</a></li>
___</ol>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
___<dt id="LAST-MODIFIED">Last Modified</dt>
___<dd>2012-08-10 12:00:00 (JST)</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved
mailto:*****</address>
_</div>
</body>
</html>
    • good
    • 0

左右のボックスをパーセンテージで分けます。


この時、左+右が100%を下回るようにします。
余白などがありますので。

または、
片方の幅を固定します。
残りはもう一方で使い、paddingやmarginなどで余白を調整します。
細いサイドバーだけ細くなり過ぎないように固定して、残りをメインコンテンツなどにすると比較的簡単です。

下記サイトなんかがわかりやすいかと。
http://allabout.co.jp/gm/gc/23836/2/

その他の情報は、
「CSS フロート 段組」
で検索してみて下さい。
    • good
    • 0
この回答へのお礼

ご丁寧な回答誠にありがとうございます、非常に参考になります。

お礼日時:2014/01/02 00:21

可変の場合、ブラウザごとに動きが違ってくるので、テストが大変です。



質問者さんだけが利用するようなら問題ないのですが、多数の人に公開するようなものですと注意が必要です。
    • good
    • 0
この回答へのお礼

ご丁寧な回答誠にありがとうございます、非常に参考になります。

お礼日時:2014/01/02 00:22

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング