divを使ってデザインしているのですが、
全体のデザインの入る#wrapの中に
floatを左に設定した#leftと、
floatを右に設定した#rightがあります。


#leftにはメニューバーを、#rightにはコンテンツを入れるのですが、
コンテンツの量はページによって全然違うので、
#leftの長さを設定できません…。
#leftには背景色がついているので、途中でとぎれない様にしたいです。
短く設定すると、下が切れますし、
長く設定すると、情報量が無いページでは、ただ縦に長いだけの空白になってしまいます。
min-heightというのがあるらしいのですが、なぜか反映されなくて…

#rightの長さに合わせて、#leftを自動で伸び縮みさせたいのですが…
可能でしょうか?


質問の仕方が下手だったらゴメンなさい!
誰か助けてください…。よろしくお願いします

このQ&Aに関連する最新のQ&A

A 回答 (2件)

いまいちイメージが沸かなくて


再現できないんだけど
#leftと#rightをheight:100%じゃダメかしら。
そうすれば両方とも高さが#wrapの高さになるわ。

ひとつの参考意見として。
    • good
    • 0
この回答へのお礼

すごく早いアドバイスありがとうございます!
それが、#wrapも横幅のみ設定していて
縦はアクティブに変わるようになってるんです…

#wrapの中にヘッダーを入れて、
左に#leftのメニューバーを入れて
右に#フラッシュと、#right(その中も縦に2分割…)
ごちゃごちゃすぎて100%にしても上手くいきませんでした…。

#wrapの縦の最短の長さが設定できたなら、
#leftのみ100%にしたらなんとかなりそうなんですが…

#wrapの長さを設定した時はこれ凄く最適ですね!
とてもためになりました、本当にありがとうございます!

お礼日時:2009/05/22 18:18

> min-heightというのがあるらしいのですが、なぜか反映されなくて…



IE6とかでご覧になってますか?
IEだと7より前のヴァージョンではmin-heightプロパティが実装されていません。Firefox等他のモダン・ブラウザでは正しく効きます。
ちなみに、IE6だとheightプロパティを指定しているとmin-heightプロパティと同様の動作(ボックスの実際の内容量がその高さを超えてもはみ出さず勝手に伸びてくれる。heightプロパティとして本来は正しくない挙動です。)をします。

お悩みの症状は、頻繁に出てくる質問のひとつですね。

> #rightの長さに合わせて、#leftを自動で伸び縮みさせたいのですが…

#rightと#leftには親子関係が生じてないので、一方の長さに合わせて自動的にもう一方を合わせるという考え方ができないのですが、#wrapという共通の親を持つので、#wrapに対しての#rightと#leftの高さの描画領域を常に同じにする、という事であれば可能です。

方法は色々ありますが、下記などは良く使われる手法の一つです。

http://coliss.com/wp-content/uploads/css-columns …
http://coliss.com/articles/build-websites/operat …

あとは、実際の#rightと#leftのボックスの高さは異なったままで、両者の背景画像合わせて一つにして#wrapの背景画像として描画する事で、「見た目だけ揃える」という方法もあります。つまり、#wrapが幅720px、#leftが幅200pxで背景色が青、#leftが幅520pxで背景色が白、であれば左から200pxが青で残りの520pxが白という横幅が720px(縦は適当)の画像を作成し、それを#wrapにbackgroundプロパティで縦方向にのみリピートさせ、#leftと#rightには背景を指定しない、という事です。
    • good
    • 0
この回答へのお礼

ありがとうございました!!

お礼日時:2009/06/12 03:51

このQ&Aに関連する人気のQ&A

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

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

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

QPC連動タップを液晶テレビ周りの連動ON/OFF用途に使いたいのですが

PC連動タップを液晶テレビ周りの連動ON/OFF用途に使いたいのですが
テレビ周りのオーディオ・プレイヤーの自動電源ON/OFFにPC連動タップを使用して
自動ON/OFFと考えているんのですが、本来のPC用途とはかけ離れてますが
使用上問題はないでしょうか?

Aベストアンサー

問題はありません、構造上では普通のモノよりは性能が高いはずですから、
蛸足をしない限りは問題はありません。
自分もPCショップや量販店など、製造メーカーに問い合わせをした所では、
「問題は無い」との回答されました。

Q段組でfloat:leftとfloat:rightの違い

こんにちは!

今スタイルシートで段組をやっているんですが
2カラムの右側がfloat:leftとfloat:rightでは微妙に表示が変わります
段組の間のスペースが広くなったり狭くなったりです
firefoxで表示するのに左をfloat:left、右をfloat:rightにすると
右側の段組が実現されず下に落ちてしまいます。

通常2カラムの場合の段組はどのように指定するのが正しいのでしょうか?
過去の質問や、googleで検索しましたがどちらも場合も正しいとか誤ってるという意見が半々で
どうにも判断がつかず悩んでいます。

3カラムでもfloat:left float:left float:left とやっているのもあるので
こちらが正しいのかな?とも思いましたが
やはりそれは違って float:left float:right float:leftが正しいという方もいらっしゃいます

通常段組を組む際はどちらが規格に沿っているのか教えていただけないでしょうか?
よろしくお願いします。

Aベストアンサー

HTMLとしてはどっちを先に書くかって議論(重要なコンテンツはより先に、補助的な情報などは後にまわすべき…とか)は成り立っても、スタイルシートでfloat:leftとfloat:rightでどちらが正しいとか規格に沿っているとかって事はないと思います。
(HTMLの書き方が決まればfloat:left/rightが自然と決まってくる事はあるかもしれませんが)

float:left/rightで結果が違ってくる事は充分ありえます。marginやpaddingの設定、ブラウザの解釈の微妙な差異などの理由があります。

あまり意味はありませんが何の条件付けもなく、ただ2段組と聞けば2段ともfloat:leftでいいと思います。

Qタップに詳しい方 おおしえください。

自動機で下穴をあけた後タップをとうしました。バリが出たため ハンドドリルでタップをとうしたのですが、ネジ山が二重になったり、ハ゛リもでてしまいました、油を付けながら 逆回転させながら 慎重に入れ 軽く入ったつもりですが、だめです。どうしてですか、おしえてください。再、再、回答できる方おねがいします。

Aベストアンサー

acha51補足です

質問を読み返してみるとタップも自動機で切った後の事でしょうか。
出るバリは表面だったら先の回答のバリ取り
ねじ山のバリだったら、
・自動機のタップへたりの場合はタップを交換し新規にやり直しましょう
・制御プログラムの場合は回転数と送りの関係を見直しましょう。
・わずかな場合はsusなどの固い材料のボルトを2-3回通す
・多いバリだったら先の1-3番をタップハンドルで順に通す
  職人技ですのでトレーニングしてやります

いずれにしても材料と深さ、径くらいははっきり書いた方が良いでしょう

QCSS min-height の使いどころ

ウェブデザイナーの方、あるいはコーダーの方に質問です。

私はウェブサイト制作に関わる仕事をしたくて勉強しているものの、まだ仕事として
食べていけるレベルではない・・・くらいの者です。

私はよく好印象を抱いたサイトのHTMLソースやCSSを見ているのですが、
min-height というプロパティーが使われているのを度々目にします。

しかし、自分が勉強している範囲では今のところ height じゃなくて min-height を設定する
必要性を感じるケースに出くわした事がありません。また、プロが作ったであろうサイトの
CSSを見ても、どうしてそこが height ではなくて min-height なのか、(自分の未熟さもあって)
そこまで読みきれない事が多いのです。

フロートの解除とか、そうしたテクニカルな使い方はあるようですが、本来の「要素の高さの
最小値を設定する」という用途で使う場合、プロの方はどういった所で使うのでしょうか?

  (例えばショッピングサイトの商品紹介ページで各商品の写真と説明文を流し込む
   ボックスに使っている・・・みたいに、こういう案件でこういうふうに使っているという事が
   分かるとありがたいです。)

画像の大きさを揃えるにしても、自分だったらフォトショで画像の方をいじってしまう所ですし、
ボックスの高さが揃っているように見せたいというケースも自分は今まで背景画像を工夫して
揃っているように見せる方法を採っていたため、みんな、そんなに min-height を使っている
モノなのか?・・・と気になっています。

