No.3ベストアンサー
- 回答日時:
>> ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です
>よろしかったら、やり方を教えてください。
過去にulでアイテムを並べる方法について回答したスレッドがありますので、そちらを参考にでもして下さい。
http://oshiete1.goo.ne.jp/qa3870470.html
要は子要素のliを左にフロート(floatの意味は読んで字のごとく「浮かせる」です。)させることでコラム的に見せる、という事です。上記では固定値の幅の中でアイテムを一行に2個づつになる様に並べていますが、ウィンドウサイズによって流動的にするのであれば、ulの全体幅は決めず自動もしくは100%で、という事になります。
> いろいろ調べたら、JavaScriptでwindow.innerWidthを取得し、大中小3種類ぐらいのテーブルをif~~で仕分けることは可能なようです。
ANo.2の回答者様も言及されていますが、内容が「表」として相応しいものなら、tableでマークアップした上でお好きな方法でどうぞ。
「各セルがまったく同一性質のリンクテキスト」という文を読む限りでは、内容は単なる「リスト」の様に見受けられましたので、ならばulを使用するのが一番妥当ではないか、と思ったまでです。
No.5
- 回答日時:
勉強にさける時間が2時間程度なら
http://www.kanzaki.com/docs/html/lesson1.html
http://www.kanzaki.com/docs/html/htminfo17.html
をセットで。テーブルレイアウト経験者は勘違いしていることが多いので、まっさら以下からのスタートと思って丁寧に読んでみてください。
もうすこしじっくり勉強できるなら
http://www.kanzaki.com/docs/htminfo.html
あたりを抑えて。
ベストといわれれば、kanzakiさんの所を推しますが、ちょっと、固い感じです。基本の基本だけサイトです。難しくないです。くれぐれもこれまでの知識は捨てて真っ白頭で読んで、試してみてください。
基本を抑えたら、リファレンス(プロパティの辞書のようなもの)で何ができるのかサーっとみて、実践。おっと!こんなんしたいと思うページを見つけたら、ソースを見てこうなってるんだぁと人のアイデアを盗んでいけば、OK。お手本にならない悪いソースも基本がわかっていれば見分けられる筈です。実践していけば、よく使うことはすぐ覚えちゃうほど少ないです。
先に、float:left;と書きましたが、実はある場所をインラインにしてもできます。とやり方はいろいろあります。適材適所ということで。floatは大きな問題があるのです。
インライン・ボックスの違い・フロートのクリア・ボックスモデルあたりが躓きやすいし、モードの違いで解釈が違うことも把握していけば、正しくcssを書いても、各ブラウザの方言に書き直さないと望む表示はできないのだけど、……と言うことはまだ先のお話。
本を希望のようですが、入門書は全く知らないです。サイトで勘弁してください。
0wlさん、そのほかのみなさま、ありがとうございました。
今度時間があるとき、floatなるものを究めたいと思います。
kanzakiサイトも、じっくり読ませていただきます。
No.4
- 回答日時:
テクニックではなく、「基本」ですよ。
と一応言っといて、もしかしたら、表にしたかったのは罫線?と思いましたので、先のheadのstyle{ }内の
どこかの、「;」の後ろに
border:red 3px solid;
を追加してみてください。赤い、3ピクセルの実線で囲まれます。
さらに、すき間が欲しければ、罫のそとなら
margin:20px;/*ボックスの外側の空きです*/
罫と文字の間なら
padding:20px;/*ボックスの内側の空きです*/
中身をピンクで塗りたければ、
background:#FFDFFF;
等を追加してみてください。
これらはすべてcssの基本です。テクニックではありません。興味があれば文章構造・論理構造などにも言及した本やサイトで学ばれることをお奨めします。罫線をひくにはこのタグ、太くするのは<b>みたいな説明の場所での入門は混乱のもとです。避けられることをお奨めします。
No.2
- 回答日時:
それ、表じゃなく、見栄え目的に表にされてるだけですよね?
cssは見栄えと構造の分離を推奨します。だから、意味的に表でないのに見た目に段にしたいからと、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さんの回答とも関連があるテクニックなんでしょうね。
No.1
- 回答日時:
> ユーザのブラウザの画面幅が大きいときは5カラム、小さいときは3カラムなどと、自動的に加減するやりかたが、HTMLやCSS(など)にありますでしょうか?
「HTMLやCSS」にはその様な機能はありません。HTMLはマークアップ言語であり、CSSはスタイルを定義するものであり、上記の様な自動生成的な事はできません(ちなみにコラム数を増減するのではなく、ウィンドウサイズに応じてコラム幅を自動的に拡大・縮小させる、というのであればCSSでできます)。
※ただし、これがtableではなく、ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です(色々レイアウト上の条件はありますが)。
この回答への補足
いろいろ調べたら、JavaScriptでwindow.innerWidthを取得し、大中小3種類ぐらいのテーブルをif~~で仕分けることは可能なようです。
補足日時:2008/06/25 12:38お答え、ありがとうございます。やはり、ないですか、残念です。
> ulを使ってリストアップするのであれば、「一行に表示させるアイテムの数」をウィンドウサイズに応じてフレキシブルにする事はCSSで可能です
よろしかったら、やり方を教えてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- その他(プログラミング・Web制作) google formsで回答者をスプレッドシートに記載する方法 1 2023/06/23 11:22
- Oracle 参照関係のフィールドについて 1 2023/05/27 17:49
- PostgreSQL 列が存在しないと言われる 2 2023/02/10 18:33
- MySQL PHPとMySQLを使った掲示板の作り方 1 2022/06/02 13:00
- その他(プログラミング・Web制作) google formsを使ったタスク依頼フォーム作成におけるご相談 1 2023/06/22 15:55
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- IT・エンジニアリング ドメイン駆動設計の値オブジェクトについて質問 1 2023/05/13 02:50
- MySQL 共通点はあります。何が違うのでしょうか? 1 2023/01/27 05:22
- UNIX・Linux sedでの正規化 2 2022/05/10 11:39
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
CSSで特定のテーブルだけに...
-
HTML tableのセルにtextareaを...
-
画面幅に合わせてテーブルのカ...
-
HTML5で、テーブル内tdタグの高...
-
<th>タグを使っても太字にしな...
-
テーブル内のセル間にスペース...
-
テーブルとテーブルの間隔について
-
テーブルの高さを100%にしたけ...
-
<fieldset>タグについて
-
latex使い方
-
HTMLのテーブルをExcelにCopy&P...
-
HP製作時、縦の点線作成
-
DBを使わないDataGrid
-
簡単に文字間とかに空白入れたい
-
table表を横に並べる際の間隔指定
-
cssで、1行2段のtableを記述す...
-
html table の中のボーダーが二...
-
tableを縦に続けるとtable間の...
-
tableが縮まらない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
table表を横に並べる際の間隔指定
-
HTML5で、テーブル内tdタグの高...
-
HTML tableのセルにtextareaを...
-
(HTML)Tableを任意の位置に置...
-
テーブル内のセル間にスペース...
-
textareaの外側の文字が下付き...
-
同じ幅指定のつもりなのに、ブ...
-
html5のテーブル内でdivのタブ...
-
<fieldset>タグについて
-
tableの位置がIEとその他ブラウ...
-
tableを縦に続けるとtable間の...
-
画面幅に合わせてテーブルのカ...
-
HTMLのテーブルをExcelにCopy&P...
-
ラインを端から端まで画面いっ...
-
tableのcellpadding="0" cellsp...
-
ホームページのテキストを折り...
おすすめ情報