• 締切済み

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

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

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

みんなの回答

回答No.3

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

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答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"> <!-- html,body{margin:0;padding:0;background-color:gray;} h1,h2,h3,h4{text-align:center;} div.header,div.section,div.footer,div.footer div.nav ol{ ＿width:90%;min-width:640px;max-width:900px;margin:0 auto;background-color:white; ＿/* このwidth/max-widthで自由に伸縮できる */ } div.section{min-height:400px;} div.section div.section{margin:0 180px;width:auto;min-width:0;} body>div>*{margin:0 auto;} div.section{position:relative;padding-bottom:5px;} div.section div.nav,div.section div.aside{ ＿position:absolute;top:5px;height:90%; ＿width:160px; ＿font-size:0.95em; } div.section div.nav{left:5px;} div.section div.aside{right:5px;} div.header{height:60px;margin-bottom:36px;} div.footer div.nav h3{display:none;} div.footer div.nav ol,div.footer ol li{list-style-type:none;margin:0;padding:0;text-align:center;} div.footer div.nav ol{ ＿display:block; ＿position:absolute;top:60px;line-height:28px;font-size:0.5em; } div.footer div.nav ol li{ ＿display:inline-block; ＿width:19%;border:outset 2px white; ＿border-bottom-width:6px; ＿border-bottom-color: rgb(255,180,0); ＿border-bottom-style:solid; ＿font-size:2em; ＿background:linear-gradient(rgb(200,200,200),white); } div.footer div.nav ol li+li{border-bottom-color: rgb(255,220,0)} div.footer div.nav ol li+li+li{border-bottom-color: rgb(160,255,0)} div.footer div.nav ol li+li+li+li{border-bottom-color: rgb(0,160,255)} div.footer div.nav ol li+li+li+li+li{border-bottom-color: rgb(160,0,255)} div.section div.nav{border:solid gray 3px;border-radius:8px;background-color:silver;} div.section div.nav h3{ ＿margin:0;line-height:1.6em;background-color:gray; ＿border-radius:4px 4px 0 0; } div.nav ol,div.nav ol li{display:block;} div.aside ol,div.aside ol li{display:block;list-style-type:none;margin:0;padding:0;} div.aside h3{text-align:left;} div.aside h3:before{content:"■";} --> ＿</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)
回答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は文書構造だけを記述すればよくなりますから、作成するのがとても楽になります。そしてデザインも楽になります。 　こんな簡単な記述で、スマホのような狭いディスプレイにも幅の広いディスプレイにも対応できます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • cssはpタグの中にかけるのか。

    http://www.htmq.com/css/overflow.shtml 上記サイトを見ていると、overflowプロパティをHTMLのｐタグの中に書き込んでいますが、こういう書き方って実際に可能なのでしょうか。

    • 締切済み
    • CSS
  • cssで列の幅を調整するには？

    たとえば、 <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> このようなcssとコードがある場合、 3列目のｃと３の列の幅を10％にしたい場合、 どのようなコードを書けばいいですか？ td { width: 10%; } こうすると、すべての列が１０％になってしまいます。 指定した列のみのcssで幅を調整する方法を教えてください。 できれば直接テーブルのタグをいじるのではなく、スタイルシートの宣言部分で対応したいです。

    • ベストアンサー
    • HTML
  • cssについて

    以下のサイトのCSSをベースにCSSについて勉強しているのですが、以下の点を実現する方法を教えてください。 ■cssベース 　ttp://www.s-hoshino.com/web2/responsive_006/index.html ■参考にさせて頂いているサイト 　ttp://www.htmq.com/csskihon/index.shtml ■実現したいこと。 1.ディスプレイがスマホサイズ表示（760未満）での上メニュー（メニュー一覧　表示する▼）を、 　PCサイズ（950以上）のときのサイドメニュー（Site Menu）と同列に入れたい。 試したこと：g_navi、menu、gl_menuの名称を変えたコピーを 　@media screen and (min-width: 950px){配下に追記したが、フォームが崩れメニューの開閉が作動しなかった。 2.ディスプレイPCサイズ時の「コンセプト」を「採用情報」の下に入れたい。 試したこと：htmlのコンセプトを採用情報下にコピーしたが、h3部分が大きくなり失敗。

    • ベストアンサー
    • HTML
  • ｃｓｓについて質問です。

    ホームページ作成の勉強をしている者です。 分からないことがあるので質問させてもらいます。 http://www.htmq.com/csskihon/401.shtmlこのサイトのｃｓｓのソースに float:left; /*リスト項目を横に並べる*/ display:inline; 　　　/*リスト項目をインライン表示にする*/ こう書かれていました。 display:inline;ですでにリストが横になるので、float：ｌｅｆｔ；で横に並べる必要があるのですか？ 調べてもいまいち納得いく答えが見つからないので分かる人教えてください。

    • 締切済み
    • CSS
  • ナビゲーションボタンの幅を、ページの幅に合わせたいと考えています。

    ナビゲーションボタンの幅を、ページの幅に合わせたいと考えています。 例えば、ページの幅を800pxとってあり、8個のナビゲーションボタンを設置する場合は、1つ辺り100px。10個の場合ですと、80pxと、均一の幅で、かつページの幅一杯まで占めるような表示をしたいと考えています。 http://solidstate.jp/Navigation/DropdownMenu/script_50.html そこで、上記サイトよりサンプルとして配布されているソースを試しているのですが、widthなりpaddingなりでcss側で調整している状況となっています。 そこで質問なのですが、上記のよなサンプルソースの場合、widthは指定しなくても、ボタンの数に合わせて汎用的にページ幅に沿うようなものは出来ないのでしょうか？ サンプルソースのように、多階層が可能なドロップダウンを備えたナビゲーションが欲しく、やっと探し得たのですが、CSSの知識が乏しく困っている状態です。 お忙しいなか恐縮ですが、アドバイスなど頂戴出来れば幸いです。宜しくお願い申し上げます。

    • ベストアンサー
    • HTML
  • CSSのh1,h2,h3の色付けをしたい

    申し訳ありません。もう一度質問させてください。CSSのh1,h2,h3の色付けをしたい。文章の途中で色付けもしたいのですが。 現在４０００文字を超えるのでURLで質問します。public_htmlフォルダにつぎのURLのCSSを保存してサイト作成をしています。h1,h2,h3の色付けをしたいのと、文章の途中でも色付けをしたいのですができますか？ http://www.htmq.com/csskihon/401.shtml　 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • 忍者ホームページにcssが反映されない

    「忍者ホームページ」でサイトを作ろうとしています。 初心者なので下記サイトをみてほぼそのままやってみました⬇️ http://www.htmq.com/csskihon/401.shtml FTPはサーバーダックを使用しています。 htmlは反映されたのですが、cssをアップロードしても反映されません。 フォルダも分けてます。 因に、試しにDreamWeaverにこのhtmlとcssをコピペして入れてみたらプレビューのところには このサイトと同じように反映されてました。 ということは、サーバーダックにアップロードする時に問題があるのでしょうか？ 何か考えられる点があればご回答よろしくお願い致します。

    • 締切済み
    • CSS
  • CSSでのデザイン崩れ改善方法

    表示ファイル http://www.loplopland.com/newfile.html CSSファイル http://www.loplopland.com/sample_l_180_490.css この外部CSSで直したいところは １．フッターの上の部分に余白ができてしまったので消したい。 ２．メイン表示部分が下までバックグラウンドイメージを表示したい。 以上の２点を改善したいんですが、うまくいきません。 どのように直したらいいかご教授下さい。 おねがいします。

    • ベストアンサー
    • HTML
  • CSSに詳しい方、修正方法のアドバイスをお願い致します。

    CSSに詳しい方、修正方法のアドバイスをお願い致します。 ホームページを作成しているのですが どうしても表示の崩れを直す事が出来ずに 困っております。 具体的にはメニューの部分が 自動でコンテンツの幅調整がされずに フッダー部分に重なってしまい CSSについて色々調べながら修正をしてみたのですが 重なってしまうのがどうしても直らずに 困っています。 もしCSSに詳しい方がいらっしゃいましたら アドバイスをお願いできないでしょうか。 ファイル一式をダウンロード出来るようにしましたので もし宜しければご確認とアドバイスをお願い致します。 ダウンロードはこちらからお願い致します。 http://www.sokudoku-hyouban.com/sample.zip

  • ウインドウ幅に合わせて幅の変わるボタン

    ホームページ作成のcssについて質問です。 このページのような、 http://xn--up-gd4a8cufa0d4zb5h.com/ ウインドウ幅に合わせて幅の変わるボタンは、どうやって作ったらいいですか？ まだ勉強しはじめたばかりで、よくわかりません。 cssでボタンを作るのは、自分でも調べてみて、こんな感じだとわかりました。 .sample { width:200px; font-size:24px; font-weight:bold; text-decoration:none; display:block; text-align:center; padding:8px 0 10px; color:#333; border:1px solid #333; } でも、これだと画面の幅を変えても、ボタンの幅が変わりません。 cssに詳しい方、教えていただけると助かります。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する