デモサイト overflow編

見出しH1

レスポンシブ向けに、overflowでfloatの解除をしたデモサイト。

overflow: auto;

overflow: hidden;

880px以下は1カラム、881px以上は2カラム。

デモサイト

軽量フレームワークを使ってつくるデモサイト

2カラムをベースに、各フレームワークを利用して、ペラのHTMLでシンプルに作成。

floatの解除パターン

回り込みのfloatを解除したサンプル

  • overflow編
  • clearfix編
  • clear:both編

見出し2

見出し2のパラグラフ、30文字

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこ

箇条書きリスト

  • リスト
  • リスト
  • リスト
  • リスト
  • リスト

番号付きリスト

  1. 番号付きリスト
  2. 番号付きリスト
  3. 番号付きリスト
  4. 番号付きリスト
  5. 番号付きリスト
  6. 番号付きリスト
  7. 番号付きリスト
  8. 番号付きリスト
  9. 番号付きリスト
  10. 番号付きリスト

説明リスト

HTML5のdescription list(dl)= 説明リスト

description term(dt)= 説明する言葉
definition / description(dd)= 定義分もしくは説明文
definition / description(dd)= 定義分もしくは説明文
description term(dt)= 説明する言葉
definition / description(dd)= 定義分もしくは説明文
definition / description(dd)= 定義分もしくは説明文

入れ子のテスト

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと

  • あいうえおあいうえおあいうえおあいうえおあいうえお
    • かきくけこかきくけこかきくけこかきくけこかきくけこ
      • たちつてとたちつてとたちつてとたちつてとたちつてと
        • なにぬねのなにぬねのなにぬねのなにぬねのなにぬねの

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと

見出し3

見出し3のパラグラフ、35文字

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそ

見出し4

見出し4のパラグラフ、40文字

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてと

見出し2-1

見出し2のパラグラフ、65文字

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえお

見出し3-1

見出し3のパラグラフ、70文字

あいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこ