白川浩平税理士事務所

インターンシップはこちら
エントリー・お問い合わせ

テスト4

各種見出しスタイル

<h1>h1タグ</h1>

<h2>h2タグ</h2>

<h3>h3タグ</h3>

<h4>h4タグ</h4>

<h5>h5タグ</h5>
<h6>h6タグ</h6>

本文スタイル

<p>本文タグ</p>

本文・見出し揃え

<p class="align_right">本文・見出しを右揃え</p>

<p class="align_center">本文・見出しを中央揃え</p>

本文装飾スタイル

<p class="underline">本文に下線</p>

<p class="blue">本文を青に</p>

<p class="grenn">本文を緑に</p>

<p class="red">本文を赤に</p>

リンクスタイル

<a class="link01" href="#">あああああああ<i class="fas fa-angle-right"> あああああああ

リストスタイル

◉list01
<ul class="list01"><li>AAAAA</li><li>BBBBB</li><li>CCCCC</li></ul>

  • AAAAA
  • BBBBB
  • CCCCC

◉list02
<ul class="list02"><li>AAAAA</li><li>BBBBB</li><li>CCCCC</li></ul>

  • AAAAA
  • BBBBB
  • CCCCC

◉list03
<ul class="list03"><li>AAAAA</li><li>BBBBB</li><li>CCCCC</li></ul>

  • AAAAA
  • BBBBB
  • CCCCC

◉list_link01
リンク用のリストタグ
<ul class="list_link01"><li><a href="#">リンク設定</a></li></ul>

◉クラスに inline を追加でリストが横並びになります。
<ul class="list02 inline"><li>AAAAA</li><li>BBBBB</li><li>CCCCC</li></ul>

  • AAAAA
  • BBBBB
  • CCCCC

定義リストスタイル

◉dl_list01
<dl class="dl_list01"><dt>AAAAA</dt><dd>BBBBB</dd><dd>CCCCC</dd></dl>

AAAAA
BBBBB
CCCCC

番号リストスタイル

◉ol
<ol><li>AAAAA</li><li>BBBBB</li><li>CCCCC</li></ol>

  1. AAAAA
  2. BBBBB
  3. CCCCC

枠線スタイル

◉waku01
<div class="waku01"><p>枠線を追加します</p></div>

枠線を追加します

◉waku02
<div class="waku02"><p>枠線を追加します</p></div>

枠線を追加します

◉waku03
<div class="waku03"><p>枠線を追加します</p></div>

枠線を追加します

テーブルスタイル

◉table01

<table class="table01">
<tbody>
<tr>
<th scope="col">項目名1</th>
<th scope="col">項目名2</th>
<th scope="col">項目名3</th>
<th scope="col">項目名4</th>
</tr>
<tr>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
<td>DDDDD</td>
</tr>
<tr>
<td>あああああ</td>
<td>いいいいい</td>
<td>ううううう</td>
<td>えええええ</td>
</tr>
</tbody>
</table>

項目名1 項目名2 項目名3 項目名4
AAAAA BBBBB CCCCC DDDDD
あああああ いいいいい ううううう えええええ

◉table02

※table2はレスポンシブです。

<table class="table02">
<tbody>
<tr>
<th scope="col">項目名1</th>
<td scope="col">AAAAA</td>
<td scope="col">BBBBB</td>
<td scope="col">CCCCC</td>
</tr>
<tr>
<th>項目名2</th>
<td>11111</td>
<td>22222</td>
<td>33333</td>
</tr>
<tr>
<th>項目名3</th>
<td>いいいいい</td>
<td>ううううう</td>
<td>えええええ</td>
</tr>
</tbody>
</table>

項目名1 AAAAA BBBBB CCCCC
項目名2 11111 22222 33333
項目名3 いいいいい ううううう えええええ

画像左右寄せ

◉左寄せ
<img src="img/page/demo.jpg" class="float_left width25"/><p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

◉右寄せ
<img src="img/page/demo.jpg"height="" alt="" class="float_right width25"/> <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

カラム

※カラムは「ul li タグ」または「div タグに」設定をお願いします

◉2カラム
<ul class="column2"><li>1カラムの内容</li><li>2カラムの内容</li></ul>

  • 1カラムの内容
  • 2カラムの内容
  • 1カラムの内容
  • 2カラムの内容

◉3カラム
<ul class="column3"><li>1カラムの内容</li><li>2カラムの内容</li><li>3カラムの内容</li></ul>

  • 1カラムの内容
  • 2カラムの内容
  • 3カラムの内容

◉4カラム
<ul class="column4"><li>1カラムの内容</li><li>2カラムの内容</li><li>3カラムの内容</li><li>4カラムの内容</li></ul>

  • 1カラムの内容
  • 2カラムの内容
  • 3カラムの内容
  • 4カラムの内容

横幅スタイル

横幅はpタグ、リストタグ、divタグ、imgタグ など全てに適用できます
※5%刻みで最小20%まで

◉横幅100%
<div class="width100">横幅100%</div>

横幅100%

◉横幅90%
<div class="width90">横幅90%</div>

横幅90%

◉横幅80%
<div class="width80">横幅80%</div>

横幅80%

◉横幅70%
<div class="width70">横幅70%</div>

横幅70%

◉横幅60%
<div class="width60">横幅60%</div>

横幅60%

◉横幅50%
<div class="width50">横幅50%</div>

横幅50%

◉横幅40%
<div class="width40%">横幅40%</div>

横幅40%

◉横幅30%
<div class="width30%">横幅30%</div>

横幅30%

◉横幅20%
<div class="width20%">横幅20%</div>

横幅20%