- ベストアンサー
画面幅に合わせてテーブルのカラム数を変えたい
TABLEの１行はTRの中にTDを羅列して定義しますが、ユーザのブラウザの画面幅が大きいときは５カラム、小さいときは３カラムなどと、自動的に加減するやりかたが、HTMLやCSS（など）にありますでしょうか？ （各セルがまったく同一性質のリンクテキストなので、１行のカラム数が変わっても意味的にはまったく問題ありません。）
- みんなの回答 （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～～で仕分けることは可能なようです。
お礼
ありがとうございます。教えていただいたリンク、明日トライしてみます（今宵は、ばてましたので…）。