• ベストアンサー

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

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

noname#233083
noname#233083
  • CSS
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答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"> <!-- 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; } body>div>*{margin:0 20px;} div.header h1{ ＿margin:0 20%; ＿text-align:center; ＿background-color:yellow; } body>div.section{ ＿position:relative; ＿min-height:300px; ＿background-color:white; } body>div.section>*{margin-left:25%;} #contentTable{ ＿position:absolute;top:0;left:0; ＿margin:0; ＿width:24%;height:100%; ＿background-color:yellow; } --> ＿</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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

noname#233083
質問者

お礼

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

その他の回答 (1)

  • tracer
  • ベストアンサー率41% (255/621)
回答No.2

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

noname#233083
質問者

お礼

ありがとうございます！！

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

関連するQ&A

  • ブラウザサイズ変更時のテキストの自動改行の設定の変更の可否or方法について

    ブラウザサイズ変更時のテキストの自動改行の設定の変更の可否or方法について ブラウザのサイズを変更すると、画面幅に合わせてテキストが自動で改行されますが、この自動改行を細かく設定することは可能なんでしょうか？（できればcssかHTMLで） たとえば、「ブラウザの横幅が401~800pxの間ならばテキストが自動改行され、400px以下になったらテキストが自動改行されなくなるように」などです。 どなたかお願いします。

  • コンテンツの大きさはそのままで、ブラウザに合わせて自動伸縮の背景

    過去の質問を検索したのですが、すっきり解決するものが見つかりませ んでした。 なんと質問したら良いのかも分からないため、伝わりにくかったら申し訳ありません。 http://www.mckinsey.co.jp/ 上記のサイトのように、ブラウザのサイズを変更すると背景（？）も合わせて伸縮するのですが、 コンテンツの大きさは変わらないという方法を教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 画面サイズ変更時のレイアウトの崩れ

    サイトをHTML+CSSで作成しているんですが ブラウザのサイズが最大化のときは平気なのですがサイズを変更する（縮める）とライン画像がはみ出したりリストが縮める側に寄ってしまったりとレイアウトが崩れてしまいます。 これを直す方法はあるでしょうか？ 背景は1024×50の画像をy軸でリピートさせています。 レイアウトのほうは見出し画像の右にリストを横に表示させ、その下にナビゲーションを配置しています。 最大化時、縮小化時ともに縦、横のスクロールがなぜか表示されません。

    • ベストアンサー
    • HTML
  • 背景画像をブラウザサイズに合わせる方法。

    初心者です。 HPの背景画像を、閲覧者のブラウザサイズに合わせて拡大縮小させる方法を教えてください。 いろいろ調べてやってみたのですがうまくいきません…。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • css背景のサイズをiPhoneで変えない方法

    cssで背景画像を指定した際に、画像が大きいと、 iPhoneなどでは勝手に縮小されてしまいます。 この背景のサイズを勝手に変更させない方法はありませんでしょうか。

  • 表の見出しをどのブラウザでも固定する方法は？

    http://shinsama1980.web.fc2.com/hyakuhoh-data1.htm このサイトの表の見出しを固定するＣＳＳを書きました。 同サイトをchromeやedgeで見ると見出しが固定されているのですが、 firefoxで見ると固定されておりません。 ＣＳＳにはブラウザごとで見え方が異なるものなのでしょうか？ また、どのブラウザでも同じように表がスクロールさせる方法はあるのでしょうか？ もし、そのような方法があるのであれば、ご教示願います。 Ｐ．Ｓ 当方はＨＴＭＬ、ＣＳＳについては初心者ですので、 回答される方はＨＴＭＬやＣＳＳをなるべく具体的に書いていただけると幸いです。 何卒宜しくお願い致します。

    • ベストアンサー
    • CSS
  • IE8とIE9でフォントサイズの変更ができない

    はじめてWEBサイトを制作しており、ある程度できあがったので、 いろいろなブラウザで確認していたのですが、 IE8とIE9で表示→文字のサイズ→最大にしても文字サイズが変更されません。 CSSはYahoo! UI Libraryのreset-fonts.cssを使用して、初期設定を１３pxとして、 その他の要素は、％で指定しているのですが、なにか間違っているのでしょか？ IE7やその他のブラウザなら文字サイズは変更できます。 なにか原因と対策がありましたら、教えてください。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • 文字サイズを変更してもくずれないレイアウト

    お世話になります。 CSSで文字サイズを「小・中・大」と変更できるサイトはよく見かけるのですが、文字サイズを変更した際に、レイアウト（背景の画像や枠の幅）は同じなので、1行だったものが2行になってしまったりします。 それを回避したサイトを制作するにはどのようにしたら良いでしょうか？ 現状の策としましては、 ・CSSを3つ用意し、さらにそのCSSに合わせたレイアウトのHTMLをそれぞれ用意しておく。 ※この場合、ページの進退でそのCSSをそのまま引き継ぐ方法が未解決です。 どなたかご教授いただければと思います。 以上、宜しくお願い致します。

  • ブラウザにサイズに合わせてflashサイズを変更

    ブラウザのサイズ、いっぱいいっぱいにflashを表示させようとしています。 FirefoxとChromeでは、embedタグのwidthとheightをJavascriptで得た値を使って、 ブラウザのサイズに合わせて見た目変更できるのですが、 IE8は変化無しです。 IE8にも対応しようと、単純なflashなのでドキュメントサイズそのものを変更しようと 思いましたが、_root._width,_root._heightを引数で渡して設定しても、flashのドキュメントサイズは 変更できませんでした。 IE8でもブラウザのサイズに合わせてflashのサイズを変更する方法はないのでしょうか。 困っています。教えてください。よろしくお願いします。

    • ベストアンサー
    • Flash
  • ブラウザの文字サイズ

    お世話になります。 IEなどのブラウザで文字サイズを変更するとき、変更後のサイズをCSSなどを使って、こちら側で設定することはできるのでしょうか？ 例えば、文字サイズが「中」なら1.5em、「最大」なら2emなどです。 当方、ホームページを運営しているのですが、文字サイズを「最大」などに変更するとレイアウトが崩れて困っています。よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する