Home > Blog > Category: Diary > なんでテーブルでレイアウトしたのか

Fav0 Com10
Mon. 2004.02.16
23:58:48

なんでテーブルでレイアウトしたのか

最初の６案は全てテーブルでレイアウトしてます。
最近ではテーブルでレイアウトするという事はいけない事だ的な風潮になってます。
CSSでやれというのが大人な意見です。

じゃなんでテーブルでやったんかというと、


・たまにレイアウト指定が無視され、とんでもない事になる。
・WinのIEでスクロールがイライラするほどモタつく。

と思ってたからです。

これは定かではありませんが、relative（相対配置）ではなくabsolute（絶対配置）やると解消されるような気がします。いわゆるブログ的な可変のレイアウトではなく、横幅固定のサイズにしちゃうと、CSSだけで割と簡単に段組みレイアウトが出来るという事です。（おそらく）

---------------------------------------

HTML

＜div id="link"＞
リンクたち
・
・
＜/div＞

＜div id="entry"＞
エントリーたち
・
・
＜/div＞

------------

CSS

#link{
position:absolute;
top: 30px;
left: 10px;
width: 180px;
}

#entry{
position:absolute;
top: 30px;
left: 200px;
width: 400px;
}

---------------------------------------

※top（ブラウザの上からの位置）
※left（ブラウザの左からの位置）
※width（そのエリアの横幅）


これは結構簡単なわりに「俺はついにピクセルをコントロールできたぜ！」と満足感に浸れるのでやられてみてはいかがでしょうか？

あと、上記の例の２段組の場合、CSSファイルのleft: 10px;とleft: 200px;をそれぞれ入れ替えるだけで、どかんと左（link）と右（entry）を左（entry）と右（link）にチェンジングできるので簡単だと思います。

------

なんか上手く伝わってないかもしれないので追記します。
JUGEMだから可変がやれないというわけではなく、固定だと楽ですよ的な事を言いたかった訳です。

  1. こんにちは、

    開発日誌で紹介される前にping.bloggers.jpの新着で見つけて、早速、巡回させて頂いています。

    JUGEMの良いところは、開発陣／提供側が大変身近なところですね (^^)

    さて、absolute。大変、強力なんですが、IEだとなにげに引用するためにコピーしようとすると範囲指定がうまく効かなくなったりすることがあります。

    relativeと組み合わせると、うまくいく領域が作れることもあるんですが、今ひとつ、コントロールの仕組みが分かりません。

    この辺りが解決できるテクニックはありませんでしょうか？

    tableは、むやみに避けることもないと思うのですが、要素になにか重いものが含まれると、それが表示されるまで、全体が表示されないというのが困りものですね。

    table-layout:fixed にすると、表示の歳にサイズが決め打ちになっちゃうし。

    細かくtableを分割していくとある程度避けられますが悩ましいですね・・・
    by tiger at 2004-02-17 06:05:21
  2. このサイトの背景画像（ちょっと読みにくい）が、
    http://daiskip.com/
    のスタイルシートなんですが、

    上の方の/*LAYOUT*/のところの３つで３段組を指定してます。
    #logo{
    position:absolute;
    top: 30px;
    left: 10px;
    width: 173px;
    text-align: center;
    }

    #entry{
    position:absolute;
    top: 20px;
    left: 173px;
    width: 440px;
    }

    #link{
    position:absolute;
    top: 30px;
    left: 600px;
    }

    一番右側のリンクが並ぶエリアのみ横幅を指定してないので、エントリー名が長くなっても折り返される事はないような気がします。
    正しいのかどうか定かではありませんが、WinでもMacでも狙い通りに表示されてると思います。
    by daiskip at 2004-02-17 09:54:54
  3. tigerさんへ
    >absolute。大変、強力なんですが、IEだとなにげに引用するためにコピーしようとすると範囲指定がうまく効かなくなったりすることがあります

    これありますね。僕もよくわかってませんが
    float:left;で複数のペインを横付けさせたりして、absoluteを指定せずに段組したりできるようです。
    どっちにしろ横幅を固定しないといけないんですけど。
    by ゆ at 2004-02-17 13:52:14
  4. JUGEMテンプレ開発日記

    さ、思い通りにならない自分のブログはおいといて(笑)、プロのスカッとした仕事を拝見しましょう。
    JUGEMテンプレ開発日記
    ...
    by パンパでガウチョ at 2005-01-23 21:57:52
  5. tableタグでレイアウトする意味

    JUGEMテンプレ開発日記／なんでテーブルでレイアウトしたのかを読んで、思ったことを書きます。
    ※最初に言っておきますが、私はテーブルでのレイアウト否定派ではありません。
    by すりきれ。（仮） at 2005-01-23 21:57:52
  6. テーブルカスタマイズするとすごいことになる理由がやっとわかった♪

    テーブルの所少しでもかえようとするとかなりめちゃめちゃになるので、つらいとおもってたら、開発者さんのページの記事に苦労がかかれていました。

    CSSでやるかテーブルでやるかなんですねぇ、。やっぱし。

    CSSで全部やろうとすれば簡単なものをあえてテーブルでレイ
    by Magic White at 2005-01-23 21:57:52
  7. CSSかテーブルか

    テーブルでできることはCSSでできる、なんてよく聞きますが、実際のとこ段組みレイアウトはテーブルに分があると思うわけです。理由はまぁ、感覚的にということで。

    JUGEMの現行のテンプレートがテーブルレイアウトを採用している理由について、JUGEMテンプレ開発日記で書
    by blog.wad at 2005-01-23 21:57:52
  8. JUGEMに登録

    最近、blogツールなるものに興味津々なので、勢いあまって(?)JUGEMに登録してみました。

    まず最初にやったのはと言うと、テンプレートをごりごりカスタマイズすることだったり……。

    基本的には"simple"というテンプレートをベースにしていますが、マークア
    by from NZ at 2005-01-23 21:57:52
  9. イロイロいじくれました

    まず下の「comments(0)」とかのメニューをdaiskipのJUGEMをパクってしまいました。で、トラックバックの部分もパクってます。ごめんなさーいdaiskipさん。
    at 2005-01-23 21:57:52
  10. どっかんとね。（カラム入れ替えスタイルシート）

    　あ、Mozilla でもできるようになってる。ひとつやってみよう。
    (・e・)
    ひよこまーく　ところで、JUGEMテンプレ開発日記さんの記事に触発されて、代替スタイルシートを準備しました。MacIE では初めっから代替の方が適用されてますが、愉快なので放っておきましょう。変
    by Fuco's Smile Box at 2005-01-23 21:57:52

Same Day Posts.