ママのスキンケアのお悩みにおすすめアイテム

こんにちは。はじめまして。
ブログを制作していて、疑問があるのでご質問させていただきます。

わたしが手がけているブログは、横幅が最大のものです。
つまり、今私のブラウザ(ウインドウ幅)で見る限り横いっぱいに広がっています。

その状態で、ウインドウのサイズを小さくしてしまいますと
横スクロールバーが現れてしまい、どのウインドウサイズに対応できていません。

ttp://www.designwalker.com/

こちらのサイトのように、ウインドウのサイズがどのサイズでも
横スクロールバーがでないようなレイアウトに自動的に変更するためにはどうすればいいのでしょうか?

わかりにくいご説明ですいません。
ご理解いただけた方、ご存知の方のご回答を心よりお待ちしております。

駄文失礼いたしました。
お手数をおかけいたしますが、よろしくお願いします。

A 回答 (4件)

ブログでしたら大概、CSSでデザインを制御しているのではないかと思うのですが。


参照サイトのHTMLソースとCSSを見てみるとわかりますが、例えば#layoutがwidth: 90%;になっています。このように、要素の幅をpxなどの数値で指定するのではなく、相対値(%)で指定します。

細かいレイアウト崩れなどはページの構造を見てみないことには原因はわかりかねますので、とりあえず「リキッドレイアウト」「リキッドデザイン」で検索して研究してみてはいかがでしょう。
    • good
    • 0

Webページのレイアウトを自在に行うには


HTMLの他にCSS(スタイルシート)と言う手法を使います。
http://css.eweb-design.com/
などにスタイルシートのサンプルがあります。
此れを使うとウィンドウサイズに影響されないページを
作成することが出来ます。
    • good
    • 0

一例ですが


<img src=画像URL width=90%>
横長の画像を常にウインドウ幅90%に合わせるために
width=90%としています。

またこのページでは(右クリック⇒ページのソース表示)
<table cellspacing="0" cellpadding="0" width="100%" border="0">
質問覧に使用されているtableタグではwidth="100%"を用いていますね
もしここで%(パーセント)を用いずwidth="1500"とかにされていたら
当方のパソコンでも横スクロールバーがたぶん出るだろうし

先の<img src=画像URL width=90%>が
<img src=画像URL>だった場合
原本画像の横幅があまり大きな数字でも同じような事が起こります。
    • good
    • 0

参照先を拝見しましたが普通にスクロールバーが表示されますが?


どのようにしたいのか良く分かりませんが
レイアウトを動的に変更したいのであれば
cssで相対的に配置をするようにしてあげれば
サイズを制御することが出来ます。

この回答への補足

説明不足ですいません。

ある程度サイズが小さいと横スクロールバーはでます。

自分のブログはウインドウサイズを小さくすると
レイアウトが崩れてしまいます。

ですが、参照先はウインドウサイズを縮小しても
レイアウトはさほど崩れないように工夫されているようです。

誠に申し訳ございませんが
cssを相対的に配置する とはどういうことなのでしょうか?

愚問で申し訳ございません。

補足日時:2007/06/23 13:58
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qdiv領域をウインドウサイズに合わせる

divタグで生成された3つの領域を横に並べたいのですが、
左2つは幅をピクセル指定で固定し、3つめをウインドウサイズに合わせて残りの幅全てを使う、という指定はどうすればいいでしょうか?
高さもやはりウインドウサイズにあわせるようにしたいです。
また、左2つの領域は固定したまま、3つめの領域のみスクロールができるようしたいです。

現在下記で試していますが、うまくいきません。
お分かりになる方、知恵をお貸しくださいo(_ _*o)


【HTML側】

<div id="left">1</div>
<div id="center">2</div>
<div id="right">3</div>


【CSS側】

html,body{
  height:100%;
  width:100%;
      }
div#left{
  width:150px;
  height:100%;
  float:left;
}
div#center{
  width:160px;
  height:100%;
  float:left;
}
div#right{
  width:100%;
  height:100%;
  float:left;
}

divタグで生成された3つの領域を横に並べたいのですが、
左2つは幅をピクセル指定で固定し、3つめをウインドウサイズに合わせて残りの幅全てを使う、という指定はどうすればいいでしょうか?
高さもやはりウインドウサイズにあわせるようにしたいです。
また、左2つの領域は固定したまま、3つめの領域のみスクロールができるようしたいです。

現在下記で試していますが、うまくいきません。
お分かりになる方、知恵をお貸しくださいo(_ _*o)


【HTML側】

<div id="left">1</div>
<div id="center">2</...続きを読む

Aベストアンサー

できません。
 そうなるとHTMLではなくてPDFなどの他の仕様の範疇です。
 HTMLは、元来さまざまなプラットホームで利用できるように考案されたものです。すなわちさまざまな解像度、ウィンドウ幅、点字端末、読み上げブラウザ・・検索エンジンも・・
 HTMLの基本中の基本です
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より

 それはともかく、HTMLはワープロやDTP ( http://ja.wikipedia.org/wiki/DTP )のようなデザインのためではありません。これを最も間違える部分です。

 ですのでマークアップは(インデントがわかりやすいようにタブを全角スペースで置き換えてあります)
<div class="section">
 <h1>サンプル</h1>
 <div class="body">
  <h2>見出し</h2>
  <p>段落</p>
  <p>段落</p>
 </div>
 <div class="nav">
  <ul>
   <li>あいう</li>
   <li>えおか</li>
  </ul>
 </div>
 <div class="contentTable">
  <h2>目次</h2>
  <ol>
   <li>きくけ</li>
   <li>こさし</li>
  </ol>
 <div>
</div>
</body>


とかになるはずですね。HTMLは文書構造を示すもの。CSSはプレゼンテーションを示すものという明確な区別があります。id=leftなんて、しないこと。先で右に配置したくなったらどうするの・・

 さて、div要素の幅はウィンドウ幅を認識できますが、高さはウィンドウの高さを認識しません。IEの互換モードにすれば、IEのバグ(仕様?)でウィンドウ高さを使えます。そのときdivの親要素がbodyなので、body{height:100%;}が必要。
 ★ただしこの方法は非推奨です。他のブラウザではうまくいきません。

 ディスプレイ幅が小さなブラウザ、あるいは目が悪くてフォントを拡大して見られる訪問者のことも考えれば高さは指定すべきではありません。

 よって幅だけを指定する方法を上記HTMLでしたら
html,body{margin:0;padding:0;}
div.section{width:100%;position:relative;background-color:gray;padding-left:320px;}
div.section div.nav,
div.section div.contentTable{position:absolute;top:0px;height:1000px;}
div.section div.nav{left:0px;width:150px;background-color:green;}
div.section div.contentTable{left:150px;width:160px;background-color:blue;}
でよい。

 floatは、ここで使うべきじゃありません。あくまで文章中の画像の周囲に本文を回りこませるためや(小さなブロックをウィンドウ幅に合わせて並べるとか)に使うものです。もし本文でfkoatの必要がでてきたとき、clearできなくなっちゃう。


 

できません。
 そうなるとHTMLではなくてPDFなどの他の仕様の範疇です。
 HTMLは、元来さまざまなプラットホームで利用できるように考案されたものです。すなわちさまざまな解像度、ウィンドウ幅、点字端末、読み上げブラウザ・・検索エンジンも・・
 HTMLの基本中の基本です
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機...続きを読む

QPCの画面を縮小したらサイズに合わせて改行させたい

こんにちは。

メモ帳を使ってホームページを作成しています。
長い一文など<br>を使って改行しているのですが、パソコンの画面を縮小すると、横スクロールバーが出てきて見にくいものになってしまいます。
他のサイトさんを見ると、画面サイズを縮小すると自動的に見やすく改行され、横スクロールバーも出てこないのですが、(最大化した時と改行していている位置が違います)どういうタグ等を使ったらこのように設定できるでしょうか?

作成については初心者で、本を見ながらやっている状態です。
使用しているブラウザはIE7で、WindowsVistaです。
なにとぞよろしくお願い申し上げます。

Aベストアンサー

divとtableの場合のサンプル
<div>や<table>の横幅をパーセント指定します。
固定値(500px)などにすると改行されたようには出来ません。

<html>
<head>
<title>sample</title>
</head>
<body>
<div style="width: 100%;word-break:break-all;">
<p><!-- 長い文章を書き込む --></p>
</div>
</body>
</html>

<html>
<head>
<title>sample</title>
</head>
<body>
<table style="width: 100%;word-break:break-all;">
<tr>
<td><!-- 長い文章を書き込む --></td>
</tr>
</table>
</body>
</html>

※英文ようにword-breakを追加しています。


人気Q&Aランキング