本文へスキップします。

H1

★サンプルー基本

ページング
見出し

見出しH1
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

見出しH2
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

見出しH3
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

見出しH4
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

見出しH5
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
見出しH6
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
文字のサイズ

文字のサイズ

通常サイズの文字

クラスを付与しないときの文字サイズです。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

拡大サイズの文字

[txtLarge]クラスを付与することで、文字サイズを大きくすることができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

縮小サイズの文字

[txtSmall]クラスを付与することで、文字サイズを小さくすることができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

文字の色

文字の色

赤色の文字

[colorRed]クラスを付与することで、テキストを赤色にすることができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

灰色の文字

[colorGray]クラスを付与することで、テキストを灰色にすることができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

文字の太さ

文字の太さ

太い文字

[txtBold]クラスを付与することで、テキストを太くすることができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

通常の太さの文字

[txtNormal]クラスを付与することで、テキストの太さを通常にすることができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

リンク

リンク

リンクにカーソルを乗せると、以下のようなデザインになります。

通常のリンクテキスト

リンクテキスト

通常のリンク画像

アイコン付きリンク

アイコン付きリンク

ファイルアイコン付きリンク

aタグをPDF、Word、Excel、ZIPファイルへリンクすると、ファイル形式を表すアイコンが付きます。

拡張子が「.pdf」のPDFリンク

リンクテキスト

拡張子が「.doc」または「.docx」のWordリンク

リンクテキスト

拡張子が「.xls」または「.xlsx」のExcelリンク

リンクテキスト

拡張子が「.zip」のZipリンク

リンクテキスト

外部リンクアイコン付きリンク

aタグに[externalLink]クラスを付与することで、外部リンクを表すアイコンが付きます。

アイコンなしリンク

aタグに[noIcon]クラスを付与することで、アイコンが表示されなくなります。

リンクボタン

リンクボタン

aタグ、またはaタグの親(divタグやulタグなど)に[linkBtn]クラスを付与することで、以下のようなボタンデザインになります。

通常サイズ [linkBtn]

拡大サイズ [linkBtn bulge]

リンクボタン

レイアウトパーツとの組み合わせ例:[linkBtn bulge layoutItem inlined]

縮小サイズ [linkBtn shrink]

ボタンを横幅いっぱいにする [linkBtn full]

リンクボタン

レイアウトパーツとの組み合わせ例:[linkBtn full layoutItem col3]

レイアウトパーツとの組み合わせ例:[linkBtn bulge full layoutItem inlined]

リンクテキスト

リンクテキスト

aタグ、またはaタグの親(divタグやulタグなど)に[linkTxt]クラスを付与することで、以下のようなテキストデザインになります。

[linkTxt]

リンクテキスト

レイアウトパーツとの組み合わせ例:[layoutItem col3]

レイアウトパーツとの組み合わせ例:[layoutItem inlined]

[linkTxt full]

リンクテキスト

レイアウトパーツとの組み合わせ例:[layoutItem col3]

レイアウトパーツとの組み合わせ例:[layoutItem inlined]

ページ内リンクボタン

aタグ、またはaタグの親(divタグやulタグなど)に[linkInpage]クラスを付与することで、以下のようなボタンデザインになります。

[linkInpage]

リンクボタン

レイアウトパーツとの組み合わせ例:[layoutItem col3]

レイアウトパーツとの組み合わせ例:[layoutItem inlined]

[linkInpage full]

リンクボタン

レイアウトパーツとの組み合わせ例:[layoutItem col3]

レイアウトパーツとの組み合わせ例:[layoutItem inlined]

リスト

リスト

ulリストタグ

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

olリストタグ

  1. テキストテキスト
  2. テキストテキスト
  3. テキストテキスト
テーブル

テーブルデザイン

標準の表デザイン

tableタグに[tableBasic]クラスを付与することで、以下のようなテーブルデザインになります。

