- ベストアンサー
ＣＳＳで質問です。
ブログのスタイルシートを見たりしてそれなりにＣＳＳの書き方は理解できてきました。 うまく表現できないのですが ┌────Ａ────┐ │┌Ｂ┐┌Ｃ┐┌Ｄ┐│ │└─┘└─┘└─┘│ │┌───Ｅ───┐│ │└───────┘│ │┌Ｆ┐┌Ｇ┐┌Ｈ┐│ │└─┘└─┘└─┘│ └─────────┘ テーブルを使わないで上の図のようなレイアウトを実現したいのです。 Ａで幅を８００ｐｘにして Ｂ，Ｃ，Ｄをそれぞれ２００，４００，２００に指定しました。 でＥを８００にしたいのですが，うまくＢＣＤのしたに来てくれません。 どのようにすればよいのでしょうか？ やり方，または参考になるサイト等を教えてください。
- kumaya77
- お礼率35% (39/111)
- ホームページ作成ソフト
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
例えばこんな感じでしょうか <html> <head> <META http-equiv=Content-Type content="text/html; charset=shift_jis"> <style type="text/css"> <!-- .bbb { position:absolute;left:10px;top:50px; border: 2px solid green; width:200px; height:100px; } .ccc { position:absolute;left:220px;top:50px; border: 2px solid red; width:400px; height:100px; } .ddd { position:absolute;left:630px;top:50px; border: 2px solid green; width:200px; height:100px; } --> </style> </head> <body> <div style="position:absolute;border: 2px solid blue; width:840px; height:500px;">AAA <div class="bbb">BBB</div> <div class="ccc">CCC</div> <div class="ddd">DDD</div> <div style="position:absolute;left:10px;top:200px; border: 2px solid purple; width:820px; height:100px;">EEE</div> <div style="position:absolute;left:10px;top:350px; border: 2px solid green; width:200px; height:100px;">FFF</div> <div style="position:absolute;left:220px;top:350px; border: 2px solid red; width:400px; height:100px;">GGG</div> <div style="position:absolute;left:630px;top:350px; border: 2px solid green; width:200px; height:100px;">HHH</div> </div> </body> </html> 後は、ご自身でご研究ください↓ http://www.tohoho-web.com/css/basic.htm
その他の回答 (2)
- acacia7
- ベストアンサー率26% (381/1447)
BCDFGHの様に前後で改行したくない場合は素直に<span>タグを使う。 <div>はブロック要素 <span>はインライン要素。 基本的にブロック要素は前後に改行が入る。
補足
すみません。ブロック要素とインライン要素の違いを教えていただければ更にありがたいのですが。何とかお願いします。
- akamanbo
- ベストアンサー率17% (462/2680)
理解できてきたというのであれば、せめて今どんなタグでどんなスタイルをあてているのかくらいは説明できるかと思いますが、いかがでしょうか。
補足
失礼しました。 すべて<div>にスタイルを設定します。 Ａ は ページ全体の幅を定めたいためwidthを800pxにしています。あと指定しているのは背景色だけです。それを idで指定しています。 ＢＣＤはclassで設定したいのです。 ＢＤはwidthを200pxにしてＣは400pxにしています。 それぞれにfloatをleftにしています。実はこのフロートがよくわからないのです。 そしてＥはwidthを800にしています。 文章力がなくてうまく伝わっているかどうか不安です。 よろしくお願いします。
関連するQ&A
- css で指定した div と table の幅が
html と css の勉強中です。 スタイルシートで次のように同じ幅を 指定したのですが、表とブロックの幅が 揃いません。 <style><!-- #a {width:300px;border:solid 2px} #b {width:300px;border:solid 2px} --></style> <div id="a"> <p> a b c d </p> </div> <table id="b" border="1"> <tr> <td>a</td><td>b</td><td>c</td><td>d</td> </tr> </table> ブラウザは IE６と opera で見てみました。 お願いします。
- ベストアンサー
- CSS
- ナビゲーション表示のCSSについて質問させて下さい。
ナビゲーション表示のCSSについて質問させて下さい。 本を参考に以下のようなソースを試しているのですが、各メニューの幅を統一するためにはどうしたらいいのでしょうか？ 試しにと、width: 200px;として、li内に設定したりしていますが、変わる気配がありません。 /*css*/ ul{ list-style: none; text-align: center; margin: 30px 0px; color: #fff; } li{ display: inline; white-space: nowrap; } li a{ text-decoration: none; padding: 10px 10px; color: #fff; background: transparent; background: #f60; } li a:hover { color: #fff; background: #fc0; } ～html～ <ul> <li><a href="A.html">項目Ａ</a></li> <li><a href="B.html">項目Ｂ</a></li> <li><a href="C.html">項目Ｃ</a></li> <li><a href="D.html">項目Ｄ</a></li> <li><a href="E.html">項目Ｅ</a></li> </ul> お恥ずかしい質問かと思いますが、アドバイスのほど頂戴できたら幸いです。 お忙しいなか恐縮ですが宜しくお願い申し上げます。
- ベストアンサー
- HTML
- CSSでの画像の自動縮小について
あるホームページを作成しているのですが、ブラウザを縮小した時、画像を自動で縮小したいのですがうまくいきません。 テーブルのレイアウトを崩したくないので、幅は固定したまま、かつ画像はブラウザサイズによって自動縮小にするようにしたいのですが、どうやってもうまくいきません。 ソースコードは下の通りです。 やはり、フレームレイアウト（waku）と、テーブルの幅を可変（パーセント表示）にしないと、画像の伸縮は難しいのでしょうか。 ＊＊＊＊ HTML部分（CSSは外部） ＊＊＊＊＊ <body> <div id="waku"> <div id="a"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> <tr> <td> <div id="b"> 画像の説明 <img src="01.jpg"> </div> </td> </tr> </table> </div> <div id="c"> <table border="1" width="100%"> <tr> <td>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> </table> </div> </div> </body> ＊＊＊＊ style.css(CSS部分) ＊＊＊＊＊ #waku { width:900px; border: 1px solid #000; } #a { width:800px; } #b img { max-width: 600px important!; width: 100% important!; max-height: 300px important!; height: 100% important!; } #c { width:800px; }
- ベストアンサー
- HTML
- padding 一つにまとめるには？css
<html> <head> <title>test</title> <style type="text/css"> td{padding:10;} </style> </head> <body> <table border=1> <tr><th>a</th><th>b</th></tr> <tr><td>c</td><td>d</td></tr> </table> </body> </html> これで、 cとdの行のtdタグの表の幅は設定できますが、 全ての行の表の幅を1行のcssで設定するにはどうすればいいでしょうか？ table{padding:10;} とすると、 表の幅は0になってしまい、テ^ブルの中の幅が広がってしまいます。 tr{padding:10;} にすると何もcssが適用されてないのと同じ状態になります。 th{padding:10;} td{padding:10;} で理想の形になるのですが、 なぜ tableやtrでは出来ないのでしょうか？ 1つにまとめられないのですか？ 添付画像は理想の形です。
- ベストアンサー
- HTML
- CSSのテーブルの件で
はじめまして よろしくお願いいたします。 CSSでテーブルを作っているのですが うまくいきません 作りたいのは下記のようなテーブルです ┌───────┐ │ A │ B │ └───────┘ 点線ではなく普通の線で構いません 大きなテーブルの幅が500pxとして Aを200px Bを300px にしたいのです テーブルのIDは「table2」にしています <外部CSSの部分> #table2{border:1px solid #000000; width:500px; } #table2 th{border:1px solid #000000; width:200px; } #table2 td{border:1px solid #000000; width:300px; } <htmlの部分> <table id="table2"> <tr> <td></td> </tr> </table> 色々やってみたのですが うまく行きません 詳しい方教えて頂けないでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- CSS tdのクラスを一部分だけ外したい
Aのテ－ブルが格子状になるようCSSで設定しました。 その中にBのテーブルを入れ、このテーブルは罫線なしで表示したいのですが、 テーブルAのtdの設定がどうやっても消えてくれないので困っています。 ▼試した事 ・テーブルBのクラスをborder-style:none ・テーブルBのクラスに白い罫線を付けてみる ・テーブルBにスタイルでnoder-style:none ▼ソース（簡略） .t-a{ border-top:solid 1px #C4772B; border-right:solid 1px #C4772B;} .t-a td{ border-bottom:1px solid #C4772B; border-left:1px solid #C4772B;} <table class="t-a"> <tr> <td>テーブルA</td> <td>テーブルA</td> </tr> <tr> <td> <table> <tr> <td>テーブルB</td> <td>テーブルB</td> <td>テーブルB</td> </tr> <tr> <td>テーブルB</td> <td>テーブルB</td> <td>テーブルB</td> </tr> </table> </td> </tr> <tr> <td>テーブルA</td> <td>テーブルA</td> </tr> </table> テーブルBのborder-style:noneが反映されなかったので、テーブルBのCSSは削除していまいました。 力を貸してください。
- ベストアンサー
- HTML
- CSSレイアウトでこのようなことはできる？
ホームページをテーブルを使用しないCSSレイアウトで作成しようと思います。 左右を分けるのにfloatを使用して作っています。 横幅は30%と70%で分けていますが、ブラウザの幅を小さくすると上下にずれてしまいます。 そこでブラウザで800px以下になった時は横バー表示するようにしたいです。 このようなことはできるでしょうか？
- 締切済み
- その他（インターネット・Webサービス）
- cssで列の幅を調整するには？
たとえば、 <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>1</td><td>2</td><td>3</td></tr> </table> このようなcssとコードがある場合、 3列目のｃと３の列の幅を10％にしたい場合、 どのようなコードを書けばいいですか？ td { width: 10%; } こうすると、すべての列が１０％になってしまいます。 指定した列のみのcssで幅を調整する方法を教えてください。 できれば直接テーブルのタグをいじるのではなく、スタイルシートの宣言部分で対応したいです。
- ベストアンサー
- HTML
- CSSのwidthプロパティについて教えてください。
お世話になります。 フォームメールをCSSでレイアウトしています。 見出しの幅を揃えるため下記のコードを記述しましたが,labelの幅が変更できません。 ----- HTML ----- <fieldset> <label class="w1">項目</label><input class="w1" type="text" name="someone" /> </fieldset> ----- CSS ----- .w1 { width: 200px; } labelの幅は200pxになりませんでしたがinputの値は200pxになりました。 labelの幅をテーブルを使わずに揃えたいのですが その方法が分かりません。 手がかりでも良いので教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- TABLEの背景画像をCSSに変更したい。
今までTABLEを使って背景画像を指定していたのですが、CSSに変更したいと考えています。 現在はTABLEで図１のようにABC A'B'C' A''B''...と連続する背景画像を＜図３＞のカラム「ロ」に入れています。 これをCSSのbackgroud-imageで指定すると図２のB'ように途中で切れてしまいます。 これを背景イメージＡ，Ｂ，Ｃのいずれかの境界で背景を終わらせるようにコントロールすることはできないものでしょうか。 CSSだけで指定するのは困難なように思います。 JAVA Scriptとの併用になるのでしょうか。 CSSは基本的な使い方は理解しているつもりですが、JAVA Scriptは読める程度で書くことはできません。 わかりにくい説明で申し訳ありませんがどなたか教えていただければ助かります。 よろしくお願いします。 なお背景画像の高さはA＝B＝Cです。 背景画像は＜図３＞のカラム「ロ」、カラム「イ」「ロ」はコンテンツしだいで下に伸びます。 ＜図１：背景イメージ＞ ■■■ ┐ ■■■ A ■■■ ┘ □□□ ┐ □□□ B □□□ ┘ ◆◆◆ ┐ ◆◆◆ C ◆◆◆ ┘ ＜図２：backgroud-imageによる指定＞ ■■■ ┐ ■■■ A ■■■ ┘ □□□ ┐ □□□ B □□□ ┘ ◆◆◆ ┐ ◆◆◆ C ◆◆◆ ┘ ■■■ ┐ ■■■ A' ■■■ ┘ □□□ ┐ □□□ B' ┘ ＜図３：現在のカラム（TABLEで指定）＞ ┌─────────┐ │┌─┐┌─┐┌─┐│ ││ ││ ││ ││ ││イ││ロ││ハ││ ││ ││ ││ ││ │└─┘└─┘└─┘│ └─────────┘
- ベストアンサー
- CSS
お礼
ありがとうございました。私が求めているものにかなり近いです。これを参考にしてさらに研究してみます。