- ベストアンサー
スタイルシートについて
HPの画面にテーブルを３つ配置することを考えています。 (1)(3) ←数字がそれぞれテーブルの位置関係を示ています (2)(3) ((3)は一つのテーブルです。) 最初は(1)(3)のテーブルを横につなげることを考えましたが (1)(3)の縦の長さが違うデザインのためできませんでした。 横につなげると、テーブルの縦の長さが長いほうに そろってしまうのです。 そこでスタイルシートを使用すればできるのではないかと 思い、(3)をmarginでTOPを10ptにしたのですが そうすると(2)のテーブルの真下にきてしまいました。 スタイルシートを使用してもしなくてもいいので 方法を教えて下さい。よろしくお願い致します。
- bruce1104
- お礼率66% (228/345)
- HTML
- 回答数8
- ありがとう数6
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
<tr>～</tr>が入っていませんでした。 こんな感じですね。 <table border="1" STYLE="position:absolute; top:100px; left:100px;"> <tr><td> abc </td></tr> </table> <table border="1" STYLE="position:absolute; top:200px; left:100px;"> <tr><td> efg </td></tr> </table> <table border="1" STYLE="position:absolute; top:100px; left:200px;"> <tr><td> his </td></tr> </table>
その他の回答 (7)
- arukamun
- ベストアンサー率35% (842/2394)
私の説明不足でした。 <TABLE border="1" STYLE="position:absolute; top:100px; left:100px;"> <td> abc </td> </table> <table border="1" STYLE="position:absolute; top:200px; left:100px;"> <td> efg </td> </table> <table border="1" STYLE="position:absolute; top:100px; left:200px;"> <td> his </td> </table> でいけると思います。
お礼
回答ありがとうございます。 お～できました。感動です。 さっき私がかいたのは、<table>の中に もうひとつ<table>をつくっていましたね。 このやりかただと、自由にテーブルを配置できます。 ありがとうございました。
- void2000
- ベストアンサー率17% (41/229)
＃５です。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <TABLE BORDER=1 cellspacing=0 align=left> <tr><TD width=200 height=110><BR></TD></tr> <tr><TD width=200 height=200><BR></TD></tr> </TABLE> <TABLE BORDER=0 align=left><TD width=10></TD></TABLE> <TABLE BORDER=1 cellspacing=0> <tr><TD width=200 height=180><BR></TD></tr> </TABLE> </BODY> </HTML> 見えない<table>を一つ入れるだけです。 これにも align=left を忘れないようにしてください。 同じ方法で右へ何列でも並べることができます。
お礼
回答ありがとうございます。 なるふぉど。こうするんですね。 今までなにげなく見ていたHPもいろいろと 工夫されているんですね。 勉強になります。 ありがとうございます。
- void2000
- ベストアンサー率17% (41/229)
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <TABLE BORDER=1 cellspacing=0 align=left> <tr><TD width=200 height=110><BR></TD><tr> <tr><TD width=200 height=100><BR></TD><tr> </TABLE> <TABLE BORDER=1 cellspacing=0> <tr><TD width=200 height=180><BR></TD><tr> </TABLE> </BODY> </HTML> こんな方法でいかがでしょう。 上から６行目の最後にある、align=left が横に並べてくれます。
お礼
さっそくの回答ありがとうございます。 このようなこともできるのですね。勉強になりました。 ついでといってはなんですが、この二つの テーブルの間をあけることは可能でしょうか？
- lovin-rose
- ベストアンサー率40% (30/75)
さらにテーブルを重ねてやると、（３）のテーブルが 長くなっても大丈夫だと思います。 <table border="0"> <tr> <td align="center" valign="top"> <table border="0"> <tr> <td><div align="center"><center> <table border="1" cellpadding="6" cellspacing="1"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table> </center></div></td> </tr> <tr> <td><div align="center"><center> <table border="1" cellpadding="6" cellspacing="1"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table> </center></div></td> </tr> </table> </td> <td><div align="center"><center> <table border="1" cellpadding="6" cellspacing="1"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> <tr> <td>e</td> <td>f</td> </tr> <tr> <td>g</td> <td>h</td> </tr> <tr> <td>i</td> <td>j</td> </tr> <tr> <td>k</td> <td>l</td> </tr> </table> </center></div></td> </tr> </table> どうでしょうか？
お礼
何回もほんとすいません。 このようなこともできるのですね。 さっそく試してみました。(3)のテーブルを いくら伸ばしても(1)(2)の位置は変わりませんでした。 わかりづらい質問方法ですいません。勉強になりました。
- arukamun
- ベストアンサー率35% (842/2394)
すべてのTABLEの位置は固定なんですね。 であれば、 <TABLE STYLE="position:absolute; top:100px; left:100px;"> ～ </TABLE> <TABLE STYLE="position:absolute; top:200px; left:100px;"> ～ </TABLE> <TABLE STYLE="position:absolute; top:100px; left:200px;"> ～ </TABLE> といったようにTABLE(1)、(2)、(3)をスタイルシートで絶対指定してしまえばよいですね。
補足
何回もほんとすいません。 以下、このようにかいてみました。 <TABLE STYLE="position:absolute; top:100px; left:100px;"> <table border="1"> <td> abc </td> </table> <TABLE STYLE="position:absolute; top:200px; left:100px;"> <table border="1"> <td> efg </td> </table> </table> <TABLE STYLE="position:absolute; top:100px; left:200px;"> <table border="1"> <td> his </td> </table> </TABLE> どうも縦にそろってしまいます。 そこでarukamunさんの回答の～ aaaという文字だけいれるとうまくいきました。 私のtableの作成方法が悪いようです。 どこを直せばいけるのでしょうか？
- arukamun
- ベストアンサー率35% (842/2394)
TABLEの入れ子をすれば良いですね。 <TABLE> <TR><TD> ここに(1)のTABLEを入れる。 </TD><TD ROWSPAN=2> ここに(3)のTABLEを入れる。 </TD></TR> <TR><TD> ここに(2)のTABLEを入れる。 </TD></TR> </TABLE> 必要に応じて、 ALIGN= や VALIGN= を使ってください。
補足
さっそくの回答ありがとうございます。 一つのテーブルに３つともいれてしまうのですね。 この方法も一つの方法として覚えておきます。 私の質問の仕方が悪かったため申し訳ないのですが (3)のテーブルは長さが決まっていません。 (3)のテーブルの長さが変わっても(1)(2)は動いてほしくはないのです。http://www.sega.jp/map.html このような イメージのHPを作成したいと思っています。 よろしくお願いします。
- lovin-rose
- ベストアンサー率40% (30/75)
テーブルを重ねる方法があります。 <table border="0"> <tr> <td><div align="center"><center> <table border="1" cellpadding="6" cellspacing="1"> <tr> <td align="center">a</td> <td align="center">b</td> </tr> <tr> <td align="center">c</td> <td align="center">d</td> </tr> </table> </center></div></td> <td rowspan="2"><div aign="center"><center> <table border="1" cellpadding="6" cellspacing="1"> <tr> <td align="center">a</td> <td align="center">b</td> </tr> <tr> <td align="center">c</td> <td align="center">d</td> </tr> <tr> <td align="center">e</td> <td align="center">f</td> </tr> <tr> <td align="center">g</td> <td align="center">h</td> </tr> <tr> <td align="center">i</td> <td align="center">j</td> </tr> <tr> <td align="center">k</td> <td align="center">l</td> </tr> </table> </center></div></td> </tr> <tr> <td><div align="center"><center> <table border="1" cellpadding="6" cellspacing="1"> <tr> <td align="center">a</td> <td align="center">b</td> </tr> <tr> <td align="center">c</td> <td align="center">d</td> </tr> </table> </center></div></td> </tr> </table> ご希望のものと違ったらすいません。
お礼
さっそくの回答ありがとうございます。 さっそくコピペさせてもらいました。 このような方法があるんですね。 タグをこれから解析します。 ありがとうございます。
補足
すいません。補足させてください。 lovin- roseさんが教えていただいた方法で いろいろ試してみたのですが、(3)のテーブルが 長くなればなるほど(1)(2)のテーブルの位置が ずれてしまいました。私の質問の仕方が悪かったこと すいません。(3)のテーブルの長さが変わっても (1)(2)の位置はずらしたくないのです。ほかにどのような方法があるでしょうか？lovin- roseさんが教えてくれた方法も一つとして覚えておきます。
関連するQ&A
- スタイルシートでデザイン
style.cssからの読み込みで<div class=""></div>を使いテーブルデザインを行っていますが、スタイルシートで表のように、縦3列横2列等で表示させる方法がわかりません。位置指定で表示させるしかないのでしょうか？ 最近スタイルシートを使いはじめ、上記のデザイン方法をいろいろなサイトで調べてみましたがわかりませんでした。方法、又は、わかりやすい参考サイトをお教えいただけると幸いです。
- ベストアンサー
- HTML
- スタイルシートの使い方
職場のイントラネット内のページ全部を明朝体印刷に統一したいのですがスタイルシートで可能でしょうか。 全パソコンＩＥ.5.0使用。 下記のように外部ファイルを使用して、 <link rel="stylesheet" href="style.css" src="style.css" type="text/css"> 下記で明朝を指定しているつもりなのですがうまくいかないようです。 BODY{background:white; margin-left:3mm; margin-right:3mm; margin-top:3mm; font-size:30pt; font-family:ＭＳ明朝体; line-height:120%; text-decoration:none; color:black;}
- ベストアンサー
- グラフィックソフト
- スタイルシート
スタイルシートを使ってホームページを作り始めたんですが、左にメニューを作りたかったので body { margin: 0px; padding: 0px; } .main { width: 580px; position: absolute; left: 210px; } .side { width: 180px; margin-left:10px; } とcssファイルを作り何個かのページに記述したらトップページを除いて他のページは配置がおかしくなったりレンタルサーバの広告がど真ん中に重なったりしてしまいます。なぜでしょうか？ 配置がおかしいとはsideとmainが ■■という配置にして欲しいのですが ■ ■という風になってしまいます。 わかりにくくてすみません。
- 締切済み
- HTML
- スタイルシートのwidthについて
<style type="text/css"> #hoge{border:solid 1px black;width:100px;margin:0;} </style> <div id="hoge> </div> このようにdivタグにスタイルシートをつけるとなぜか縦の幅ができてしまいます。 width:100をなくせばただの線になるのですがwidthをつけるとどうして 縦幅ができてしまうのでしょうか？ hightをつけてるのはまだしもwidthをつけただけじゃ横の長さが決まるだけで縦は0だと思ったのですが違うのでしょうか？ ブラウザはIE6で見ました。
- ベストアンサー
- HTML
- 外部スタイルシートがテーブル内に効かない
外部スタイルシートの設定が、テーブル内には効きません。 特に、フォントや行間を効かせたいのですが、どうしたらいいのでしょうか。 以下、大雑把ですが。 #main { float: none; margin-left: 132px; line-height: 1,5em; margin-top : 50px; } #main td, th { line-height: 1,5em; } と外部スタイルシートで指定していて、 <DIV id="main"> <TABLE cellpadding="10" background="image/003-002.gif" style="filter:Alpha(opacity=75);"> <TBODY> <TR> <TD> <H3>内容</H3> </TD> </TR> </TBODY> </TABLE> というようなテーブルを書きました。 テーブルがなければ、スタイルシートは効きます。 初歩的な質問だとは思うのですが、テーブル内に行間などを設定する方法をお願いいたします。
- ベストアンサー
- HTML
- スタイルシートdivについて
こんばんは。 スタイルシートのDIVについて教えて下さい。 今、幅720pxのテーブルをDIVに変えようと悪戦苦闘している最中です。 DIVについてはほとんど無知なので、あちこちのサイトのスタイルシート講座を覗きながらなんとか作ってみました。 ようは幅720pxのボックスの中に文字を左寄せで配置し、ボックス自体は画面の中央に(左右のマージンを同じに)したいのです。 そのソースなのですが、スタイルシートを div#main{width:720px; margin-left:auto; margin-right:auto; text-align:left; line-height:175%;} と記述し、 HTMLを <div id="main">○○○</div> としました。○○○がテキスト部分です。 でもIE7で確認したところ、ボックスが左寄りになってしまっています。 しかし、どういうわけかFirefoxとOperaではちゃんと中央に配置されているのです。 いったいどこに問題があるのでしょうか。 わかる方、いらっしゃいましたら教えて下さい。
- ベストアンサー
- HTML
- スタイルシートで作成したリスト
スタイルシートで作成したリストが含まれるwebページを印刷したいのですが、 リストの数字の部分が、文字化けしてしまいます。 （●に置き換わってしまう） どのようにすれば、数字をきちんと表示させたまま印刷することができるのでしょうか？ リスト部分は .LI { list-style-type: decimal; list-style-position: outside; margin-top: 0px } としています。
- ベストアンサー
- HTML
- スタイルシートを使ってページの細かな配置がしたい
私が作っているＨＰのトップにはカウンター、ミニ日記、更新履歴（テーブル）、イメージが２つあります。 そこにちょこちょこっと文章があります。 その配置を細かく指定したいのですが、スタイルシートなしではできませんよね！？ 文字に対する指定ではなく、配置を指定したいのです。 スタイルシートなしでやると全くうまくいかなくて。 3種類か4種類くらい適用方法があるみたいですが、どれをつかえばよいのやら・・・ といったことも分からず先に進みません。 初心者にも分かる説明でお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- スタイルシートでの文字位置の指定
正方形の中心に文字があるようなデザインにしたくて 次のように記述したのですがうまくいきません。 .text{ height : 160px; width : 160px; color : #FFFFFF; padding: 0px; margin: 0px; background-color: #6C3C1F; font-size: 15pt; text-align: center; vertical-align: middle; font-weight: bold; } 横位置はきちんと中央揃えになりますが、 縦の位置は文字が正方形内で上揃えになってしまいます。 どうすれば希望のデザインにできるか教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートによる支配を抜けるには？
私の勤務先の自社サイトを、外部の業者がリニューアルしたのですが、その時にその業者が、全部で約200ページを支配する外部スタイルシートに、<TABLE>タグを使うと全て左に20pxマージンがつくような設定を入れてあるようです。 社長は、大規模なリニューアルはその業者に任せ、あとは自社で更新するという前提でこのリニューアルを行ったので、これからは私が更新して行かなければならないのですが、私はスタイルシートのことが殆どわかりません。 今、その外部の業者が設定したスタイルシートのおかげで、テーブルの中に更にテーブルを配置した場合など、内側のテーブルを競るの左にピッタリつけたいのに強制的に左側を20ピクセル空けられてしまいます。 業者が設定したスタイルシートをいじってその20pxマージンを0pxに変更してしまえば、私が今いじりたい部分は目的通りの配置で作れるのですが、もちろん、そのかわりに他のテーブルがみんな左に片寄ってしまい、これでは話になりません。 私が特例としてマージン無しで配置したいテーブルだけをスタイルシートの支配から除外するにはどうしたら良いでしょうか？
- ベストアンサー
- HTML
お礼
何回も回答ありがとうございます。 これで質問を締め切らせていただきます。 この場を借りますが皆さん、わかりにくい質問で すいません。いろんな方法を教えてもらって 勉強になりました。