私くらいのレベルではほとんど使わないけどチームを組んで進めるような大きな案件を扱う
ような環境では min-height はよく使われているのかも・・・などと勝手に想像しては、こんな
レベルで自分は食べていけるようになるのかな・・・と不安に慄いている次第、どなたか
お手隙の際にお答えいただけるとありがたいです。

宜しくお願いします。

ウェブデザイナーの方、あるいはコーダーの方に質問です。

私はウェブサイト制作に関わる仕事をしたくて勉強しているものの、まだ仕事として
食べていけるレベルではない・・・くらいの者です。

私はよく好印象を抱いたサイトのHTMLソースやCSSを見ているのですが、
min-height というプロパティーが使われているのを度々目にします。

しかし、自分が勉強している範囲では今のところ height じゃなくて min-height を設定する
必要性を感じるケースに出くわした事がありません。また、プロが作ったであろうサイ...続きを読む

Aベストアンサー

min-heightは、とてもよく使うプロパティです。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 たとえば、section内のnav(目次)を本文の左に表示したり、脚注に当たるものを右に置くときとか・・
[HTML5]
・・・・・・
<section>
 <h2>本文</h2>
 <section>
  <h3>見出し</h3>
  <p>記事</p>
 </section>
 <section>
  <h3>見出し</h3>
  <figure>
  <p><img></p>
  </figure>
  <p>記事</p>
 </section>
 <section>
  <h3>見出し</h3>
  <p>記事</p>
 </section>
 <nav>
  <ol>
   <li></li>
   <li></li>
   <li></li>
  </ol>
 </nav>
 <aside>
  付属記事
 </aside>
</section>
[HTML4}上記のそれぞれを<div class="section">のように書き換える
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

・・・・この場合、本文記事の長さが大きく変動するけれど、左右に目次や補足記事をおきたいとき
div.section{width:100%;position:relative;min-height:300px;}/*★*/
div.section h2,div.section div.section{margin:0 20%}
div.section nav,div.section aside{position:absolute;top:0;width:18%;height:100%;clear:right;}
div.section nav{left:0;}
div.section aside{rirght:0;}
figure img{display:block;width:320px;height:auto;float:right;margin:5px;}
ですよね。

★floatは、見出しで解除するとか、次のsectionで解除するので事足ります。段組に使うことはありませんので
 ・floatを段組に使用すると文書の構成自体を変えなきゃない
 ・記事中で本来のfloatが使えない
★画像の大きさをそろえるときは、display:blockにして、widthないしheightをautoにすればよい。
 デザインのために画像を伸縮しない
 必要ならimg[width="480"]{margin:0 40px;}とかで調整できる

[参考]
CSSについて教えてください - ホームページ作成ソフト - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7539718.html )

 特に多くの人と作業するときなど、最初にHTMLをきちんと書いておかなきゃダメです。上記サンプルだとスタイルシートを記述する人はHTMLを一切開かなくても、デザインできるはずです。なぜなら、文書構造がきちんとマークアップされているからです。HTMLに変なclass名もidもない。
 プロパティの一つ一つの使い方や意味はボチボチ身につけていくことができますが、それ以前にHTMLが出来てなきゃ何にもなりません。

min-heightは、とてもよく使うプロパティです。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 たとえば、section内のnav(目次)を本文の左に表示したり、脚注に当たるものを右に置くときとか・・
[HTML5]
・・・・・・
<section>
 <h2>本文</h2>
 <section>
  <h3>見出し</h3>
  <p>記事</p>
 </section>
 <section>
  <h3>見出し</h3>
  <figure>
  <p><img></p>
  </figure>
  <p>記事</p>
 </section>
 <section>
  <h3>見出し</h3>
  <p>記事</p>
 </section>
 <nav>
  <ol>
 ...続きを読む

QPC連動タップについて

こんにちは

私はADSLモデム、ルーター及びプリンタの3種類の周辺機器をパソコンのON/OFFと連動してON/OFFしたいと考えています。(通常はパソコン及びこれら周辺機器の電源はOFFにしておき、パソコンを立ち上げると自動的に周辺機器の電源もONになり使える状態になる様にしたい)

ここで各メーカーから発売されているPC運動タップについて質問なのですが、このタップにこれら周辺機器をつなげば上述の私のやりたい事が実現するのでしょうか?(特に私が知りたいことは、PC運動タップは、単にタップを通電させるだけでなく、それにつながったパソコン周辺機器自体の電子スイッチをONにして周辺機器を使える状態にさせることが可能かどうかという点です。(機械式(手動式)スイッチ付タップとは違うか?という点です)

実際にPC運動タップを使用し周辺機器のPC運動起動を実現されている方がいらっしゃったらぜひ教えて下さい。

よろしくお願いします。

Aベストアンサー

PC連動タップは、「PC専用コンセント」に接続されたPCの電源が入って電流が流れると、他の「連動コンセント」がONになる仕組みです。
http://www.sanwa.co.jp/product/oatap/rendo.html

連動させるには電源スイッチがONの状態で、「コンセントを差せば電源が入る」周辺装置でないと使用できません。
(コンセントを差した後、onのボタンを押さないといけないプリンタは×です)

QIE7でfloat:leftが効かない問題

表題の件でご質問がございます。

現在
<ul>
<li><img src="XXX" ></li>
<li><img src="XXX" ></li>
<li><img src="XXX" ></li>
</ul>

<div>YYYYY</div>
<div>YYYYY</div>
<div>YYYYY</div>

の二通りで<li>と<div>にclassを設定し、
.list {float:left;}
と設定しているのですが
全て縦に並んでしまいます。

chrome safari IE8,9 firefoxでは全て狙い通り水平型リストになっているのですが
IE7のみうまく行きません。


どなたかご教示戴ければ幸いでございます。

Aベストアンサー

HTMLをIE7で標準モードで起動するように書き換えてみましょう。
いまどき、transitinalは使わないほうが良いでしょう。
DOCTYPEスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )
 もちろん文法チェックも忘れないように。

「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」

QHSHギターのタップ

 HSHギターのタップですが、5wayセレクターの両端いずれかを選択して、そこからスイッチなどで片方のコイルをアースに流すのが定番になっていますよね? そこでふと疑問に思ったことが。

 普通、HSH配列のギターは、ハーフポジションの時は自動でタップされています。故に、HSHの真ん中のPUをオフにするスイッチを付けた場合でも、リア(フロント)のシングル単体の音がでるのではないか、ということです。

 これなら通常の2WAYのスイッチで切り替えることができるので、手っ取り早いと思うのですが……知っている限りこの配線でタップをしている機種はありません。なにか理由があるのでしょうか?(特に音質面で)

Aベストアンサー

「ストラトでもハムバッキングPUのパワフルかつウォームな音がほしいが、(ストラトの売りの一つである)ハーフトーンはシングルコイル同士のパラレルがいい」というユーザーを優先している為でしょう。

>普通、HSH配列のギターは、ハーフポジションの時は自動でタップされています。故に、HSHの真ん中のPUをオフにするスイッチを付けた場合でも、リア(フロント)のシングル単体の音がでるのではないか、ということです。
→可能だと思います。ただスイッチが2個存在することに変わりありません。ですので「手っ取り早い」とは私は思いませんが(笑)。
尚、これは私の推測ですが、音が出ないスイッチポジションが存在するギターをメーカーが好まないのではないでしょうかね。ブライアン・メイのRed Specialは自作だけあって特殊なケースですね。

Q【CSS】float:left; を使用した2カラム、本文中でclearすると間が空いてしまう

お世話になります。
左がメニュー(仮称・BOX-A、float:left指定)、右が(仮称・BOX-B)本文、下にフッター(clear: both)…といったページを作成しています。

問題は、本文・BOX-Bにおいて、縦長の画像を使用した場合、文章を画像の右に回りこませたい時があります。
 ↓ ↓ ↓
<img src="xxx.jpg" style="float:left; width:100px">
  画像回り込み文章~~~文章
<br style="clear:left">
通常の文章
-----------------------------------------------------------
しかし、これを行ってしまうと、BOX-Aのfloatも解除されてしまい、BOX-Aの内容(高さ)分、
BOX-Bの『通常の文章』が表示される位置に空間ができてしまうのです。
…以下のURLが、その状態の例です。
http://www.geocities.jp/multi_column/practice/sample/2column2_fixed_liquid_poor.html

