- ベストアンサー
画面幅に合わせてテーブルのカラム数を変えたい
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
>> ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です >よろしかったら、やり方を教えてください。 過去にulでアイテムを並べる方法について回答したスレッドがありますので、そちらを参考にでもして下さい。 http://oshiete1.goo.ne.jp/qa3870470.html 要は子要素のliを左にフロート（floatの意味は読んで字のごとく「浮かせる」です。）させることでコラム的に見せる、という事です。上記では固定値の幅の中でアイテムを一行に2個づつになる様に並べていますが、ウィンドウサイズによって流動的にするのであれば、ulの全体幅は決めず自動もしくは100%で、という事になります。 > いろいろ調べたら、JavaScriptでwindow.innerWidthを取得し、大中小３種類ぐらいのテーブルをif～～で仕分けることは可能なようです。 ANo.2の回答者様も言及されていますが、内容が「表」として相応しいものなら、tableでマークアップした上でお好きな方法でどうぞ。 「各セルがまったく同一性質のリンクテキスト」という文を読む限りでは、内容は単なる「リスト」の様に見受けられましたので、ならばulを使用するのが一番妥当ではないか、と思ったまでです。
その他の回答 (4)
- 0wl
- ベストアンサー率43% (10/23)
勉強にさける時間が２時間程度なら http://www.kanzaki.com/docs/html/lesson1.html http://www.kanzaki.com/docs/html/htminfo17.html をセットで。テーブルレイアウト経験者は勘違いしていることが多いので、まっさら以下からのスタートと思って丁寧に読んでみてください。 もうすこしじっくり勉強できるなら http://www.kanzaki.com/docs/htminfo.html あたりを抑えて。 ベストといわれれば、kanzakiさんの所を推しますが、ちょっと、固い感じです。基本の基本だけサイトです。難しくないです。くれぐれもこれまでの知識は捨てて真っ白頭で読んで、試してみてください。 基本を抑えたら、リファレンス（プロパティの辞書のようなもの）で何ができるのかサーっとみて、実践。おっと！こんなんしたいと思うページを見つけたら、ソースを見てこうなってるんだぁと人のアイデアを盗んでいけば、ＯＫ。お手本にならない悪いソースも基本がわかっていれば見分けられる筈です。実践していけば、よく使うことはすぐ覚えちゃうほど少ないです。 先に、float:left;と書きましたが、実はある場所をインラインにしてもできます。とやり方はいろいろあります。適材適所ということで。floatは大きな問題があるのです。 インライン・ボックスの違い・フロートのクリア・ボックスモデルあたりが躓きやすいし、モードの違いで解釈が違うことも把握していけば、正しくｃｓｓを書いても、各ブラウザの方言に書き直さないと望む表示はできないのだけど、……と言うことはまだ先のお話。 本を希望のようですが、入門書は全く知らないです。サイトで勘弁してください。
お礼
0wlさん、そのほかのみなさま、ありがとうございました。 今度時間があるとき、floatなるものを究めたいと思います。 kanzakiサイトも、じっくり読ませていただきます。
- 0wl
- ベストアンサー率43% (10/23)
テクニックではなく、「基本」ですよ。と一応言っといて、 もしかしたら、表にしたかったのは罫線？と思いましたので、先のheadのstyle｛ ｝内の どこかの、「；」の後ろに border:red 3px solid; を追加してみてください。赤い、3ピクセルの実線で囲まれます。 さらに、すき間が欲しければ、罫のそとなら margin:20px;/*ボックスの外側の空きです*/ 罫と文字の間なら padding:20px;/*ボックスの内側の空きです*/ 中身をピンクで塗りたければ、 background:#FFDFFF; 等を追加してみてください。 これらはすべてｃｓｓの基本です。テクニックではありません。興味があれば文章構造・論理構造などにも言及した本やサイトで学ばれることをお奨めします。罫線をひくにはこのタグ、太くするのは<b>みたいな説明の場所での入門は混乱のもとです。避けられることをお奨めします。
補足
> 文章構造・論理構造などにも言及した本やサイトで これがベスト、という本を教えてください。絶対、買います！。
- 0wl
- ベストアンサー率43% (10/23)
それ、表じゃなく、見栄え目的に表にされてるだけですよね？ ｃｓｓは見栄えと構造の分離を推奨します。だから、意味的に表でないのに見た目に段にしたいからと、tableにすることを奨めません。多分、全体に効くのでセレクタを理解していないと実用は難しいと思います。 何かの子要素のp指定とわかれば簡単なのですが、今言われていることだけですとこんな感じですね。高さががたがただとちょっと難ありですが、基本的には以下で <head></head>の中に <style> p{ /*pのことだよって意味*/ width:100px;/*ここに幅の指定を数値で入れます*/ height:100px;/*ここに高さの指定を数値で入れます*/ float:left; /*左に詰めてね って意味*/ } </style> を入れます <body>部分は、 これまで、<td></td>の中身を<table>でななく <body> <p>あああああ</p> <p>いいいいい</p> <p>ううううう</p> <p>えええええ</p> <p>おおおおおなどとします</p> <p>かかかかか</p> <p>ききききききききききき</p> <p>くくくくくくくくくくく</p> <p>けけけけけけけけけけけけけけけけけけけけけけけけ</p> </body> それで、ブラウザの幅をいろいろ伸ばしたり縮めたりして試してください。
お礼
ありがとうございます。初めての体験ですが、不思議なことが起きますね。まるで、手品みたいですね。これはたぶん、abrilさんの回答とも関連があるテクニックなんでしょうね。
- abril
- ベストアンサー率69% (388/560)
> ユーザのブラウザの画面幅が大きいときは５カラム、小さいときは３カラムなどと、自動的に加減するやりかたが、HTMLやCSS（など）にありますでしょうか？ 「HTMLやCSS」にはその様な機能はありません。HTMLはマークアップ言語であり、CSSはスタイルを定義するものであり、上記の様な自動生成的な事はできません（ちなみにコラム数を増減するのではなく、ウィンドウサイズに応じてコラム幅を自動的に拡大・縮小させる、というのであればCSSでできます）。 ※ただし、これがtableではなく、ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です（色々レイアウト上の条件はありますが）。
お礼
お答え、ありがとうございます。やはり、ないですか、残念です。 > ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です よろしかったら、やり方を教えてください。
補足
いろいろ調べたら、JavaScriptでwindow.innerWidthを取得し、大中小３種類ぐらいのテーブルをif～～で仕分けることは可能なようです。
関連するQ&A
- 4カラムのテーブルに絶対幅と相対幅の混在指定の可否
以下のHTMLで、１列目は20ピクセル（？）、２列目は100ピクセルに幅が固定されているとして、 ３～４列目、黄色と青のカラムの幅を均等に揃える方法はありませんか。 ３～４列目の幅を<col=50%>ととると、１～２列目の幅が侵食されて崩れます。 ごらんのとおり、テーブル自体の幅は100%なので、モニタやブラウザの表示幅によってテーブル自体の幅も異なってくるため、 4カラムのテーブルのうち、１～２列目は絶対幅、３～４列目と相対幅と混在指定できればよいのですけど。 <html> <body> <table border=1 cellpadding=3 cellspacing=0 width=100%> <col width=20> <col width=100> <col> <col> <tr> <th rowspan=2 style="writing-mode: tb-rl;">基本情報</th> <th>プロジェクト</th> <td colspan=2>あいうえおあいうえおあいうえおあいうえお </tr> <tr> <th>概要</th> <td colspan=2>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td> </tr> <tr> <th colspan=2>コメント</th> <th bgcolor=yellow>当方から</th> <th bgcolor=blue>先方から</th> </tr> <tr> <th colspan=2>第1回会合</th> <td>◆ いいいいいいいいいいい<br>◆ うううううう</td> <td>◆ ええええええええええええええ<br>◆ おおおおおおおおおおおおおおおおおおおおおおおおおおおおお</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルの幅
tableのwidth指定についての質問です。 同じレイアウトで複数のhtmlファイルを作るのですが、その中のテーブル及びセルの幅をwidthで固定してあるのにも関わらず、セル内のテキストの長さによって各ファイルごとのテーブルのセルの幅が、IEでの表示で変わってしまいます。 <table width="450" cellspacing="0" cellpadding="2" border="1"> <tr> <th bgcolor="#ffcccc" width="150">aaaaaaaaa</th> <th bgcolor="#ffcccc" width="286">\100,000</th> </tr> <tr> <td colspan="2">ここには商品説明が入ります。ああああああああああああああああああああああああああああああああああああ</td> </tr> </table> 上記のaaaaaaaaaの部分がファイルによって長さが違うのですが、それによってセルの幅が変わってしまいます。 IE６でプレビューすると変わりますが、firefoxでは変わりません。 <th>を<td>に変更すると、幅は固定され変わりません。 IEの場合、thでwidth指定が出来ないのでしょうか。 なぜ変わってしまうのでしょうか?どこかに記述の問題があれば教えていただければありがたく思います。
- 締切済み
- HTML
- Tableの1セル内に画像・テキストを均等貼り付けしたい
初心者です。 HTMLと外部CSSについて教えていただきたく。 1列3行のテーブルの2行目に 複数枚の画像を均等に横並びに配置し、改行してそれぞれの画像の下に画像タイトル文を入れたいと考えています。 一つのセルの上行に画像下行にテキストといった考えです。 列幅は750px 画像1枚の幅は最大350px。 この場合、下記のHTMLをどのように改変し、外部CSSはどのように書けばよいでしょうか。 ブラウザはIE7以降とFireFOX3.5.xを考えています。 追記：このテーブルデザインをフォームとして他でも使いたいと考えています。 画像の枚数は2枚から最大4枚で変動します。 画像とタイトル文の間に不可視ラインを入れて1列4行のテーブルでもOKと考えております。 手を入れたいHTML （写真3枚の場合。） <BODY> <CENTER> <TABLE border="1" width="750"> <TBODY> <TR> <TD align="center">1行目</TD> </TR> <TR> <TD>2行目 ここに写真3枚横並び <ｂｒ> 写真1 写真2 写真3 </TD> </TR> <TR> <TD align="center">3行目</TD> </TR> </TBODY> </TABLE> </CENTER> </BODY>
- 締切済み
- HTML
- テーブルに画像を入れると、テーブルの幅が広がってしまいます
HTML初心者の者です。 ３行２列のテーブルを作り、左側の列に縮小した画像を入れたのですが、左側の列が画面いっぱいに広がってしまい、画像の幅に合わせて幅を狭くすることが出来ないでいます。 どうしたら、画像の幅に合わせて左列の幅を狭くすることが出来るでしょうか。 その部分のHTMLは、以下の通りです。 <table border="0" align="center"> <tr> <td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> <tr> </td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> <tr> </td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> </table>
- ベストアンサー
- HTML
- テーブル<TD>の幅の固定
テーブルのTD幅をWIDTHで指定しているのですが、入力するテキストによって幅が動いてしまいます。 例） <table width="50"> <tr> <td width="10">AAAAAAAAAAAAAAAA</td> <td width="40">AA</td> </tr> </table> というような場合、幅の狭い方のセル幅が広くなってしまいます。 また逆に広い方が何度も改行させられて出力されたり、出力させたいテキストによって、いかようにも幅が変更されてしまいます。 他のサイトなども色々調べてみて、半角英数字の場合は特に顕著ということも書かれてあったのですが、半角英数字の出力は必須なんです。 （全角文字の場合でも、完全に固定とはなりませんでした） やっぱり完全にテーブルのセル幅を固定するのはムリなのでしょうか？ 何か解決方法はありますでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- テーブルの幅をデフォルトに戻すcssがわかりま
<html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。
- ベストアンサー
- HTML
- テーブルの幅 余白をなくすことは可能ですか？
<html> <head> <title>test</title> </head> <style type="text/css"> table { width: 100%; } </style> <body> <table border=1> <tr><th>a</th><th>b</th></tr> <tr><td>1</td><td>2</td></tr> </table> </body> </html> のように テーブルの幅を１００％にしても 両端に余白が出来てしまいますが この余白をなくすことは可能ですか？ 添付画像はIEで表示させた状態ですが ファイアフォックスなど他のブラウザで表示させても余白が出来ます。
- ベストアンサー
- HTML
- テーブルの入れ子について
このようにテーブルを入れ子にするのは不可能なのでしょうか？ <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td colspan="4"> <table> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </td> </tr> </table> ｃｓｓなどでいろいろと設定しても、 「5・6・7・8」のセルが「１」のセルの幅にしかなりません。 colspanしているセル全体にテーブルを置きたいのですが・・・。 間違いを教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- テーブルの幅指定について
<html> <head></head> <body> <table border width="800" align="center"> <tr> <td>１日目</td> <td width="200">7:00駅集合→8:00新幹線出発→15:00宿着</td> </tr> <tr> <td>２日目</td> <td>10:00宿出発→12:00新幹線出発→17:00駅着</td> </tr> </table> </body> </html> ・・・というページを作ります。注目して欲しいのは１行目の２番目のセルのwidth="200"です。 ネスケ(7.02)で見た場合、幅は200になりません。指定しないときと変わらない幅になります。 IE6の場合、セルの幅は変わらないままなのですが、どうやら、中の文字は200が効いているらしく、途中で改行になってます。 次に上のファイルにドキュタイプ宣言 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> をつけてみました。 そうすると、ネスケでは、指定通りセル幅200になりましたが、IEは変わった感じがしませんでした。 これは、ドキュタイプ宣言をつけたネスケが正しい動きをし、IEの動きはバグと考えてよいのでしょうか？ 普通に考えると、ドキュタイプのネスケの表示が１番正しい気がするのですが・・・
- ベストアンサー
- HTML
- テーブル幅が固定できない
cssに「table-layout: fixed;」を記載してテーブルの幅が固定になるように設定しています。 設定していますが、ブラウザの幅を狭めると テスト１|テスト２|テスト３ と表示されていたものが テスト１ テスト２ テスト３ と、レイアウトが崩れてしまいます。 <table>、<tr>、<td>タグにつけてみましたが、全て崩れてしまいます。 幅や高さ等も指定していますが、何かが足りないのでしょうか。
- ベストアンサー
- CSS
お礼
ありがとうございます。教えていただいたリンク、明日トライしてみます（今宵は、ばてましたので…）。