Skip to main content

Rika Y's Library tagged layout →  View Popular

05 Apr 07

ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介


  • エラスティック・レイアウトの場合、以下のように文字サイズ単位で最大幅を指定します。

    div#container {
      max-width: 70em;
    }

    このようにすることで、レイアウトの最大幅が文字のサイズと同期するようになります。
    したがって、レイアウトがウィンドウの幅に左右されることなく、
    幅が広がって1行あたりの文字数が増え、読みづらくなることを防ぐことができます。



    また、以下のように最小幅も同時に指定することでより細密なレイアウトを定義することもできます。

    div#container {
      max-width: 70em;
      min-width: 60em;
    }



24 Dec 06

一行あたりの文字数を制限するリキッドレイアウト - 2xup.org

  • ブラウザ
    IE5
    IE5.5
    IE6
    IE7
    IE5 (mac)
    NN7
    OP7
    OP8
    OP9
    SF
    FF
    CM




    min-width
    no
    no
    no
    yes
    no
    yes
    yes
    yes
    yes
    yes
    yes
    yes

    max-width
    no
    no
    no
    yes
    no
    yes
    yes
    yes
    yes
    yes
    yes
    yes

    min-height
    no
    no
    no
    yes
    no
    yes
    yes
    yes
    yes
    yes
    yes
    yes

    max-height
    no
    no
    no
    yes
    no
    yes
    yes
    yes
    yes
    yes
    yes
    yes
1 - 11 of 11
Showing 20▼ items per page

Selected Tags

Related Tags

Sponsored Links

Ads by Google

Highlighter, Sticky notes, Tagging, Groups and Network: integrated suite dramatically boosting research productivity. Learn more »

Join Diigo