- 締切済み
CSS で横に並べるには
CSS 初心者です。 □□ 上記のように横に表示させたいのですがうまくいきません。 <div>で方法ないものでしょうか？ つまり <CENTER> <TABLE BORDER="1"> <TR> <TD>●</TD> <TD>■</TD> </TR> </TABLE> </CENTER> のような感じです。 ●には普通にHTMLページを ■にはフレームペーを入れたいと思っています。 cssでなくてもかまいません。フレームでも可です。 ただテーブルを中央寄せ（センタリング）にしたいんです。 よろしくお願いします。
- hokuriku
- お礼率86% (46/53)
- HTML
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- izumi1226
- ベストアンサー率57% (4/7)
iframeにスクロールバーを出したくないということでしょうか。 そしたらこれでどうでしょう。 <iframe src="ページアドレス" scrolling="no"></iframe> スクロールしないと読みにくい、ということに関してはsanasさんに同感です。 勘違いしてたらごめんなさい。 あと、先の書き込みに補足です。 <style type="text/css"> <!-- body { margin-left: 1em; margin-right : 1em; color: black; background-color: white; } /*div{ */ #container {width:600px;margin:auto;} #nav {width:200px;float:left;} iframe {width:400px;} --> </style> です。 /*---*/でコメントアウトした行は不要です。 ID名（この場合は「container」「nav」）の前には#を付けて下さいね（クラスの場合は「.」をつけます） HTML部分は、このcssで作るなら <body> <div align="center"> <div id="nav"> <iframe src="http://hokuriku-shinbun.com/hidari.htm"> <!--左側のiframe--> </div> <div id="container"> <iframe src="http://yahoo.co.jp/"></iframe> <!--右側のiframe--> </div> </div> <body/> となるのでしょうか。 ちなみに、margin:auto;のみでのセンタリングは、WindowsのIE6.0ではうまく反映されない、ということがありました。中に入れる要素にもよると思うのですが…。 私の場合はこう作ります。数値や単位は適当です。すみません。 ---- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <style type="text/css"> <!-- body { margin-left: 1em; margin-right : 1em; color: black; background-color: white; } /*↓数値を大きくすると全体の横幅が狭くなります*/ #center { margin-right:2em; margin-left:2em; } /*↓必ず幅の数値を設定して下さい。うまく横に並ばない場合は数値を小さくしてみてください*/ #leftframe { width:200px;float:left; } #rightframe{ width:600px;float:right;} #float-clear { clear:both; } --> </style> </head> <body> <div id="center"> <div id="leftframe"> <iframe src="http://hokuriku-shinbun.com/hidari.htm"> <!--左側のiframe--> </div> <div id="rightframe"> <iframe src="http://yahoo.co.jp/"></iframe> <!--右側のiframe--> </div> <div id="float-clear"></div> </div> </body> </html> ----- まだるっこしいことをしましたが、iframeを２個横に並べたいだけならX-trail_00さんのやり方で充分だと思います。その場合は <iframe src="***.html" width="400"> などのように幅を指定したらいいと思います。 iframeと他の要素（文字や画像など）を並べたい場合は私はこう書く、ということで、参考までに。
- awasumi
- ベストアンサー率41% (23/56)
質問内容とはズレますが。 center要素は HTML 4.01 から非推奨となっており、XHTML 1.1 では破棄されました。 またcenter要素を使うのであれば、DOCTYPE宣言はHTML4.01 Transitionalです。 スタイルシートを使用しているのであれば、以下の方法でセンタリングをするほうが好ましいです。 http://www.mozilla.gr.jp/standards/webtips0004.html
- sanas
- ベストアンサー率100% (8/8)
スクロール自体は、フレーム内のページのbodyにoverflow:hiddenを指定することで消せます。 overflow-xなら横、yなら縦です。 しかし、■部分にはフレームページを入れられたいのですよね？ スクロールしないと読みにくい気がするのですが。 あと、bodyの閉じタグは</body>ですね。
- partita
- ベストアンサー率29% (125/427)
<div id="container"> <div id="nav">左側</div> <iframe src="xxx.html"></iframe> </div> #container {width:600px;margin:auto;} #nav {width:200px;float:left;} iframe {width:400px;} 簡単に作ればこんなものでしょうか。
お礼
初歩的な質問で申し訳ありません。下記のようにするのでしょうか。 スクロール線がでてしまって・・ 全体のスクロール線だけにしたいのですが・・ <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <style type="text/css"> <!-- body { margin-left: 1em; margin-right : 1em; color: black; background-color: white; } div{ container {width:600px;margin:auto;} nav {width:200px;float:left;} iframe {width:400px;} --> </style> </head> <body> <div id="container"> <div id="nav">左側</div> <iframe src="http://yahoo.co.jp/"></iframe> </div> <body/>
- X-trail_00
- ベストアンサー率30% (438/1430)
<center> <iframe src="aaa.html"> <iframe src="bbb.html"> </center> これでいけます。 iframeの詳細は http://www.htmq.com/html/iframe.shtml iframeに対してCSSは可能。
お礼
下記のようにしましたらスクロール船がでてしまいまました。 全体のスクロール線だけにしたいのですが・・ お手数おかけします。 <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <style type="text/css"> <!-- body { margin-left: 1em; margin-right : 1em; color: black; background-color: white; } --> </style> </head> <body> <center> <iframe src="http://hokuriku-shinbun.com/hidari.htm"> <iframe src="http://yahoo.co.jp/"> </center> <body/>
関連するQ&A
- FireFox2.0でCSSを使ってテーブルそのものをセンタリングしたい
IE６だと #wrapper { text-align: center; } <div id="wrapper"> <TABLE border="1"> <tr><td>テキスト</td></tr> </table> </div> とやればテーブルそのものがセンタリングされるのですが、 FireFox2.0だと左に寄ったままです。 CSSを使わずに<center>で囲めばセンタリングされますが、 そうではなくてCSSを使ってやるやり方はないでしょうか？
- ベストアンサー
- HTML
- CSS中央そろえについて
CSSを使用し、中央そろえを行っているのですが、winNN、winOperaでテーブル事態がセンターによりません。テーブルを寄せるのには無理があるのでしょうか ▼ＣＳＳファイル -------------------- /*TABLE*/ body { border: 0; margin: 0; padding: 0; font-family:Verdana,Arial,Helvetica,sans-serif; color:#333333; background:#fff; text-align: center; } #layout #frame{ border: 0; margin: 0; padding: 0; width: 300px; background: #ccc; } -------------------- ▼HTMLファイル <div id="layout"> <table cellspacing="0" cellpadding="0" summary=" " id="frame"> <tr> <td>aaa</td> <td>aaa</td> </tr> </table> </div>
- ベストアンサー
- CSS
- CSSの設定方法について
CSSは外部ファイルにし、十数枚あるHTMLに「div id=contents内にあるTableは全て共通のレイアウト」 となるよう下記のCSSを設定しました。 --------CSS----------------------------------------- #contents{margin-left: 70px;} #contents table{width: 650px; border: solid 1px #B1B2B2; border-collapse: collapse; margin: 15px 0px;} #contents tr, td ,th{padding: 4px; border: solid 1px #B1B2B2; border-collapse: collapse;} --------HTML----------------------------------------- <div id="contents"> <table> <tr> <th>項目</th> </tr> <tr> <td>項目1</td> </tr> </table> </div> ------------------------------------------------------- しかし、どうしても違うレイアウトにしたいTableが出てきた為、下記CSSを追加、 HTMLは<div id="contents">の部分を<div id="login">に変更したのですが 追加CSSが反映されず、id=contentsの設定が残ったままになってしまいます。 色々いじってみたのですが、どこが間違っているのやら皆目見当がつきません。 --------追加CSS----------------------------------------- #login{text-align: center; } #login table{width: 450px; border: solid 2px #666666; border-collapse: collapse;} #login tr, td ,th{border: solid 1px #666666; border-collapse: collapse;} --------HTML----------------------------------------- <div id="login"> <table> <tr> <th>項目</th> </tr> <tr> <td>項目1</td> </tr> </table> </div> 拙い文章で恐縮ですが、ご助言いただけると大変助かります。 説明不足や意味不明箇所は補足させていただきますので、どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- CSSでID等が何もないtableブログパーツを編集したい
こんにちは。 ブログのパーツをCSSを使って編集したいのですが、 編集したいパーツのTABLEには、IDなどが設定がされていません。 css初心者のため、まだ手探り状態です。 ページの形は、以下のように配置されています。 1.編集できるパーツ（HTML・CSS入力可） 2.編集できないテーブル 3.編集できるパーツ（HTML・CSS入力可） 編集したいのは2.のテーブルでしてHTMLは、 <table width="100%"> <tr><td> </td><td> </td><td> </td></tr> </table> みたいな感じです。 このテーブルのセルに、padding、borderなどを設定したいのです。 CSSの中に、 td { vertical-align: top; } とすることで上揃えのみは影響なくできましたが、 borderは、その他のセルにも大きな影響を与えてしまうためできません。 他に考えたのですが、divを使って、divに囲まれたテーブルなどを cssで編集するようなことはできませんでしょうか？ 1のパーツの最後に <div ####（IDみたいな？）>と開始を入れて、 2のパーツの冒頭で</div＞と することで、divで囲まれたテーブルにするような方法は可能ですので、 cssにあらかじめこのdivの情報を入れておけば、 このdiv内のテーブルのレイアウトが変更できるのではないかと考えたのですが・・・・。これって無理な話なのでしょうか？ 色々やってみたのですが、cssを勉強し始めて1週間では分かりませんでした。 他にこういうことをすれば編集できる可能性があるなどの情報があれば 教えてください。よろしくお願いします。
- ベストアンサー
- CSS
- CSSでテーブルを表示させるには
CSSでテーブルを表示させたいのですが、やり方が分かりません。教えてください。 現在は、HTMLで以下のように記述しています。 -------------------------------------------------------- <table border="0" width="100%" cellspacing="0" cellpadding="2"> <tr> <td bgcolor="#000000">テキスト</td> </tr> </table> -------------------------------------------------------- 具体的には、クラスを指定して、<div class="table">テキスト</div> と記述したときにテーブルを表示させたいです。 回答よろしくお願いします。
- ベストアンサー
- CSS
- CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
- tableの横の位置を変えるには？？
<div> <table> <tr><td>あ</td><td>い</td></tr> <tr><td>う</td><td>え</td></tr> </table> </div> が仮にあったとして、これを外部ＣＳＳファイルでどこかのタグに text-align:center を適用させ、テーブルの位置を真ん中にさせたい（表のような使い方です）んですが、自分でやってみたら、divとtableにＩＤとclassで両方試して適用させましたができませんでした。 この表の横の位置をブロックとしてとらえて移動させることはできる でしょうか？？
- ベストアンサー
- HTML
- CSSの部分リセットについて
サイト全体に影響するCSSでtableのボーダーを非表示に指定しています。 ところが、一部分のみCSS無指定状態のtableを表示する必要が出てしまいました。 該当するtableに別クラスを割り当てて、その部分だけを個別に指定しようと思いましたが、実際見てみると、CSS無指定状態とは微妙に見た目が異なってしまいます。 ＝＝＝＝CSS内容＝＝＝＝ table { border: 0px none; } td { border: 0px none; border-collapse: collapse; } /*普通にtableを書くとボーダーが消えてしまうので個別に指定*/ .reset table{ border: 3px ridge; } .reset td{ border: medium ridge; border-collapse: collapse; } ＝＝＝＝HTML＝＝＝＝ <div class="reset"> <table> <tr> <td>ああああああ</td> <td>ああああああ</td> </tr> <tr> <td>いいいいいい</td> <td>いいいいいい</td> </tr> </table> </div> 元のtableの指定はサイト全体に影響が出てしまうため、修正することができません。 いまさらながらものすごく後悔していますが・・・。 また、今後の使いまわしを考えると、IDの指定もできません。 無理矢理何とかできないかと思い、上記の方法を取りましたが、やはりうまくいきません。 理想としては、指定した箇所のみCSSの影響がなくなるということですが、いろいろ調べても見つかりませんでした。 根本的に作り直しした方がいいのは理解していますが、何か方法があればと思い質問させていただきました。 どなたか良い案がありましたらお助けください。
- ベストアンサー
- HTML
- IE8などでCSSでテーブルを中央に、テーブル内のテキストは左寄せにしたい
お世話になっております。 ・本文・テーブルは中央揃え ・テーブルの内容は左揃え というものをCSSで作りたいのですが、 どのようにしたらいいのでしょうか。 現在のページの一部は <div id="main"> <h1>タイトル</h1> <table border="1"> <p> 本文 </p> <tr> <td colspan="2"><h2 align="center">○○○</h2></td> </tr> <tr> <td>内容</td> <td>内容</td> </tr> ～行が続きますが省略～ </table> </div> のようになっています。 ちなみに cssのmainは「text-align:center;」を指定しておりますが、 IE8にしたところテーブルが左寄せになってしまいました。 なるべく多くのブラウザで同じような配置になるようにしたいのですが どうしたらよいでしょうか。よろしくお願いいたします。
- ベストアンサー
- 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
お礼
ありがとうございます。 このOKウェッブで文字変換がうまくいかないためでしょうか、上記でコピ^＆ペーストしましたら、フリーズしてしまいます。 タグなどをいじりまわして 例： <iframe src="http://hokuriku-shinbun.com/hidari.htm">" blank"> を <iframe src="http://hokuriku-shinbun.com/hidari.htm" blank"> に変更しましたがうまくいきません。 右側の高さ（height）を変えたいのですがうまくいきません。 お世話かけて申し訳ありません。