はじめての親子ハイキングに挑戦!! >>

CSSでレイアウトを組みたいと思ってます。

要は左と右に2つに割って左はpx単位で指定して、右は残りのサイズ、ウインドウのサイズ変更に伴って可変するようにレイアウトを組んでいきたいと考えています。

発想力が足りないのか、基礎的な知識が足りないのか・・・
どちらも足りないとは思いますが、おしえていただければ幸いです。

どうかよろしくお願いいたします。

A 回答 (2件)

とりあえずdivでフロートするだけでもよいかと



<style>
#l{
width:200px;
background-Color:blue;
float:left;
}
#r{
width:auto;
background-Color:red;
}
#b{
width:auto;
background-Color:green;
}
</style>
<div id="l">test</div>
<div id="r">test</div>
<div id="b">test</div>
    • good
    • 1

可能です。


こちらのサイトを参考にしてください。
詳しく説明しているので分かりやすいかと。

CSSレイアウト実践講座>2カラムCSSレイアウト実践講座
http://css.uka-p.com/index_2column.shtml
    • good
    • 0

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Q3カラムレイアウトで「常に残り幅全て・固定幅・固定幅」にできますか?

TABLEタグで先に説明させて頂くと
<table style="width:100%;">
<tr>
<td style="background-color:#FFCCCC;">A:指定なしセル</td>
<td style="width:300px;background-color:#FFFFCC;">B:固定幅のセル</td>
<td style="width:300px;background-color:#FFCCFF;">C:固定幅のセル</td>
</tr>
</table>
などとした時「セルA」は600を引いた残り全ての幅になると思います。

これをDIVタグで再現するには、以下の参考URLのようにfloatとmarginなどで行うと思うのですが、
http://14-00.com/archives/18

「セルB」や「セルC」をJavascriptでdisplay:none;などした時に、「セルA」が残り幅全てになるCSSはありますでしょうか。

TABLEタグであればそのままできたのですが、DIVの場合の指定方法が判りませんでした。

Javascriptでmarginを書き直すなどすればもちろんできそうなのですが、CSSだけでも出来る方法があれば教えて頂きたく思います。

よろしくお願いします

TABLEタグで先に説明させて頂くと
<table style="width:100%;">
<tr>
<td style="background-color:#FFCCCC;">A:指定なしセル</td>
<td style="width:300px;background-color:#FFFFCC;">B:固定幅のセル</td>
<td style="width:300px;background-color:#FFCCFF;">C:固定幅のセル</td>
</tr>
</table>
などとした時「セルA」は600を引いた残り全ての幅になると思います。

これをDIVタグで再現するには、以下の参考URLのようにfloatとmarginなどで行うと思うのですが、
http://14-00.com/archives/18

...続きを読む

Aベストアンサー

<style>
div.layout { display:table; width:100%;}
div.layout > * { display:table-cell; }
div.layout > nav { width:300px; }
</style>

<div class=layout>
<nav>B</nav>
<article>A</article>
<nav>C</nav>
</div>

Qスタイルシートで画面を上下に分割,高さを上部はpxで指定,下部は残り全部にする方法

画面を上下に分けて,上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い,次のようにしてみたんですがうまくいきません.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
<div style="width:100%; height:100%; background-color:#fcc; ">
画面下部
</div>
</body>
</html>


要は下部の「残り全部」のやり方がわかっておらず,全体的な高さが100px+100%になり,表示画面より下に100pxはみ出してしまいます.
次のようにdivを入れ子にするとうまくいくんですが,内部に表示させる内容によっては不具合が出るので,どうしてもdivどうしが独立した形で実現させたいです.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100%; background-color:#fcc; ">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
</div>
</body>
</html>

他の質問サイトでも尋ねてみたのですが,質問の意味を理解してもらえずに別に問題はないという回答を1件頂いたのみで解決できませんでした.また,テーブルではなく必ずスタイルシートで実現したいです.対策をご存知の方,ご教示よろしくお願いします.

画面を上下に分けて,上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い,次のようにしてみたんですがうまくいきません.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
<div style="width:100%; height:100%; background-color:#fcc; ">
画面下部
</div>
</body>
</html>


要は下部の「残り全部」のやり方がわかっておらず,全体的な高さが100px+100%になり,表示画面...続きを読む

Aベストアンサー

思い出したのでIE対応にするための追記。

前回のサンプルの<head>~</head>に以下を追加。
<!--[if IE]>
<style type="text/css">
#Content {
width:100%;
height:expression(document.body.clientHeight - 100);
}
</style>
<![endif]-->

参考
http://www.keynavi.net/ja/bugh/comments.html
http://useyan.x0.com/s/html/expression/

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

Qidを使わずにonclickで自身の要素取得

javascriptで
<a href="XXX.XXX" title="ゴール" onclick="element()">test</a>
function() {
idを使わずにここにtitle属性のゴールを習得する方法を記述したいのですが、わかりません
よろしくお願いします
}

Aベストアンサー

こんにちは。


==== HTML
<a href="" title="ゴール" onclick="getTitle(this);return false;">test</a>
<a href="" title="スタート" onclick="getTitle(this);return false;">test2</a>


==== JavaScript
function getTitle ( obj ) {
var title = obj.getAttribute('title');
alert ( title );
}

こういうことでしょうか。
違っていたらすみません。

Qdivのheight指定で画面一杯に表示したい

よろしくお願い致します。

<div>の<height>を100%に指定して、
タブレット等での表示時、縦でも横でも画面一杯に
表示させたいと考えています。

とりあえず css で以下は宣言済みです。
 html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
 }

親子構造としては以下を想定しています(いくらか簡略化しています)
<html>
 <body>
  <div id="H" style="height:60px;">
   (1)ここにヘッダー的なもの
  </div>
  <div id="B" style="height:100%; overflow: auto;">
   (2)この部分を縦一杯にしたい
  </div>
 </body>
</html>

(2)の部分にはjavascriptでサーバから取得した
XMLのデータを埋め込んでおります。

その際、選択行の色付け等を行いたかった為、
大枠を<div>でくくり、その中に<table>で表組みしています。
最終的な構造は以下のようになっているはずです。
 <div id="B" style="height:100%; overflow: auto;">
  <div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div>
  <div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div>
  <div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div>
  ・・・
 </div>

行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。
また、1行あたりの高さは<td style="height: 40px;">と指定しています。
(rowspanを使ってのぶち抜きを行っているため)

html と body に height:100%; を指定しているので、
予想ではヘッダー用のdivが指定の高さで表示され、
次のdivが残りの高さ分一杯に表示。
その中のデータは overflow:auto; でスクロールできる。

と考えていたのですが、実際はjavascriptで埋め込んだdiv、
及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。
(divのoverflowが全く機能しません)

100%ではなく 500px としてみたところ、
そのサイズに収まってスクロールできました。
(縦一杯ではありませんがdivのoverflowは機能しました)

何とか height 100% を実現して、
divのスクロールバーのみでの表示を行いたいのですが、
何か指定が足りないのでしょうか?

よろしくお願い致します。

<div>の<height>を100%に指定して、
タブレット等での表示時、縦でも横でも画面一杯に
表示させたいと考えています。

とりあえず css で以下は宣言済みです。
 html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
 }

親子構造としては以下を想定しています(いくらか簡略化しています)
<html>
 <body>
  <div id="H" style="height:60px;">
   (1)ここにヘッダー的なもの
  </div>
  <div id="B" style="height:100%; overflow: auto;">
   (2)この...続きを読む

Aベストアンサー

>html と body に height:100%; を指定しているので、
予想ではヘッダー用のdivが指定の高さで表示され、
次のdivが残りの高さ分一杯に表示。

まずこの予想の部分が間違っています。質問の通りに作って、高さ500pxの画面で確認した場合、html、bodyの高さは500px、ヘッダー60px、そしてその次のdivの高さも500pxで、60pxはみ出る形になります。height:100%というのは親セレクタに対しての100%です、残りの100%ではありません。

残りの高さいっぱいにしたい場合はcssのみではできません。JSを使うか、似たような見え方で違う組み方をするか…

Qframeset要素を使わずに画面を分割したい

アンテナ(下記サイト)のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。
https://antenna.jp/

ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。

見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。
メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。

どなたか分かる方教えてください。

Aベストアンサー

長くなるから、参考ページ参照。

参考URL:http://www.geocities.jp/eijispace/2012/0419.html


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング