締切済み

cssの幅の調整方法について

2012/11/23 11:39

サンプルとして下のサイトを参考にしてるのですがサンプルの場合、左右の全面のグレーの幅が広いため、もう少し狭くしたいのですがどうしても左右に振り分けて幅を大きくする方法がわかりません？イメージとしては全面のグレーの幅を両サイド共に２センチほどにしたいのです。また、全面のグレーの幅を調整することで、それぞれの幅の微調整が必要な場合についても、よろしくお願いします。 http://www.htmq.com/csskihon/401.shtml cssに詳しい方、ご教授願います。

youtoyuku
お礼率9% (14/148)

CSS
回答数3
ありがとう数0

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

みんなの回答

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/11/24 01:31 回答No.3

>イメージとしては全面のグレーの幅を両サイド共に２センチほどにしたいのです。両サイドを2センチくらいにしたいのであれば、 margin-left: 2センチくらい; margin-right: 2センチくらい; を指定すれば良いです。ただし、参考サイトのページは「両サイドを何センチ（何ピクセル）で指定」しているのではなく、「コンテンツの幅を何ピクセルで指定して、残り（両サイド）は全部グレーで表示」という指定の仕方です。ウインドウ幅を広げたり狭めたりしてみてください。コンテンツの幅が固定のままで、両幅（グレーの部分）が広がったり狭まったりしますので、指定の仕方が違う事（グレーの部分が何ピクセル/何センチで固定されていない）を確認できると思います。 >また、全面のグレーの幅を調整することで、それぞれの幅の微調整が必要な場合についても、よろしくお願いします。すみません、意味が分かりません。数値を変えれば調整できます。

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

2012/11/23 18:23 回答No.2

タイプミスがいくつかあるので・・・ポイントは、floatを使わないこと。・親コンテナブロックをrelativeにして、その子供をabsoluteで配置すること・親コンテナブロックの幅を指定しmargin:0 autoれで置くこと。 <!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> ＿<div class="header"> ＿＿<h1>ここは見出し</h1> ＿</div> ＿<div class="section"> ＿＿<div class="section"> ＿＿＿<h2>ニュース</h2> ＿＿＿<p>・・・・</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h3>目的で探す</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="xxx.html">CSSの適用</a></li> ＿＿＿＿<li><a href="xxx.html">セレクタ</a></li> ＿＿＿＿<li><a href="xxx.html">フォント</a></li> ＿＿＿＿<li><a href="xxx.html">テキスト</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside" id="picUp"> ＿＿＿<h3>ピックアップ</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="xxx.html">CSSのメリット</a></li> ＿＿＿＿<li><a href="xxx.html">Web標準とは</a></li> ＿＿＿＿<li><a href="xxx.html">CSSのバージョン</a></li> ＿＿＿＿<li><a href="xxx.html">HTML/XHTMLの基礎</a></li> ＿＿＿＿<li><a href="xxx.html">CSSの書き方</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<div class="nav"> ＿＿＿<h3>サイトマップ</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="a.html">Home</a></li> ＿＿＿＿<li><a href="b.html">Overview</a></li> ＿＿＿＿<li><a href="c.html">Property</a></li> ＿＿＿＿<li><a href="d.html">Tips</a></li> ＿＿＿＿<li><a href="e.html">Contact</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> </body> </html>

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

2012/11/23 15:09 回答No.1

　そのサイトは、とても情報が豊富で私もしばしば利用させていただいていますが、さすがに、そのページは、すこし古いかもしれません。微妙に説明がstrictでないところもあります。・divやspanにつけるidやclass名は、文書構造を補完するものです。『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』　その文書構造に基づいてデザインしますが、あくまで、デザインのためにつけるものではありません。　これはHTML4.01では不完全でしたので、その反省からHTML5では文書構造をマークアップするために多くの要素が追加されました。--class名はHTML5の新しい要素とその使い道を参考にするのが良いでしょう。・floatを使うと、そのような位置調整は難しくなりますし、文書構造をデザインにあわせる必要があり、感心しません。　基本的なHTMLの書き方は、 <body> 　<div class="header"> 　　<h1>・・</h1> 　</div> 　<div class="section"> 　　<div class="section"> 　　　<h2>ニュース</h2> 　　　<p>・・・・</p> 　　</div> 　　<div class="nav"> 　　　<h3>目的で探す</h3> 　　　<ol></ol> 　　</div> 　　<div class="aside" id="picUp"> 　　　<h3>ピックアップ</h3> 　　　<ol></ol> 　　</div> 　</div> 　<div class="footer"> 　</div> </body> のようになるでしょう。nav,aside,header,footerなどは、HTML5では要素です。 <body> 　<header> 　　<h1>・・</h1> 　</header> 　<section> 　　<section> 　　　<h2>ニュース</h2> 　　　<p>・・・・</p> 　　</section> 　　<nav> とかになると言うことです。・・・これだと文書構造がしっかりわかりますね。　これをスタイルシートで設定していくのですから htm,body{margin:0;padding:0;backgrond-color:gray;} div.header,div.section,div.footer{width:70%;min-width:640px;max-width:800px;margin:0 auto;background-color:white;min-height:400px;} div.section div.section{margin:0 170px;width:auto;} /* これだけで、「背景と記事の希望」は完了するはずです。*/ div.section{position:relative;} div.section div.nav,div.section div.aside{width:160px;position:absolute;top:5px;height:100%;} div.section div.nav{left:5px;} div.section div.aside{right:5px;} /* そしてnavとasideをすえつければおしまい */ 　HTMLに文書構造しか書きませんからスタイルシートでのデザインの自由度は高くなります。スタイルシートを使うということは、HTMLは文書構造だけを記述すればよくなりますから、作成するのがとても楽になります。そしてデザインも楽になります。　こんな簡単な記述で、スマホのような狭いディスプレイにも幅の広いディスプレイにも対応できます。