ベストアンサー

ブラウザをサイズ変更してもコンテンツが乱れない方法

2012/10/18 22:46

Webサイトを初めて作っており、現在はヘッダーの部分を作成しております。「h1」を使い、見出しの文章に背景色も入れたのですが、ブラウザを縮小すると改行してしまいます。多くのWebサイトでは、カーソルでブラウザの端をクリックしてサイズを変更しても、文章は改行しませんし、全コンテンツは中心によってくれます。ブラウザを縮小しても文章を改行しない方法と、ブラウザのサイズを変更しても常にコンテンツを中心によせるにはどうしたら良いのでしょうか？ HTMLとCSSを使った方法で教えて下さい！！ ※ちなみに、現段階では、背景のある見出しと、その下に画像（Webサイトの名前）を置いております。

noname#233083

CSS
回答数2
ありがとう数2

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

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

ベストアンサー

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

2012/10/19 10:00 回答No.1

アプローチが間違っていますよ。とてもとても大事なことなので最初が肝心!! 　HTMLは、その文書を読み解き、その文書を構成する要素に分解して、それぞれの要素をタグを使ってマークアップしていくものです。デザインとは一切無関係です。　それをどのように表現するかがスタイルシートの役目です。ブラウザは内部にスタイルシートを持っていますから、最低限の表現はしてくれます。　最初に文書全体を構成要素に分解してマークアップしていきます。 <body> 　<h1>～</h1> 　<p>～</p> 　<p>～</p> 　<h2>～</h2> 　<p>～</p> 　<p>～</p> 　<ol> 　　<li><a href=""></a></li> 　次に、HTMLで用意されているタグだけでは足りませんから、divやidを使って文書構造を補完していきます。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［T7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より <body> 　<div class="header"> 　　<h1>～</h1> 　　<p>～</p> 　　<p>～</p> 　</div> 　<div class="section"> 　　<h2>～</h2> 　　<p>～</p> 　　<p>～</p> 　　<div id="contentTable"> 　　　<ol> 　　　　<li><a href=""></a></li> ここで使用したclass名は、HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )の名称と意味を参考にしています。　その上で、スタイルシートでデザインしていきます。 html,body{margin:0;padding:0;background-color:gray;} h1,h2,h3,p{margin:0;line-height:1.6em;} body>div.header, body>div.section, body>div.footer{ width:70%;min-width:480px;max-width:800px; margin:0 auto; background-color:silver; } div.header h1{ margin:0 20%; text-align:center; background-color:yellow; } とか・・・HTMLを見なくてもすらすらとスタイルシートが書けるようにHTMLをきちんとマークアップしておくこと。　さきで、h1のデザインを変えようが、目次を左に置こうが上に横にしようが、スタイルシートで自由に扱えるようになります。　一度デザインを考えずに文書構造をマークアップしてみましょう。それをあなたが想定する様々なデザインにスタイルシートでデザインできるか挑戦しましょう。デザインできなければHTMLのマークアップが足りないかスタイルシートの理解不足。　下記サンプルは、480px～超幅広のディスプレイに対応した4ブロック(カラム)の文書構造とデザインです。HTMLはシンプルでしょ。 ★Another HTML-lint gateway ( http://cetus.sakura.ne.jp/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェック済みのHTML4.01strict + CSS2.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 class="section" id="section1"> ＿＿＿<h3>見だし</h3> ＿＿</div> ＿＿<div class="section" id="section2"> ＿＿＿<h3>見だし</h3> ＿＿</div> ＿＿<div class="section" id="section3"> ＿＿＿<h3>見だし</h3> ＿＿</div> ＿＿<div id="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#section1">section1</a></li> ＿＿＿＿<li><a href="#section2">section2</a></li> ＿＿＿＿<li><a href="#section3">section3</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>

質問者

お礼 2012/10/22 22:24

ありがとうございます！！サイズを変更しても、乱れなくなりました！！

その他の回答 (1)

tracer
ベストアンサー率41% (255/621)

2012/10/21 02:12 回答No.2

改行に関しては、要素(h1)に幅が指定されていないからでしょう。 html <h1>サイトタイトル</h1> css h1{ width:960px; } センタリング(中央寄せ)に関しては以下のように書くだけです。 css h1{ margin:0 auto; } 総合するとこうなりますね。 css h1{ width:960px; margin:0 auto; } 高さが決まっているのであれば、同時にheightも指定したほうがいいですね。