12月 08

結局はテーブルに戻る?

HTML5のタグのお話です。
ちょっと前にも書きましたが、「表ではない」ものにtableを使わないように調整しているわけです。
しかし「表ではない」ものが何かという定義もあいまいなままですね。
表(table)の1行(row)を抜き出して、同じ構図のまま表示する場合は表とする。
表(table)の1行(row)を抜き出して、構造を変えて表示する場合はすでに表ではないとします。
つまり、横に長いrowを詳細表示するために縦方向に書きなおす場合は、表としての構造を成さなくなりtableは使えなくなります。
rowは結果的にcolumn(cell)の箇条書きになるので、ulタグ一択になると考えます。
ただし、九九表のように縦も横も同じ内容の場合は表だと仮定できます。
とまぁ、ややこしいのでタイミングによっては微妙に解釈を変えるかもしれませんが。

試行錯誤したのですが、結局はdisplayプロパティのtable、table-row、table-cellに回帰せざるを得ませんでした。


ul.table {
display: table;
}
ul.table li {
display: table-row;
}
ul.table li>* {
display: table-cell;
}

表ではないのにrowspan、colspanを必要なら、構造を再検討するということにしています。
これで落ち着くのかな?

11月 30

HTMLにおけるテーブルレイアウトの苦悶

HTMLにおいて、テーブルレイアウトは使用すべきではない。
はいそうですかと、表ではないコンテンツをtableからulに変更するものの、
スタイルシートでは結局display:tableを使用することになる。
float:leftdisplay:inline-blockを駆使しても、
縦方向のデザインに問題が生じる。
tableタグへいかに似せるかに労力を割くこの現状は果たして是か非か。

11月 10

スタイルシートのfloatが使いこなせない

回り込みを指定するfloatですが、いまいち使いこなせない。
「float:left」がいいのか、「display:inline」または「display:inline-block」なのか判断しかねる場面が多い。
何故回り込みをさせるのか意味を考えればどれかは特定できるのだけれど、実際のレンダリングを考えるそうもいかないこともある。
これはおそらくデザインの問題なのかもしれないけれど。

ブロックの中で「float」させておいて、次のブロックがくいこまないようにするためには「overflow:hidden」をかませるのだけれど、「float」させたブロックの中で折り畳みメニュー的なものを入れたい場合、ブロックの領域をはみ出るものは隠れてしまう。
これが大問題。

結局は大きさ固定するために「min-height」で逃げたりしても、後で文章の長さがかわってまた同じ悩みにはまるのはいい加減もううんざりだ。
うん、やはりデザインの問題なのだろうけど、どうしようもない。