ページへ戻る

− Links

 印刷 

<table> を <div> に :: XOOPS マニア

UsersWiki:nao-pon/blog/2005-04-02

<table> を <div> に anchor.png[1]

Tag: 自宅サーバー[2]
このサイトのページ基本構造を <table> から <div> に書き換えてみました。

<table> は「表示が遅い」とか、「そもそもレイアウトに使うものではない」とかいうことなので、頑張ってみましたが完全に同じように表示させるのは難しいです。

でも、ページを読み込みながら表示するようになったので、体感的に表示が速く感じるようです。

あと、本文部分を左ブロックより先に出力するようにしたので、SEO的にも効果あるかもしれません。

表示が崩れる場合もあるので、テーマ選択で div と table を選べるようにしておきました。 :D

  • 「本文部分を左ブロックより先に出力するようにした」、なるほど、そのためですか、左ブロックだけ表示されない場合があります。「表示が崩れる場合もあるので...」例えばこのページは、左ブロックと本文の間にかなりのスペースができてしまっています。モニターサイズに影響されるためでしょうか。 -- 通りすがりさん[3] 2005-04-02 (土) 11:54:28 [4]
  • IEの表示幅に影響されるの誤りでした。 -- 通りすがりさん[3] 2005-04-02 (土) 11:56:22 [5]
  • 両サイドブロックをピクセルで固定したかったのですが、どのようにしたらよいのか解らなかったので、JavaScript で逃げています。
    JavaScriptが有効でないときのスタイルを調整してみました。
    また、左ブロックが表示されていないときはコンテンツの内容がコンテンツボックスの幅より大きくなったときIEがBOXを拡張してしまうので、結果表示できなくなって、ページ下部のほうに表示されていると思います。 -- nao-pon[6] 2005-04-02 (土) 22:11:36
  • ああ、早くなりましたね。私もユーザーに「重い」とよく言われるので、なるべくテーブルを使わないように使用しているのですが……左ブロックだけでもdivでまとめちゃおうかなぁ -- GuymHaga[7] 2005-04-02 (土) 22:48:35 [8]
  • 左ブロック、きれいに表示されるようになりました。 -- 通りすがりさん[3] 2005-04-03 (日) 03:49:03 [9]

Last-modified: 2005-04-03 (日) 03:49:03 (JST) (7579d) by nao-pon
ページ別名: 未設定
ページオーナー: nao-pon
サイト管理者: nao-pon

Links list

(This host) = https://xoops.hypweb.net

  1. (This host)/modules/UsersWiki/person/nao-pon/blog/2005-04-02#ydecc886
  2. (This host)/modules/UsersWiki/index.php?cmd=lsx&rtag=%BC%AB%C2%F0%A5%B5%A1%BC%A5%D0%A1%BC
  3. (This host)/modules/UsersWiki/person/%E9%80%9A%E3%82%8A%E3%81%99%E3%81%8C%E3%82%8A%E3%81%95%E3%82%93
  4. (This host)/modules/UsersWiki/?plugin=areaedit&areaedit_no=0&page=nao-pon%2Fblog%2F2005-04-02&inline_plugin=1&inline_preview=5&digest=9247a663f2000db84883c7eca00a4931
  5. (This host)/modules/UsersWiki/?plugin=areaedit&areaedit_no=1&page=nao-pon%2Fblog%2F2005-04-02&inline_plugin=1&inline_preview=5&digest=9247a663f2000db84883c7eca00a4931
  6. (This host)/modules/UsersWiki/person/nao-pon
  7. (This host)/modules/UsersWiki/person/GuymHaga
  8. (This host)/modules/UsersWiki/?plugin=areaedit&areaedit_no=3&page=nao-pon%2Fblog%2F2005-04-02&inline_plugin=1&inline_preview=5&digest=9247a663f2000db84883c7eca00a4931
  9. (This host)/modules/UsersWiki/?plugin=areaedit&areaedit_no=4&page=nao-pon%2Fblog%2F2005-04-02&inline_plugin=1&inline_preview=5&digest=9247a663f2000db84883c7eca00a4931