たった１カ所の class を変更するだけでレイアウト変更を実現する XHTML+CSS サンプル

使い方

XHTML 文書をテキストエディタ等で開き、下記の見本に従って class 名を修正するだけでレイアウトを変更できます。（１カラム／２カラム対応）

<div class="section fixed two_columns" id="container">

補足

XHTML 文書１枚と CSS １枚で実現可能ですが、このサンプルでは１枚の XHTML 文書に対して default.css と styles.css を読み込んでいます。

ダウンロード

下記ファイルをダウンロードして任意の場所に解凍し、テキストエディタで index.html ファイルを開いてください。

レイアウトに関する class 名

【幅調整】レイアウト幅調整 class

注意）サイドバー位置 class と同時に指定してください。サイドバー位置を指定していない場合は幅が２カラムの時のものに依存して不格好になります。

• liquid・・・ブラウザウインドウサイズに応じてレイアウト幅可変（極端に大きな画面で閲覧すると１行に表示できる文字数が幅に比例して増え読みにくくなる）
• solid・・・ブラウザウインドウサイズに応じての幅は固定／文字サイズに応じて幅可変（大きな画面で閲覧しても文字サイズをズームすれば体裁が保たれてアクセシビリティが良いレイアウト）
• fixed・・・幅固定（現在普及の閲覧環境に対しては概ね問題はないが、極端に大きな画面で閲覧すると小さくて読みにくくなる）
• 指定なし・・・上で選択したカラム種の幅に依存。カラム種が未選択の場合はブラウザフルウインドウサイズに依存（極端に大きな画面で閲覧すると１行に表示できる文字数が幅に比例して増え読みにくくなる）

【サイドバー位置】サイドバーの位置（レイアウト幅調整 class と同時指定していないと無効になります）

• two_columns・・・２カラム・左サイドバー
• two_columns_right・・・２カラム・右サイドバー
• one_column・・・１カラム
• 指定なし・・・無効

※両方の値を指定しなかった場合は全画面表示レイアウト（１カラム）になります。