上記サイト様の、
http://www.geocities.jp/multi_column/practice/2column2.html#liquid
の、ページ半ば…よりやや下に、上記問題点を克服するという
『メインカラム幅可変、サイドバー幅固定 2カラム(ネガティブマージン型)』
の説明が載っているのですが、同じように組んでも上手く行きません…。

本文中(BOX-B)で、floatのclearを行っても支障がなくなるようなCSSの組み方はありませんでしょうか?
何卒、宜しくお願い致します。

お世話になります。
左がメニュー(仮称・BOX-A、float:left指定)、右が(仮称・BOX-B)本文、下にフッター(clear: both)…といったページを作成しています。

問題は、本文・BOX-Bにおいて、縦長の画像を使用した場合、文章を画像の右に回りこませたい時があります。
 ↓ ↓ ↓
<img src="xxx.jpg" style="float:left; width:100px">
  画像回り込み文章~~~文章
<br style="clear:left">
通常の文章
-----------------------------------------------------------
しかし、これを行ってしまうと...続きを読む

Aベストアンサー

ちょっと強引ですが、これで上手くいきました。(IE8,Firefox3で確認)

-----
<div style='background-color: #eee; width: 100%; display: table;'>
<img src='test.png' style='diplay: block; float:left;' />
<p>適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C 適当な内容C</p>
</div>
-----

** ポイント
- width: 100% でfloat抑止
- diplay: table で内容に合わせてブロック拡大

clearプロパティを使って入れ子にした回り込み解除は出来なかったので、width:100% で代替してます。

Qパソコンが自動的に立ち上がる

いつもお世話になっております。現在デスクトップパソコンを10年ほど使用しております。パソコン、モニター、プリンターをOAタップにつなぎ、タップの電源でシャットダウンした後、電源を切っていたのですが、最近OAタップの電源をオンにしたと同時にパソコンの電源が自動的に入り、BIOSセットアップメニューが立ち上がるようになり、また時刻も1998年の1月1日の0時となってしまうのです。マニュアルとか引っ張り出して読んでみたのですが、症例も載っておらず悩んでます。対処方法等ご存じの方おられましたら、ご教示お願いします。

Aベストアンサー

電池切れのためです。
Biosのセットアップ情報のバックアップや、RTC(時計)を駆動する
電池(CR2032など)が、PCの中に入っていますが、この電池が
消耗したのです。
PC内部を見て、コイン型の銀色の丸型の電池を探して同じものに
交換してください。

NECのPC90x1だと、ニッカド電池(充電式電池)の場合もあります。
この場合なら、OAタップの電源を入れたままにしてください。
省エネ(エコ)の為に電源を切っていると思いますが、毎日の
使用時間が少ないために、充電不足になっていると思われます。
(OAタップで電源を切らなければ、PCを使わなくても充電される)

当時のPCの待機電力は3W程度ですので、一月約50円位です。

Qfloat: leftで横に並べたら、サファリだけ

float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。
IEやファイヤーフォックスではピッタリ表示できています。


問題の箇所は以下です。

<div style="float: left;">
<p style="position: relative;">
<img src="./img/img-001.png" width="240" height="150" />
<br />
<span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト1</span>
</p>
</div>

<div style="float: left;">
<p style="position: relative;">
<img src="./img/img-002.png" width="240" height="150" />
<br />
<span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト2</span>
</p>
</div>

<div style="float: left;">
<p style="position: relative;">
<img src="./img/img-003.png" width="240" height="150" />
<br />
<span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト3</span>
</p>
</div>

どうすればサファリの隙間を消せるでしょうか?

float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。
IEやファイヤーフォックスではピッタリ表示できています。


問題の箇所は以下です。

<div style="float: left;">
<p style="position: relative;">
<img src="./img/img-001.png" width="240" height="150" />
<br />
<span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト1</span>
</p...続きを読む

Aベストアンサー

ちょっとコードとcssに突っ込みどころがやたら多いですが、とりあえずサファリの隙間を消す事だけで考えるとimgとbrの間にある改行を削除すればいいです。
コード内の改行が半角スペース扱いになる事は結構あるので注意しましょう。


人気Q&Aランキング

おすすめ情報