各種サンプル

このページでは各HTMLタグ、各種「classセレクタ」の表示サンプルを掲載しています。

段落のサンプル

通常の文章を掲載する場合は、段落タグ(Pタグ)を「div class = " txt "」で囲むことにより、
段落後に適度なマージンが入ります。

段落後にマージンを開けずに改行したい場合は、BRタグを使用してください。
「div class = " txt "」はテキストに限らず、画像などのレイアウトを調整する際にも利用できます。

リンクテキストサンプルです

見出しタグのサンプル

見出しタグ H3

見出しタグ H4

見出しタグ H5
見出しタグ H6

引用タグ(blockquote)のサンプル

引用タグのサンプルです。
掲載内容を「blockquoteタグ」で囲みます。

リストタグ(ul、ol)のサンプル

ULタグ

  • 通常のリストタグ(ul)
  • 通常のリストタグ(ul)
  • 通常のリストタグ(ul)

OLタグ

  1. 番号付きリストタグ(ol)
  2. 番号付きリストタグ(ol)
  3. 番号付きリストタグ(ol)

表(tableタグ)

class「tableA」

TH TD TD TD TD
TH TD TD TD TD

class「tableB」

TH TD
TH TD

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

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

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

画像

通常の画像

テンプレートにより枠が表示されます。

サンプル サンプル サンプル

画像にリンクをつけた場合

サンプル サンプル サンプル

 

画像+テキスト

サンプル画像

右に画像、左にテキスト等が掲載できるレイアウトです。

サンプルテキスト このサービスは〜テキストテキスト
テキストテキスト テキストテキスト
サンプルテキスト このサービスは〜
サンプルテキスト このサービスは〜

写真ギャラリーサンプル

画像アルバム風のレイアウトとポップアップのサンプルです。
ポップアップにはjQueryのプラグイン「thickbox」を使用しています。

下記のようなポップアップを導入するには、「head 〜 /head」の間、/head の直前に下記の2行を追加してください。

画像タグ(img)をアンカータグ(a)で囲み、アンカーの「href」にクリック後に表示したい画像のURLを指定してください。

  • サンプル画像
  • サンプル画像
  • サンプル画像
  • サンプル画像
  • サンプル画像
  • サンプル画像
  • サンプル画像
  • サンプル画像
  • サンプル画像
  • サンプル画像