ベストアンサー

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

2014/01/01 21:37

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

kiokio5893
お礼率73% (141/192)

CSS
回答数4
ありがとう数8

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/01/02 18:04 回答No.3

とっても簡単で、単純にwidth:min-width:max-width:および、margin:の値がautoです。　御存知のとおり、スタイルシートを利用する最大の目的は、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」の分離です。HTMLには文書構造だけを記述して、プレゼンテーションはスタイルシートに任せることで、『スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』ごく簡単な例: ★タブは＿に置換してあるので戻す。 <!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>

質問者

お礼 2014/01/03 02:35

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

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/01/03 18:20 回答No.4

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>

kaisinjuku04
ベストアンサー率46% (743/1584)

2014/01/02 00:13 回答No.2

左右のボックスをパーセンテージで分けます。この時、左＋右が100%を下回るようにします。余白などがありますので。または、片方の幅を固定します。残りはもう一方で使い、paddingやmarginなどで余白を調整します。細いサイドバーだけ細くなり過ぎないように固定して、残りをメインコンテンツなどにすると比較的簡単です。下記サイトなんかがわかりやすいかと。 http://allabout.co.jp/gm/gc/23836/2/ その他の情報は、「CSS フロート段組」で検索してみて下さい。

質問者