Sample Site

1カラムレイアウト

<body>を<body class="c1">にすると1カラムレイアウトになります。
トップページなどid名がついている場合は、<body id="top" class="c1">です。
すでにclass指定が入っている場合は、<body class="sample c1">など半角スペースを入れて指定します。

ずっと1カラムで使う場合は

上のclass指定をしてもhtml上にsubブロックは残るので、subブロックを使わない場合はsubブロックのhtmlごと削除して下さい。

MENU(横長レイアウト)

<section class="list">にするとこのように横長ボックスになります。

写真の説明

タイトル

サンプルテキスト。サンプルテキスト。サンプルテキスト。

写真の説明

タイトル

サンプルテキスト。サンプルテキスト。サンプルテキスト。

写真の説明

タイトル

サンプルテキスト。サンプルテキスト。サンプルテキスト。

MENU(コンパクトレイアウト)

<section class="list compact">にするとこのようにコンパクトボックスになります。

写真の説明

タイトル

サンプルテキスト。サンプルテキスト。サンプルテキスト。

写真の説明

タイトル

サンプルテキスト。サンプルテキスト。サンプルテキスト。

写真の説明

タイトル

コンパクトタイプは沢山の文字を詰め込みすぎると途中で切れてしまいまうのでご注意下さい。コンパクトタイプは沢山の文字を詰め込みすぎると途中で切れてしまいまうのでご注意下さい。コンパクトタイプは沢山の文字を詰め込みすぎると途中で切れてしまいまうのでご注意下さい。

MENU(サークルボックス)

<section class="circle">にするとサークルのブロックになります。文字を入れる事は想定していないので画像だけ表示させたい時に使って下さい。

写真の説明
写真の説明
写真の説明
写真の説明
写真の説明
写真の説明
写真の説明
写真の説明

この見出しはh2タグです

このボックスは、class="box1"と指定すれば出ます。