class設定サンプル

本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。


h2の見出し

h3の見出し

h4の見出し

h5の見出し
h6の見出し


カラーサンプル

class="red"で「赤文字」
class="orange"で「橙文字」
class="blue"で「青文字」
class="green"で「緑文字」


リストタグ

  • ULリスト
  • ULリスト
  • ULリスト
  1. OLリスト
  2. OLリスト
    1. OLリスト
    2. OLリスト
  3. OLリスト

テーブルサンプル

class="table01"　点線テーブル
thタグ tdタグ
thタグ tdタグ
thタグ tdタグ
class="table02"　実線テーブル
thタグ tdタグ
thタグ tdタグ
thタグ tdタグ
class="table03"　枠テーブル
thタグ tdタグ tdタグ
thタグ tdタグ tdタグ
thタグ tdタグ tdタグ



クラスを利用したレイアウト

col2

<div class="col2">ここに本文</div>を使用すると本文が自動で2列になります。各列の高さが自動で調整されます。長〜い文章に最適です。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。リンクタグ(aタグ)にclass="link"をつけると矢印アイコンがつきます。


col3

<div class="col3">ここに本文</div>を使用すると本文が自動で3列になります。各列の高さが自動で調整されます。長〜い文章に最適です。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。 本文が入ります。本文が入ります。リンクタグ(aタグ)にclass="link"をつけると矢印アイコンがつきます。


LR_box
<div class="LR_box">ここに本文</div><div class="LR_box">ここに本文</div>
を使用すると、ボックスが横に2つ並ぶレイアウトが作成可能です。col2とは違い、LR_boxは2つが1セットとなります。 LEFT、RIGHTにならぶBOXなのでLR_boxです。
見出しの頭をあわせて左右に配置する際などに使用できます。
横に2個以上並ぶと行が変わる想定です。6個のLR_boxを並べると、横2列縦3段になります。 ボックスが横に2つ並ぶレイアウトのサンプルです。class="LR_box"のサンプルです。


LCR_box
<div class="LCR_box">ここに本文</div><div class="LCR_box">ここに本文</div><div class="LCR_box">ここに本文</div>
を使用すると、ボックスが横に3つ並ぶレイアウトが作成可能です。col3とは違い、LCR_boxは3つが1セットとなります。
LEFT、CENTER、RIGHTにならぶBOXなのでLCR_boxです。 横に3個以上並ぶと行が変わる想定です。6個のLR_boxを並べると、横3列縦2段になります。
ボックスが横に3つ並ぶレイアウトサンプルです。class="LCR_box"のサンプルです。 ボックスが横に3つ並ぶレイアウトサンプルです。class="LCR_box"のサンプルです。class="LCR_box"のサンプルです。


box_r
<div class="box_r">
<div class="photo"><img src="ここに画像のURL" alt="" width="100%"></div>
<div class="txt">ここに文章</div>
</div>
を使用すると、 本文の右に画像を配置したレイアウトが作成できます。 本文のBOXの右(RIGHT)に写真なので「box_r」です。 class=”box_r”のサンプルです。


box_l
<div class="box_l">
<div class="photo"><img src="ここに画像のURL" alt="" width="100%"></div>
<div class="txt">ここに文章</div>
</div>
を使用すると、 本文の左に画像を配置したレイアウトが作成できます。 本文のBOXの左(LEFT)に写真なので「box_l」です。 class=”box_l”のサンプルです。