見出し
見出し（デフォルト）
h1見出しが入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h2見出しが入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h3見出しが入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h4見出しが入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h5見出しが入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h6見出しが入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<h1>h1見出しが入ります。</h1> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h2>h2見出しが入ります。</h2> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h3>h3見出しが入ります。</h3> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h4>h4見出しが入ります。</h4> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h5>h5見出しが入ります。</h5> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h6>h6見出しが入ります。</h6> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> |
見出し（リンク）
h1見出し（リンク）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h2見出し（リンク）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h3見出し（リンク）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h4見出し（リンク）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h5見出し（リンク）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h6見出し（リンク）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<h1><a href="#">h1見出し（リンク）が入ります。</a></h1> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h2><a href="#">h2見出し（リンク）が入ります。</a></h2> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h3><a href="#">h3見出し（リンク）が入ります。</a></h3> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h4><a href="#">h4見出し（リンク）が入ります。</a></h4> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h5><a href="#">h5見出し（リンク）が入ります。</a></h5> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h6><a href="#">h6見出し（リンク）が入ります。</a></h6> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> |
見出し（装飾オフ）
h1見出し（装飾オフ）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h2見出し（装飾オフ）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h3見出し（装飾オフ）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h4見出し（装飾オフ）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h5見出し（装飾オフ）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
h6見出し（装飾オフ）が入ります。
ここにテキストが入りますここにテキストが入りますここにテキストが入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<h1 class="title_no-style">h1見出し（装飾オフ）が入ります。</h1> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h2 class="title_no-style">h2見出し（装飾オフ）が入ります。</h2> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h3 class="title_no-style">h3見出し（装飾オフ）が入ります。</h3> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h4 class="title_no-style">h4見出し（装飾オフ）が入ります。</h4> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h5 class="title_no-style">h5見出し（装飾オフ）が入ります。</h5> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> <h6 class="title_no-style">h6見出し（装飾オフ）が入ります。</h6> <p>ここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> |
文字色
肯定
| HTMLの記述方法 | ブラウザでの表示結果 | ||
|---|---|---|---|
|
|||
|
文字色を水色 |
否定・禁止
| HTMLの記述方法 | ブラウザでの表示結果 | ||
|---|---|---|---|
|
文字色を赤色 |
シンプルな強調
| HTMLの記述方法 | ブラウザでの表示結果 | ||
|---|---|---|---|
|
文字色をオレンジ色 | ||
|
文字色をピンク色 | ||
|
文字色を紫色 |
用語の解説・例示
| HTMLの記述方法 | ブラウザでの表示結果 | ||
|---|---|---|---|
|
文字色を緑色 |
その他の色
| HTMLの記述方法 | ブラウザでの表示結果 | ||
|---|---|---|---|
|
文字色を青色 | ||
|
文字色を黄色 | ||
|
文字色をオリーブ色 | ||
|
文字色をライム色 | ||
|
文字色を黒色 | ||
|
文字色を灰色 | ||
|
文字色を白色変更可能 | ||
|
文字色を茶色 |
マーカー表示
| HTMLの記述方法 | ブラウザでの表示結果 | ||
|---|---|---|---|
|
黄色の背景色 |
|
オレンジ色の背景色 |
|
ピンク色の背景色 | ||
|
青色の背景色 |
|
ライム色の背景色 |
|
灰色の背景色 |
テキストの表現
リスト
ul要素
- リストが入ります。
- リストが入ります。長めのリストはこのようなデザインになります。長めのリストはこのようなデザインになります。長めのリストはこのようなデザインになります。
|
1 2 3 4 |
<ul> <li>リストが入ります。</li> <li>リストが入ります。長めのリストはこのようなデザインになります。長めのリストはこのようなデザインになります。長めのリストはこのようなデザインになります。</li> </ul> |
ol要素
- リストが入ります。
- リストが入ります。
|
1 2 3 4 |
<ol> <li>リストが入ります。</li> <li>リストが入ります。</li> </ol> |
横並び
リストを横並びにして表示します。
- リストが入ります。
- リストが入ります。
|
1 2 3 4 |
<ul class="inline"> <li>リストが入ります。</li> <li>リストが入ります。</li> </ul> |
リストの先頭に表示するマーカー文字を非表示
- リストが入ります。
- リストが入ります。
|
1 2 3 4 |
<ul class="none"> <li>リストが入ります。</li> <li>リストが入ります。</li> </ul> |
リストのデザインその1
- テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
- テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
- テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
- リスト
- リスト
- リスト
- リスト
- テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<ul class="list_style01"> <li>テキストが入ります。 <div class="list-conts"> <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p> </div> </li> <li>テキストが入ります。 <div class="list-conts"> <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p> </div> </li> <li>テキストが入ります。 <div class="list-conts"> <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p> <ol> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ol> </div> </li> <li>テキストが入ります。 <div class="list-conts"> <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p> </div> </li> </ul> |
リストのデザインその2
- テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
- テキストが入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ol class="list_style02"> <li>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</li> <li>テキストが入ります。</li> <li>テキストが入ります。</li> <li>テキストが入ります。</li> <li>テキストが入ります。</li> <li>テキストが入ります。</li> <li>テキストが入ります。</li> <li>テキストが入ります。</li> <li>テキストが入ります。</li> <li>テキストが入ります。</li> </ol> |
チェックリスト
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
|
1 2 3 4 5 6 7 |
<ul class="check-list"> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> </ul> |
記述リスト（旧定義リスト）
「定義リスト（definition list）」は、html5では「記述リスト（description list）」と改められました。
- dt要素
- dd要素dd要素dd要素dd要素
定義リストとして使用する場合
- dt要素とdfn要素で用語をマークアップ
- dd要素に定義を記述します。
|
1 2 3 4 |
<dl> <dt><dfn>dt要素とdfn要素で用語をマークアップ</dfn></dt> <dd>dd要素に定義を記述します。</dd> </dl> |
記述リストのデザインその1
- 記述リストのデザインその1
- 要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。 - 記述リストのデザインその1
- 要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。 - 記述リストのデザインその1
- 要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<dl class="dl_style01"> <dt>記述リストのデザインその1</dt> <dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また 左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd> <dt>記述リストのデザインその1</dt> <dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また 左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd> <dt>記述リストのデザインその1</dt> <dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また 左よりも右の文字数の方が少なくなるとデザインが崩れます。</dd> </dl> |
記述リストのデザインその2
- 記述リストのデザインその2
- 要素が縦に並びます。
- 記述リストのデザインその2
- 要素が縦に並びます。
- 記述リストのデザインその2
- 要素が縦に並びます。
|
1 2 3 4 5 6 7 8 |
<dl class="dl_style02"> <dt>記述リストのデザインその2</dt> <dd>要素が縦に並びます。</dd> <dt>記述リストのデザインその2</dt> <dd>要素が縦に並びます。</dd> <dt>記述リストのデザインその2</dt> <dd>要素が縦に並びます。</dd> </dl> |
Q&Aリスト
- ここには質問文が入ります。
- ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。 - ここには質問文が入ります。
- ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
|
1 2 3 4 5 6 7 8 9 10 11 |
<dl class="qa-list"> <dt>ここには質問文が入ります。</dt> <dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br> ここには回答文が入ります。<br> ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd> <dt>ここには質問文が入ります。</dt> <dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br> ここには回答文が入ります。<br> ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd> </dl> |
アコーディオン
- ここには質問文が入ります。
- ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。 - ここには質問文が入ります。
- ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
|
1 2 3 4 5 6 7 8 9 10 11 |
<dl class="qa-list accordion-list"> <dt class="accordion-list_btn">ここには質問文が入ります。</dt> <dd class="accordion-list_cont">ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br> ここには回答文が入ります。<br> ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd> <dt class="accordion-list_btn">ここには質問文が入ります。</dt> <dd class="accordion-list_cont">ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br> ここには回答文が入ります。<br> ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd> </dl> |
ランキングリスト
-
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。 -
項目名などが入ります
-
項目名などが入ります
-
項目名などが入ります
-
項目名などが入ります
-
項目名などが入ります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<ol class="ranking-list"> <li class="ranking-list_item ranking-list_item_hasimage"> <div class="rank_thumb"><img src="../images/sample001.jpg" alt="サンプル" width="200" height="200"></div> <h5 class="rank_title title_no-style">項目名などが入ります</h5> <div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div> </li> <li class="ranking-list_item ranking-list_item_hasimage"> <div class="rank_thumb"><img src="../images/sample002.jpg" alt="サンプル" width="200" height="200"></div> <h5 class="rank_title title_no-style">項目名などが入ります</h5> <div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div> </li> <li class="ranking-list_item ranking-list_item_hasimage"> <div class="rank_thumb"><img src="../images/sample003.jpg" alt="サンプル" width="200" height="200"></div> <h5 class="rank_title title_no-style">項目名などが入ります</h5> <div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div> </li> <li class="ranking-list_item"> <h5 class="rank_title title_no-style">項目名などが入ります</h5> <div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div> </li> <li class="ranking-list_item"> <h5 class="rank_title title_no-style">項目名などが入ります</h5> <div class="rank_desc">ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。</div> </li> <li class="ranking-list_item"> <div class="rank_title">項目名などが入ります</div> </li> <li class="ranking-list_item"> <div class="rank_title">項目名などが入ります</div> </li> <li class="ranking-list_item"> <div class="rank_title">項目名などが入ります</div> </li> <li class="ranking-list_item"> <div class="rank_title">項目名などが入ります</div> </li> <li class="ranking-list_item"> <div class="rank_title">項目名などが入ります</div> </li> </ol> |
情報比較エリア
-
商品名が入ります（メーカー名）
- 価格：
- 2,000円（税込）
- 容量：
- 100ml
価格 5.0 使用感 3.5 効果 4.0 商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
管理人のレビュー
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
-
商品名が入ります（メーカー名）
- 価格：
- 2,000円（税込）
- 容量：
- 100ml
価格 5.0 使用感 3.5 効果 4.0 商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
管理人のレビュー
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
-
商品名が入ります（メーカー名）
- 価格：
- 2,000円（税込）
- 容量：
- 100ml
価格 5.0 使用感 3.5 効果 4.0 商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。
管理人のレビュー
管理人のレビューが入ります。管理人のレビューが入ります。
管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<ol class="ranking-list comparative-list"> <li class="ranking-list_item ranking-list_item_hasimage"> <div class="rank_thumb"> <img src="../images/sample004.jpg" alt="サンプル" width="315" height="210"> </div> <div class="item-data_outer"> <h3 class="rank_title title_no-style">商品名が入ります（メーカー名）</h3> <div class="item-data"> <dl> <dt>価格：</dt> <dd><span class="red f12em">2,000円</span><small>（税込）</small></dd> </dl> <dl> <dt>容量：</dt> <dd>100ml</dd> </dl> </div> <table class="review-table"> <tr> <th>価格</th> <td><span class="review_star star50">5.0</span></td> </tr> <tr> <th>使用感</th> <td><span class="review_star star35">3.5</span></td> </tr> <tr> <th>効果</th> <td><span class="review_star star40">4.0</span></td> </tr> </table> </div> <div class="rank_desc"> <p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p> <p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p> </div> <div class="review_desc"> <h4 class="review_desc_title title_no-style">管理人のレビュー</h4> <p class="m0-b">管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p> </div> <p class="btn-detail"><a class="btn dir-arw_r btn_style02" href="#"><span class="icon_arrow_s_right"></span> 商品詳細を見る</a></p> </li> <li class="ranking-list_item ranking-list_item_hasimage"> <div class="rank_thumb"> <img src="../images/sample005.jpg" alt="サンプル" width="315" height="210"> </div> <div class="item-data_outer"> <h3 class="rank_title title_no-style">商品名が入ります（メーカー名）</h3> <div class="item-data"> <dl> <dt>価格：</dt> <dd><span class="red f12em">2,000円</span><small>（税込）</small></dd> </dl> <dl> <dt>容量：</dt> <dd>100ml</dd> </dl> </div> <table class="review-table"> <tr> <th>価格</th> <td><span class="review_star star50">5.0</span></td> </tr> <tr> <th>使用感</th> <td><span class="review_star star35">3.5</span></td> </tr> <tr> <th>効果</th> <td><span class="review_star star40">4.0</span></td> </tr> </table> </div> <div class="rank_desc"> <p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p> <p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p> </div> <div class="review_desc"> <h5 class="review_desc_title title_no-style">管理人のレビュー</h5> <p class="m0-b">管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p> </div> <p class="btn-detail"><a class="btn dir-arw_r btn_style02" href="#"><span class="icon_arrow_s_right"></span> 商品詳細を見る</a></p> </li> <li class="ranking-list_item ranking-list_item_hasimage"> <div class="rank_thumb"> <img src="../images/sample006.jpg" alt="サンプル" width="315" height="210"> </div> <div class="item-data_outer"> <h3 class="rank_title title_no-style">商品名が入ります（メーカー名）</h3> <div class="item-data"> <dl> <dt>価格：</dt> <dd><span class="red f12em">2,000円</span><small>（税込）</small></dd> </dl> <dl> <dt>容量：</dt> <dd>100ml</dd> </dl> </div> <table class="review-table"> <tr> <th>価格</th> <td><span class="review_star star50">5.0</span></td> </tr> <tr> <th>使用感</th> <td><span class="review_star star35">3.5</span></td> </tr> <tr> <th>効果</th> <td><span class="review_star star40">4.0</span></td> </tr> </table> </div> <div class="rank_desc"> <p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p> <p>商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。</p> </div> <div class="review_desc"> <h5 class="review_desc_title title_no-style">管理人のレビュー</h5> <p>管理人のレビューが入ります。管理人のレビューが入ります。</p> <p class="m0-b">管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。</p> </div> <p class="btn-detail"><a class="btn dir-arw_r btn_style02" href="#"><span class="icon_arrow_s_right"></span> 商品詳細を見る</a></p> </li> </ol> |
連続改行
↓５つ連続した改行を入れます。
↑５つ連続した改行をいれました。
|
1 2 3 |
↓５つ連続した改行を入れます。 [br num=5] ↑５つ連続した改行をいれました。 |
「br num=”ｘ”」のｘに数字をいれると、数字の数だけ改行が入ります。
注意書き
※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。
|
1 |
<p class="note"><small>※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。</small></p> |
傍点
テキスト上に傍点を打ちます。
|
1 |
<p>テキスト上に<span class="dot">傍</span><span class="dot">点</span>を打ちます。</p> |
当院おすすめインフォメーション！
