【記事更新用】HTMLタグやclassのデザイン見本

no-image

大見出し

中見出し

■<p>・・・</p>

段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です段落です

■<p class=”text_center”>・・・</p>

テキストセンター揃えテキストセンター揃えテキストセンター揃え テキストセンター揃えテキストセンター揃えテキストセンター揃えテキストセンター揃え

■<p class=”text_right”>・・・</p>

テキスト右揃えテキスト右揃えテキスト右揃え テキスト右揃えテキスト右揃えテキスト右揃えテキスト右揃え

■<ul><li>・・・</li><li>・・・</li><li>・・・</li></ul>

  • 順序のないリスト
  • 順序のないリスト
  • 順序のないリスト

■<ol><li>・・・</li><li>・・・</li><li>・・・</li></ol>

  1. 順序のあるリスト
  2. 順序のあるリスト
  3. 順序のあるリスト

■<blockquote>・・・</blockquote>

引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用引用

■class=”margin_b○”(下の余白)

margin_b5
margin_b10
margin_b15
margin_b20
margin_b25
margin_b30
margin_b35
margin_b40
margin_b45
margin_b50
margin_b60

■class=”f○”

class=”f10″

class=”f11″

class=”f12″

class=”f13″

class=”f14″

class=”f15″

class=”f16″

class=”f17″

class=”f18″

class=”f19″

class=”f20″

class=”f21″

class=”f22″

class=”f23″

class=”f24″

class=”f25″

class=”f30″

class=”f35″

class=”f40″

class=”f45″

class=”f50″

■class=”bold”

太字

■class=”red”

■class=”pink”

ピンク

■class=”gray”

グレー

■class=”blue”

■class=”bg_yellow”

背景黄

■class=”bg_blue”

背景青

■class=”bg_pink”

背景ピンク

■class=”bg_gray”

背景グレー

■class=”mk_yellow”

マーカー黄

<div class=”serif”> <img src=”・・・”> <div class=”serif_box”> <span>テキストテキストテキストテキスト</span> </div> </div>

セリフセリフセリフセリフセリフセリフセリフセリフ

<div class=”serif”> <img src=”・・・”> <div class=”serif_box bg_yellow_iv…bg_blue_iv…bg_pink_iv…bg_gray_iv”> <span>テキストテキストテキストテキスト</span> </div> </div>

背景イエローのセリフセリフセリフセリフセリフセリフセリフ
背景ブルーのセリフセリフセリフセリフセリフセリフセリフ
背景ピンクのセリフセリフセリフセリフセリフセリフセリフ
背景グレーのセリフセリフセリフセリフセリフセリフセリフ
左にキャラがくるバージョン
セリフセリフセリフセリフセリフセリフセリフセリフ
右にキャラがくるバージョン
セリフセリフセリフセリフセリフセリフセリフセリフ

■class=”button”

ボタンサイトカラー

■class=”button_green”

ボタン緑

■class=”button_blue”

ボタン青

■class=”button_orange”

ボタンオレンジ

■[table]要素を囲むbox([div]要素)に class=”table_wrap” 標準のテーブル表示となります!

見出し1 見出し2 見出し3
内容1 内容2 内容3

■タイトル(th)が横並びのテンプレ[標準タイプ]

<div class="table_wrap">
	<table>
		<tbody>
			<tr>
				<th>見出し1</th>
				<th>見出し2</th>
				<th>見出し3</th>
			</tr>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
			</tr>
		</tbody>
	</table>
</div>

■[table]要素 class 指定なし (デフォルト) 横幅「768」サイズ以下になると、x軸にスクロールできるようにしてます。

見出し1 見出し2 見出し3
内容1 内容2 内容3

■[table]要素 class=”table_black”

見出し1 見出し2 見出し3
内容1 内容2 内容3

■[table]要素 class=”f_small”

見出し1 見出し2 見出し3
内容1 内容2 内容3

■[table]要素 class=”f_middle”

見出し1 見出し2 見出し3
内容1 内容2 内容3

■[table]要素 class=”f_big”

見出し1 見出し2 見出し3
内容1 内容2 内容3

■[table]要素を囲むbox([div]要素)に class=”table_wrap” 標準のテーブル表示となります!

見出し1 内容1
見出し2 内容2
見出し3 内容3

■タイトル(th)が縦並びのテンプレ[標準タイプ]

<div class="table_wrap">
	<table>
		<tbody>
			<tr>
				<th>見出し1</th>
				<td>内容1</td>
			</tr>
			<tr>
				<th>見出し2</th>
				<td>内容2</td>
			</tr>
			<tr>
				<th>見出し3</th>
				<td>内容3</td>
			</tr>
		</tbody>
	</table>
</div>

■[table]要素を囲むbox([div]要素)に class=”table_wrap_scroll” 横幅「768」サイズ以下になると、x軸にスクロールできるようにしてます。

見出し1 内容1
見出し2 内容2
見出し3 内容3

■[table]要素を囲むbox([div]要素)に class=”table_wrap_block”

見出し1 内容1
見出し2 内容2
見出し3 内容3