画面幅に合わせてテーブルのカラム数を変えたい

Question

TABLEの１行はTRの中にTDを羅列して定義しますが、ユーザのブラウザの画面幅が大きいときは５カラム、小さいときは３カラムなどと、自動的に加減するやりかたが、HTMLやCSS（など）にありますでしょうか？
（各セルがまったく同一性質のリンクテキストなので、１行のカラム数が変わっても意味的にはまったく問題ありません。）

abril · Accepted Answer

>> ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です
>よろしかったら、やり方を教えてください。

過去にulでアイテムを並べる方法について回答したスレッドがありますので、そちらを参考にでもして下さい。
http://oshiete1.goo.ne.jp/qa3870470.html

要は子要素のliを左にフロート（floatの意味は読んで字のごとく「浮かせる」です。）させることでコラム的に見せる、という事です。上記では固定値の幅の中でアイテムを一行に2個づつになる様に並べていますが、ウィンドウサイズによって流動的にするのであれば、ulの全体幅は決めず自動もしくは100%で、という事になります。

> いろいろ調べたら、JavaScriptでwindow.innerWidthを取得し、大中小３種類ぐらいのテーブルをif～～で仕分けることは可能なようです。

ANo.2の回答者様も言及されていますが、内容が「表」として相応しいものなら、tableでマークアップした上でお好きな方法でどうぞ。
「各セルがまったく同一性質のリンクテキスト」という文を読む限りでは、内容は単なる「リスト」の様に見受けられましたので、ならばulを使用するのが一番妥当ではないか、と思ったまでです。

0wl · Answer

勉強にさける時間が２時間程度なら
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 · Answer

テクニックではなく、「基本」ですよ。と一応言っといて、
もしかしたら、表にしたかったのは罫線？と思いましたので、先のheadのstyle｛　　　｝内の
どこかの、「；」の後ろに
border:red 3px solid;
を追加してみてください。赤い、3ピクセルの実線で囲まれます。

さらに、すき間が欲しければ、罫のそとなら
margin:20px;/*ボックスの外側の空きです*/
罫と文字の間なら
padding:20px;/*ボックスの内側の空きです*/
中身をピンクで塗りたければ、
background:#FFDFFF;
等を追加してみてください。

これらはすべてｃｓｓの基本です。テクニックではありません。興味があれば文章構造・論理構造などにも言及した本やサイトで学ばれることをお奨めします。罫線をひくにはこのタグ、太くするのは<b>みたいな説明の場所での入門は混乱のもとです。避けられることをお奨めします。

0wl · Answer

それ、表じゃなく、見栄え目的に表にされてるだけですよね？ｃｓｓは見栄えと構造の分離を推奨します。だから、意味的に表でないのに見た目に段にしたいからと、tableにすることを奨めません。多分、全体に効くのでセレクタを理解していないと実用は難しいと思います。何かの子要素のp指定とわかれば簡単なのですが、今言われていることだけですとこんな感じですね。高さががたがただとちょっと難ありですが、基本的には以下での中にを入れます部分は、これまで、の中身をでななく

あああああ

いいいいい

ううううう

えええええ

おおおおおなどとします

かかかかか

ききききききききききき

くくくくくくくくくくく

けけけけけけけけけけけけけけけけけけけけけけけけ

それで、ブラウザの幅をいろいろ伸ばしたり縮めたりして試してください。

abril · Answer

> ユーザのブラウザの画面幅が大きいときは５カラム、小さいときは３カラムなどと、自動的に加減するやりかたが、HTMLやCSS（など）にありますでしょうか？

「HTMLやCSS」にはその様な機能はありません。HTMLはマークアップ言語であり、CSSはスタイルを定義するものであり、上記の様な自動生成的な事はできません（ちなみにコラム数を増減するのではなく、ウィンドウサイズに応じてコラム幅を自動的に拡大・縮小させる、というのであればCSSでできます）。
※ただし、これがtableではなく、ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です（色々レイアウト上の条件はありますが）。

画面幅に合わせてテーブルのカラム数を変えたい

>> ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です

勉強にさける時間が２時間程度なら

テクニックではなく、「基本」ですよ。

この回答への補足

それ、表じゃなく、見栄え目的に表にされてるだけですよね？

> ユーザのブラウザの画面幅が大きいときは５カラム、小さいときは３カラムなどと、自動的に加減するやりかたが、HTMLやCSS（など）にありますでしょうか？

この回答への補足

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング