Team:Kyoto/ExpertInterview

<!DOCTYPE html> フリーHTML5/CSS3ホームページテンプレート NO.008

SAMPLE SITE

写真レイアウト

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

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

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

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

写真左・テキスト右

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

写真右・テキスト左

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

写真中央・テキスト中央

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

写真のバージョンは、テキストも挿入できます。

見出し（左）

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し（左）

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し（左）

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

見出し（左）

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

写真のオプション

写真にホバーしたした際、拡大するには、写真を囲んでいる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
ページのトップへ戻る