写真レイアウト

写真のみバージョンです。横に２枚並びます。スマートフォンでは横並びせずに縦に並びます。

写真のみバージョンです。横に３枚並びます。スマートフォンでは横並びせずに縦に並びます。

写真のみバージョンです。横に４枚並びます。スマートフォンでは横に２枚並びます。

写真＋テキストバージョンです。

写真のバージョンは、テキストも挿入できます。横に２枚並びます。スマートフォンでは横並びせずに縦に並びます。

写真のバージョンは、テキストも挿入できます。横に３枚並びます。スマートフォンでは横並びせずに縦に並びます。

写真のバージョンは、テキストも挿入できます。横に４枚並びます。スマートフォンでは横に２枚並びます。

写真のオプション

写真にホバーしたした際、拡大するには、写真を囲んでいるdiv要素に「.zoom」クラスをつけてください。その際、div要素には表示させたい画像サイズを指定してください。

写真にホバーしたした際、暗かった画像を明るくするには、写真を囲んでいるdiv要素に「.overlay」クラスをつけてください。その際、div要素には表示させたい画像サイズを指定してください。

「.zoom」クラスと「.overlay」クラスを併用することも可能です。

ボタンデザイン

基本は左寄せですが、「.center」クラスを付ければ中央寄せ、「.right」クラスを付ければ右寄せになります。

お知らせ

20XX-01-01

更新情報などを掲載するのに便利なデザインです。dlタグに『class="information"』を追加してください。

20XX-01-01

更新情報などを掲載するのに便利なデザインです。

サンプルタグについて

以下、サンプルタグになります。ご利用の際は参考にしてみてください。

h2タグ

h3タグ

h4タグ

h5タグ

h6タグ

強調（em） より強い強調（strong） 追加（ins） 削除（del） テキストアンカー

引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。引用部分です。

リスト

普通のリスト

• 普通のリスト1
• 普通のリスト2
• 普通のリスト3

番号付きリスト

1. 番号付きリスト1
2. 番号付きリスト2
3. 番号付きリスト3
   li要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。
   

定義リスト

定義リスト1

定義した用語の説明

定義リスト2

定義した用語の説明

定義リスト3

定義した用語の説明
dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。

テーブル

見出し1 見出し1	見出し2	見出し3	見出し4	見出し5
セル1 セル1	セル2	セル3	セル4	セル5
セル1	セル2	セル3	セル4	セル5
セル1	セル2	セル3	セル4	セル5

見出し1	セル1 セル1	セル2	セル3	セル4	セル5
見出し2 見出し2	セル1	セル2	セル3	セル4	セル5
見出し3	セル1	セル2	セル3	セル4	セル5
見出し4	セル1	セル2	セル3	セル4	セル5
見出し5	セル1	セル2	セル3	セル4	セル5