- ベストアンサー
CSSのレイアウト
tableでレイアウトを作っていたのですが、不便さが出てきたのでCSSで作り直そうとしています。 テンプレートを見るほうが早く仕組みを理解出来るので、欲しい形を探していたのですが見つかりません。 <table> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr><td>3</td></tr> </table> この形のテンプレートを公開しているサイトを教えて頂きたいので質問しました。 宜しくお願いします。
- aprilia-rs
- お礼率68% (33/48)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ご希望のものにぴったりのものではありませんが ネットマニアさんの「幅固定多段組み#013」か「3カラム+多段#006」をヒントにされると良いと思います。 http://www.netmania.jp/templates/css.php
関連するQ&A
- 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を使ってはいけない?
「Tableはレイアウト目的で使うべきではなく、レイアウトはCSSで定義するべき」ということについて、 もっともだと思うものの、具体的なやり方がわかりません。 divかspanとclassを使うことは予想できるのですが・・・ 次のようなレイアウトの場合、CSSでどのように置き換えるのでしょうか? <table width="800"> <tr> <td colspan=2 width="800"> ヘッダ領域 </td> </tr> <tr> <td width="100"> メニュー領域 </td> </tr> <tr> <td width="700"> コンテンツ領域 </td> </tr> </table>
- ベストアンサー
- CSS
- CSSのtableについて【CSSが無かったのでHTMLで…。】
<html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分?の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか?? 教えてください☆
- ベストアンサー
- HTML
- CSSのマークアップでつまずいてます
質問させて頂きます。 只今テーブルレイアウトから脱却すべく、CSSでのレイアウトを練習中なのですが、以下のhtml(テーブル)をCSSにマークアップするところでつまずいてます。 <table width="80%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" border="0" cellspacing="3" cellpadding="0" bgcolor="#99CCFF"> <tr> <td><b><font size="+1">タイトル1</font></b></td> <td nowrap> <div align="right"><b>タイトル2</b></div> </td> </tr> </table> </td> </tr> <tr> <td>本文が入ります</td> </tr> </table> 問題なのはタイトル2を上手く挿入出来ない点です。 タイトル1は<h1>としてbackground-colorで色を敷いたのですが、タイトル2を<h2>と見出しとして定義すると、横並びに出来ません。 それならばと同じ色のボックスを横2つ並べて、それぞれ文字を入れると定義してみたのですが、見事にレイアウトが崩れてしまいました。 こんな初歩的な事で質問するのも恐縮ですが、お分かりになる方いらっしゃいましたら教えて頂けないでしょうか。
- ベストアンサー
- CSS
- cssで商品を並べる時、テーブルを使わないでできる?
cssとっかかったばかりの初心者ですのでわけのわからない質問ばかりしてしまいますが、よろしくお願いします。 cssを使ったページに商品を並べる場合、テーブルを使ってレイアウトするのが楽と思いますが、テーブルを使わないで2列、3列というようにできますか? 普通にテーブルを使ったら <table> <tr> <td>item1</td> <td>item2</td> <td>item3</td> </tr> <tr> <td><img src="img/01.jpg" width="100" height="100"></td> <td><img src="img/02.jpg" width="100" height="100"></td> <td><img src="img/03.jpg" width="100" height="100"></td> </tr> </table> ですが、テーブルタグをつかわず、cssで列を指定ってできますか? それとも、商品ラインナップの場合はテーブルで入れるのが普通ですか??? いろいろやってみたんですが、わからなくなったので、質問します。 よろしくお願いします。
- ベストアンサー
- XML
- テーブルのレイアウトがおかしくなる
畏れ入ります。 テーブルを作っているのですが奇妙な現象にあっています。 <table border="1" width="100%"> <tr> <th width="18"> </th> <th width="100"> </th> <th> </th> <th width="100"> </th> </tr> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="3"> <!-- ここに たくさんの 文字列を入れると ・・・ --> </td> </tr> </table> このコメントの部分が無い状態では正常にでていますが、 ここにたくさんの文字列(半角30文字程度でおかしくなります)を投入すると、レイアウトが異常に崩れてしまいます。 文字列は改行してもかまわないのですが テーブル1行目2行目のセルサイズ(width)がこのように変化してしまうと困るのです。 どのようにしたら良いか(width=100の部分を守らせたい) 教えてください。
- ベストアンサー
- HTML
- tableレイアウトをcssで軽くできませんか?
tableタグを使用して、ごく普通の表を作成し、Web上に掲載しています。 しかし、とにかく情報量が多く、情報が増えるたびに明らかに重くなってきました。 今のうちに対策をと思い、何とかcssを使用しソースを軽くしようと思っています。 現在掲載中の表は下記のような、いたってシンプルなものです。 <table class="table1"> <tr> <td class="midasi">日付</td> <td class="midasi">対戦相手</td> <td class="midasi">勝敗</td> <td class="midasi">備考</td> </tr> <tr> <td>1月1日</td> <td>○○高校</td> <td>勝ち</td> <td>4分30秒 ○×反則</td> </tr> <tr> <td>1月2日</td> <td>××高校</td> <td>負け</td> <td></td> </tr> 。 。 ~~~ 以下続く ~~~ 。 。 </table> 表である以上tableタグになってしまうのは仕方ないとは思うのですが、上手い具合にソースの量を減らせれば改善したいと思っています。 アドバイスの程、よろしくお願い致します。
- ベストアンサー
- HTML
- テーブルのレイアウトがおかしくなります・・・
先ほども質問して教えていただいたのですが、少し対応できないことが出来てしまったので 再び質問いたします。 <table border="1" width="100%"> <tr> <td width="20" rowspan="2">1</td> <td width="30"> </td> <td> </td> </tr> <tr> <td colspan="2"> aaaaaaaaaaaaaaaaaaaaaa</td> </tr> </table> 1)先ほどtable-layout:fixedを教えてもらったのですが、一番左のセルの番号の桁数が増えた場合には幅を増やして表示したい (つまり最大の幅にしたい) 2)width=30の部分を書かないとcolspanのセルに影響を受けないのですが、width=30を書くととたんにcolspanのセルに影響されて びよ~んと幅が大きくなってしまいます。ずばりhtmlのバグでしょうか? よろしくお願いいたします。
- ベストアンサー
- 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
- tableのtr要素をドラッグ&ドロップで任意に入れ替え、その順番を取
tableのtr要素をドラッグ&ドロップで任意に入れ替え、その順番を取りたいです。 jqueryのSortableプラグインを調べ、これならできそうとプログラムを組み、 trの一行ごとならばできました。 やりたいことは、rowspanで連結されている<tr>を2行以上まとめて1つの要素とみなし、 入れ替えたいのですが、 jqueryのSortableでできますでしょうか? <table> <tr><td rowspan="2">一行目</td><td>あいう</td> <tr><td>えお<td></tr> <tr><td rowspan="2">二行目</td><td>かきく</td> <tr><td>けこ<td></tr> </table> <table>を入れ子にすれば実現はできそうですが、 ちょっとCSSの関係もあり、その方法を採用するのは難しい気がしています。
- ベストアンサー
- AJAX
お礼
ありがとうございます。 既に自分で解決出来て質問の削除出来る時間を待っていました…