見出しタイトル

h1見出しが入ります

<h1 class="article__title">h1見出しが入ります</h1>

h2見出しが入ります

<h2 class="h2-ttl">h2見出しが入ります</h2>

h3見出しが入ります

<h3 class="h3-ttl">h3見出しが入ります</h3>

h4見出しが入ります

<h4 class="h4-ttl">h4見出しが入ります</h4>
h5見出しが入ります
<h5 class="h5-ttl">h5見出しが入ります</h5>
h6見出しが入ります
<h6 class="h6-ttl">h6見出しが入ります</h6>

マーカーデザイン

マーカーデザイン黄色

<p><strong><span class="marker_y">マーカーデザイン</span></strong></p>

マーカーデザインピンク

<p><strong><span class="marker_p">マーカーデザインピンク</span></strong></p>

マーカーデザインブルー

<p><strong><span class="marker_b">マーカーデザインブルー</span></strong></p>

目次デザイン

ボックスデザイン

テキストが入ります。テキストが入ります。テキストが入ります。


<div class="box01">
	<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>

テキストが入ります。テキストが入ります。テキストが入ります。


<div class="box02">
	<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>

ここにタイトル

テキストが入ります。テキストが入ります。テキストが入ります。


<div class="box03">
	<span class="box-title">ここにタイトル</span>
	<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>

リストデザイン

  • リストが入ります。
  • リストが入ります。
  • リストが入ります。
  • リストが入ります。

<ul class="list-box01">
	<li>リストが入ります。</li>
	<li>リストが入ります。</li>
	<li>リストが入ります。</li>
	<li>リストが入ります。</li>
</ul>

  • リストが入ります。
  • リストが入ります。
  • リストが入ります。
  • リストが入ります。

<ul class="list-box02">
	<li>リストが入ります。</li>
	<li>リストが入ります。</li>
	<li>リストが入ります。</li>
	<li>リストが入ります。</li>
</ul>

  • リストが入ります。
  • リストが入ります。
  • リストが入ります。
  • リストが入ります。

<ul class="list-box03">
	<li>リストが入ります。</li>
	<li>リストが入ります。</li>
	<li>リストが入ります。</li>
	<li>リストが入ります。</li>
</ul>

  • リストが入ります。
  • リストが入ります。
  • リストが入ります。
  • リストが入ります。

<ul class="list-box04">
	<li>リストが入ります。</li>
	<li>リストが入ります。</li>
	<li>リストが入ります。</li>
	<li>リストが入ります。</li>
</ul>

テーブルデザイン

無料プラン 人気No.1初級プラン 上級プラン
¥0 ¥8,000
申し込み 申し込み 申し込み
保証なし 保証3ヶ月

<table class="table01">
	<tr>
		<th>無料プラン</th>
		<th class="popular"><span class="inner"><span class="no1">人気No.1</span>初級プラン</span></th>
		<th>上級プラン</th>
	</tr>
	<tr>
		<td>¥0</td>
		<td class="popular">¥5,000</td>
		<td>¥8,000</td>
	</tr>
	<tr>
		<td><a href="#">申し込み</a></td>
		<td><a href="#">申し込み</a></td>
		<td><a href="#">申し込み</a></td>
	</tr>
	<tr>
		<td>保証なし</td>
		<td class="popular">保証1ヶ月</td>
		<td>保証3ヶ月</td>
	</tr>
</table>

見出し テキスト
見出し テキスト
見出し テキスト
見出し テキスト
見出し テキスト
見出し テキスト

<figure class="wp-block-table">
	<table>
		<tbody>
			<tr>
				<td class="t-ttl">見出し</td>
				<td>テキスト</td>
			</tr>
			<tr>
				<td class="t-ttl">見出し</td>
				<td>テキスト</td>
			</tr>
			<tr>
				<td class="t-ttl">見出し</td>
				<td>テキスト</td>
			</tr>
			<tr>
				<td class="t-ttl">見出し</td>
				<td>テキスト</td>
			</tr>
			<tr>
				<td class="t-ttl">見出し</td>
				<td>テキスト</td>
			</tr>
			<tr>
				<td class="t-ttl">見出し</td>
				<td>テキスト</td>
			</tr>
		</tbody>
	</table>
</figure>

会社名 テーブル株式会社
創業 1940年
従業員数 500人
電話番号 000-000-0000

<table class="table02">
	<tr>
		<th>会社名</th>
		<td>テーブル株式会社</td>
  	</tr>
  	<tr>
    	<th>創業</th>
    	<td>1940年</td>
  	</tr>
  	<tr>
    	<th>従業員数</th>
    	<td>500人</td>
  	</tr>
  	<tr>
    	<th>電話番号</th>
    	<td>000-000-0000</td>
  	</tr>
</table>	


リンクデザイン(ボタン)


<a href="" class="btn btn--yellow btn--cubic">ここにテキスト</a>


<a href="" class="btn btn-gradient"><span>ここにテキスト</span></a>


<div class="btn-wrap">
	<a href="" class="btn btn-c"><span>サブタイトルが入ります</span><br>メインタイトルが入ります</a>

リンクデザイン(テキストリンク)


<p class="textlink textlink06"><a href="" target="_blank">外部リンク</a></p>

リンクテキスト

<a href="#" class="cp_link">リンクテキスト</a>

引用デザイン

CSS Block Quotation Examples

ここに引用する文を書きます。


<blockquote>
	<p>CSS Block Quotation Examples</p>
	<p>ここに引用する文を書きます。</p>
</blockquote>