タグの表示見本

h2タグで囲むとこのような表示になります

h3タグで囲むとこのような表示になります

h4タグで囲むとこのような表示になります

見出し

class="arrow01"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow01">見出し</h2>　　

見出し

class="arrow02"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow02">見出し</h2>　　

見出し

class="arrow03"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow03">見出し</h2>　　

見出し

class="arrow04"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow04">見出し</h2>　　

見出し

class="arrow05"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow05">見出し</h2>　　

見出し

class="arrow06"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow06">見出し</h2>　　

見出し

class="arrow07"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow07">見出し</h2>　　

見出し

class="arrow08"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow08">見出し</h2>　　

見出し

class="arrow09"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow09">見出し</h2>　　

見出し

class="arrow10"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow10">見出し</h2>　　

見出し

class="arrow11"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow11">見出し</h2>　　

見出し

class="arrow12"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow12">見出し</h2>　　

見出し

class="arrow13"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow13">見出し</h2>　　

見出し

class="arrow14"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow14">見出し</h2>　　

見出し

class="arrow15"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="arrow15">見出し</h2>　　

見出し

class="arrow-s01"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s01">見出し</h3>　　

見出し

class="arrow-s02"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s02">見出し</h3>　　

見出し

class="arrow-s03"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s03">見出し</h3>　　

見出し

class="arrow-s04"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s04">見出し</h3>　　

見出し

class="arrow-s05"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s05">見出し</h3>　　

見出し

class="arrow-s06"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s06">見出し</h3>　　

見出し

class="arrow-s07"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s07">見出し</h3>　　

見出し

class="arrow-s08"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s08">見出し</h3>　　

見出し

class="arrow-s09"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s09">見出し</h3>　　

見出し

class="arrow-s10"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s10">見出し</h3>　　

見出し

class="arrow-s11"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s11">見出し</h3>　　

見出し

class="arrow-s12"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s12">見出し</h3>　　

見出し

class="arrow-s13"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s13">見出し</h3>　　

見出し

class="arrow-s14"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s14">見出し</h3>　　

見出し

class="arrow-s15"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="arrow-s15">見出し</h3>　　

見出し

class="circle01"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle01">見出し</h2>　　

見出し

class="circle02"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle02">見出し</h2>　　

見出し

class="circle03"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle03">見出し</h2>　　

見出し

class="circle04"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle04">見出し</h2>　　

見出し

class="circle05"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle05">見出し</h2>　　

見出し

class="circle06"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle06">見出し</h2>　　

見出し

class="circle07"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle07">見出し</h2>　　

見出し

class="circle08"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle08">見出し</h2>　　

見出し

class="circle09"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle09">見出し</h2>　　

見出し

class="circle10"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle10">見出し</h2>　　

見出し

class="circle11"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle11">見出し</h2>　　

見出し

class="circle12"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle12">見出し</h2>　　

見出し

class="circle13"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle13">見出し</h2>　　

見出し

class="circle14"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle14">見出し</h2>　　

見出し

class="circle15"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="circle15">見出し</h2>　　

見出し

class="circle-s01"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s01">見出し</h3>　　

見出し

class="circle-s02"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s02">見出し</h3>　　

見出し

class="circle-s03"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s03">見出し</h3>　　

見出し

class="circle-s04"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s04">見出し</h3>　　

見出し

class="circle-s05"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s05">見出し</h3>　　

見出し

class="circle-s06"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s06">見出し</h3>　　

見出し

class="circle-s07"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s07">見出し</h3>　　

見出し

class="circle-s08"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s08">見出し</h3>　　

見出し

class="circle-s09"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s09">見出し</h3>　　

見出し

class="circle-s10"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s10">見出し</h3>　　

見出し

class="circle-s11"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s11">見出し</h3>　　

見出し

class="circle-s12"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s12">見出し</h3>　　

見出し

class="circle-s13"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s13">見出し</h3>　　

見出し

class="circle-s14"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s14">見出し</h3>　　

見出し

class="circle-s15"で囲むとこの色の丸アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="circle-s15">見出し</h3>　　

見出し

class="star01"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star01">見出し</h2>　　

見出し

class="star02"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star02">見出し</h2>　　

見出し

class="star03"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star03">見出し</h2>　　

見出し

class="star04"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star04">見出し</h2>　　

見出し

class="star05"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star05">見出し</h2>　　

見出し

class="star06"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star06">見出し</h2>　　

見出し

class="star07"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star07">見出し</h2>　　

見出し

class="star08"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star08">見出し</h2>　　

見出し

class="star09"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star09">見出し</h2>　　

見出し

class="star10"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star10">見出し</h2>　　

見出し

class="star11"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star11">見出し</h2>　　

見出し

class="star12"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star12">見出し</h2>　　

見出し

class="star13"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star13">見出し</h2>　　

見出し

class="star14"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star14">見出し</h2>　　

見出し

class="star15"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h2 class="star15">見出し</h2>　　

見出し

class="star-s01"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s01">見出し</h3>　　

見出し

class="star-s02"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s02">見出し</h3>　　

見出し

class="star-s03"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s03">見出し</h3>　　

見出し

class="star-s04"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s04">見出し</h3>　　

見出し

class="star-s05"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s05">見出し</h3>　　

見出し

class="star-s06"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s06">見出し</h3>　　

見出し

class="star-s07"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s07">見出し</h3>　　

見出し

class="star-s08"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s08">見出し</h3>　　

見出し

class="star-s09"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s09">見出し</h3>　　

見出し

class="star-s10"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s10">見出し</h3>　　

見出し

