Sample Site

MENU(横長レイアウト)

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

写真の説明

タイトル

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

写真の説明

タイトル

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

写真の説明

タイトル

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

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

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

写真の説明

タイトル

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

写真の説明

タイトル

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

写真の説明

タイトル

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

MENU(サークルボックス)

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

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

この見出しはh2タグです

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