テスト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>
リンクスタイル
リストスタイル
◉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>
- AAAAA
- BBBBB
- 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%