CSSについての質問ですが、左右のサイズ

解決済

質問者：kiokio5893
質問日時：2014/01/01 21:37
回答数：4件

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

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2014/01/02 18:04

とっても簡単で、単純に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">

＿</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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

No.4

回答者： ORUKA1951
回答日時：2014/01/03 18:20

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">

＿</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>© ORUKA1951 2012 - 2016 All Rights Reserved
mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： kaisinjuku04
回答日時：2014/01/02 00:13

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

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

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

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

その他の情報は、
「CSS フロート段組」
で検索してみて下さい。