class="star-s11"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s11">見出し</h3>　　

見出し

class="star-s12"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s12">見出し</h3>　　

見出し

class="star-s13"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s13">見出し</h3>　　

見出し

class="star-s14"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s14">見出し</h3>　　

見出し

class="star-s15"で囲むとこの色の星アイコンが表示されます(h2タグ時推奨) 　　ex.) <h3 class="star-s15">見出し</h3>　　

文字色、背景色編

見出し

class="text-y"で囲むとこの文字色になります。 　　ex.) <h3 class="text-y">見出し</h3>　　

見出し

class="text-g"で囲むとこの文字色になります。 　　ex.) <h3 class="text-g">見出し</h3>　　

見出し

class="text-b"で囲むとこの文字色になります。 　　ex.) <h3 class="text-b">見出し</h3>　　

見出し

class="text-p"で囲むとこの文字色になります。 　　ex.) <h3 class="text-p">見出し</h3>　　

見出し

class="text-r"で囲むとこの文字色になります。 　　ex.) <h3 class="text-r">見出し</h3>　　

見出し

class="text-w"で囲むとこの文字色になります。 　　ex.) <h3 class="text-w">見出し</h3>　　

見出し

class="text-b"で囲むとこの文字色になります。 　　ex.) <h3 class="text-k">見出し</h3>　　

見出し

class="text-o"で囲むとこの文字色になります。 　　ex.) <h3 class="text-o">見出し</h3>　　

見出し

class="text-s"で囲むとこの文字色になります。 　　ex.) <h3 class="text-s">見出し</h3>　　

見出し

class="text-c"で囲むとこの文字色になります。 　　ex.) <h3 class="text-c">見出し</h3>　　

見出し

strongタグ（強調タグ）等との組み合わせに効果的なものとして、class="back-y"でこの文字背景色にすることができます。 　　ex.) <strong class="back-y">見出し</strong>　　

見出し

strongタグ（強調タグ）等との組み合わせに効果的なものとして、class="back-g"でこの文字背景色にすることができます。 　　ex.) <strong class="back-g">見出し</strong>　　

見出し

strongタグ（強調タグ）等との組み合わせに効果的なものとして、class="back-b"でこの文字背景色にすることができます。 　　ex.) <strong class="back-b">見出し</strong>　　

見出し

strongタグ（強調タグ）等との組み合わせに効果的なものとして、class="back-p"でこの文字背景色にすることができます。 　　ex.) <strong class="back-p">見出し</strong>　　

見出し

strongタグ（強調タグ）等との組み合わせに効果的なものとして、class="back-r"でこの文字背景色にすることができます。 　　ex.) <strong class="back-r">見出し</strong>　　

見出し

strongタグ（強調タグ）等との組み合わせに効果的なものとして、class="back-w"でこの文字背景色にすることができます。 　　ex.) <strong class="back-w">見出し</strong>　　

見出し

strongタグ（強調タグ）等との組み合わせに効果的なものとして、class="back-b"でこの文字背景色にすることができます。 　　ex.) <strong class="back-k">見出し</strong>　　

見出し

strongタグ（強調タグ）等との組み合わせに効果的なものとして、class="back-o"でこの文字背景色にすることができます。 　　ex.) <strong class="back-o">見出し</strong>　　

見出し

strongタグ（強調タグ）等との組み合わせに効果的なものとして、class="back-s"でこの文字背景色にすることができます。 　　ex.) <strong class="back-s">見出し</strong>　　

見出し

strongタグ（強調タグ）等との組み合わせに効果的なものとして、class="back-c"でこの文字背景色にすることができます。 　　ex.) <strong class="back-c">見出し</strong>　　

リストタグ編

通常のリスト構造。

• リスト
• リスト
• リスト

・ulタグ、class="arrow-u01"で矢印アイコンリスト

• リスト
• リスト
• リスト

・ulタグ、class="arrow-u02"で矢印アイコンリスト

• リスト
• リスト
• リスト

・ulタグ、class="arrow-u03"で矢印アイコンリスト

• リスト
• リスト
• リスト

※さらに矢印アイコンリスト用classも同様にarrow-u15まで15色のアイコンが対応しております。

・ulタグ、class="circle-u01"で丸アイコンリスト

• リスト
• リスト
• リスト

・ulタグ、class="circle-u02"で丸アイコンリスト

• リスト
• リスト
• リスト

・ulタグ、class="circle-u03"で丸アイコンリスト

• リスト
• リスト
• リスト

※さらに丸アイコンリスト用classも同様にcircle-u15まで15色のアイコンが対応しております。

・ulタグ、class="star-u01"で星アイコンリスト

• リスト
• リスト
• リスト

・ulタグ、class="star-u02"で星アイコンリスト

• リスト
• リスト
• リスト

・ulタグ、class="star-u03"で星アイコンリスト

• リスト
• リスト
• リスト

※さらに星アイコンリスト用classも同様にstar-u15まで15色のアイコンが対応しております。

応用編

見出し

class="arrow01"で囲むとこの色の矢印アイコンが表示されます(h2タグ時推奨)

見出し

h2タグ、class="arrow01 text-g"で囲むとこの色の矢印アイコンでこの文字色というように組み合わせることも可能です。

見出し

h3タグ、class="circle03 text-r"で囲むとこの色の丸アイコンでこの文字色というように組み合わせることも可能です。

見出し

h3タグ、class="back-k text-w"で囲むとこの色の丸アイコンでこの文字色というように組み合わせることも可能です。

・ulタグ、class="star-u02 text-p"で星アイコンリストでこの文字色

• リスト
• リスト
• リスト