上ヘッダセルのタイプ

テーブルヘッダ テーブルヘッダ テーブルヘッダ
テーブルデータ テーブルデータテーブルデータ テーブルデータテーブルデータテーブルデータ

左ヘッダセルのタイプ

テーブルヘッダ テーブルデータ テーブルデータテーブルデータ
テーブルヘッダ テーブルデータ テーブルデータテーブルデータ
テーブルヘッダ テーブルデータ テーブルデータテーブルデータ

上+左ヘッダセルのタイプ

テーブルヘッダ テーブルヘッダ テーブルヘッダ
テーブルヘッダ テーブルデータ テーブルデータテーブルデータ
テーブルヘッダ テーブルデータ テーブルデータテーブルデータ

スマホで閲覧した時もPC表示と同様のレイアウトで表示する例:[tableBasic notBlock]

スマホ最適化されているページをスマホで閲覧した場合、各セルの横幅が幅いっぱいに広がり、左上のセルから順に縦に配置されます。
[tableBasic]に[notBlock]クラスを付与することで、スマホで閲覧した時にPC表示と同様のレイアウトで表示することができます。

テーブルヘッダ テーブルヘッダ テーブルヘッダ
テーブルヘッダ テーブルデータ テーブルデータテーブルデータ
テーブルヘッダ テーブルデータ テーブルデータテーブルデータ
テーブルの幅、余白調整

テーブルの幅、余白調整

幅100%のテーブル

tableタグに[tableBasic full]クラスを付与することで、テーブル全体の幅が100%になります。

テーブルヘッダ テーブルヘッダ テーブルヘッダ
テーブルデータ テーブルデータテーブルデータ テーブルデータテーブルデータテーブルデータ

セルの余白が広いテーブル

tableタグに[tableBasic bulge]クラスを付与することで、セルの余白が大きくなります。

テーブルヘッダ テーブルヘッダ テーブルヘッダ
テーブルデータ テーブルデータテーブルデータ テーブルデータテーブルデータテーブルデータ

セル余白の狭いテーブル

tableタグに[tableBasic shrink]クラスを付与することで、セルの余白が小さくなります。

テーブルヘッダ テーブルヘッダ テーブルヘッダ
テーブルデータ テーブルデータテーブルデータ テーブルデータテーブルデータテーブルデータ
テーブルのセルデザイン

テーブルのセルデザイン

色付きのセル(中央のtdタグにクラス[colored]を付与)

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。

一定幅に固定されたセル(中央のtdタグにクラス[fixed]を付与)

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。

空セルを左上などに作る場合(左上のthタグまたはtdタグにクラス[emptyCell]を付与)

テーブルヘッダ テーブルヘッダ
テーブルヘッダ この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。
装飾されたボックス

装飾されたボックス

背景色をもったボックス

[boxColored]クラスを付与することで、ボックスに灰色の背景色がつきます。

通常の余白のボックス [boxColored]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

[boxColored blue]クラスを付与することで、ボックスに薄い青色の背景色がつきます。

通常の余白のボックス [boxColored blue]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

[boxColored green]クラスを付与することで、ボックスに薄い緑色の背景色がつきます。

通常の余白のボックス [boxColored green]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

余白が広いボックス [boxColored bulge]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

余白が狭いボックス [boxColored shrink]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

枠線をもったボックス

[boxBordered]クラスを付与することで、ボックスに灰色の枠線がつきます。

通常の余白のボックス [boxBordered]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

青色の余白のボックス [boxBordered blue]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

緑色の余白のボックス [boxBordered green]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

余白が広いボックス [boxBordered bulge]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

余白が狭いボックス [boxBordered shrink]

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

装飾された文字

装飾された文字

緑色の装飾文字

[txtLargeCyan]クラスを付与することで、緑色の装飾文字にすることができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

青色の装飾文字

[txtLargeBlue]クラスを付与することで、青色の装飾文字にすることができます。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。