見出し
見出し（デフォルト）
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の記述方法 | ブラウザでの表示結果 | ||
|---|---|---|---|
|
大 （ f12em指定と同じ ） |
||
|
大２ （ f15em指定と同じ ） |
||
|
大３ （ f18em指定と同じ ） |
||
|
小 （ f08em指定と同じ ） |
詳細
em指定（f08em→f30emまで指定可能）
| HTMLの記述方法 | ブラウザでの表示結果 | ||
|---|---|---|---|
|
f08em | ||
|
f30em |
rem指定（f08rem→f30remまで指定可能）
| HTMLの記述方法 | ブラウザでの表示結果 | ||
|---|---|---|---|
|
f08rem | ||
|
f30rem |
px指定（f10px→f24pxまで指定可能）
| HTMLの記述方法 | ブラウザでの表示結果 | ||
|---|---|---|---|
|
f10px | ||
|
f24px |
文字色
肯定
| 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> |
連続改行
WordPressでは複数行の改行ができないように制御されています。
そのため、<br>を使って余白を変更したい場合は次のショートコードを利用します。
なお、numの数値が<br>の数にあたり、以下の例であれば3つの<br>が連続で出力されます。
テキストが入ります。
テキストが入ります。
テキストが入ります。
|
1 |
テキストが入ります。[br num=3]テキストが入ります。 |
「br num=”ｘ”」のｘに数字をいれると、数字の数だけ改行が入ります。
注意書き
※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。
|
1 |
<p class="note"><small>※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。</small></p> |
傍点
テキスト上に傍点を打ちます。
|
1 |
<p>テキスト上に<span class="dot">傍</span><span class="dot">点</span>を打ちます。</p> |
【めぐり整体所 infomation 】
2020年1月31日を持ちまして、大津市杉浦町の「めぐり整体所」は閉業いたしました。
10年間、ありがとうございました。心より感謝申し上げます。
今後は、会員制整体院「めぐりハイパー」として活動させて頂きます。
当面の間、出張整体がメインとなります。
めぐりハイパー
会員制
これまで「めぐり整体所」をご利用くださった方を会員をさせて頂きます。
（新規会員に関しては、当面の間は会員様のご紹介者のみとさせて頂きます。）
会費は0円ですが、限られた時間での営業となるため、定期的にご利用
ご利用下さる方を優先的にさせて頂きます。
毎月利用の方＞3ヶ月毎の方＞症状が出た時のみの方
出張エリア
大津市・草津市（詳細は今後決めていきます。）
仮店舗（5月予定）
どうしても店舗でという方を対象に受け入れていきます。
大津市膳所にて、月2回程度。（日曜日の時間限定）
※詳細が決まり次第にお知らせします。
営業日・営業時間
【営 業 日】：土曜・日曜
【営業時間】：10:00～16:00
料金
| 施術料金 | 加算 | |
|---|---|---|
| 整体施術 | 5,500円（税込） | 駐車料金+出張料 |
| O脚矯正 | 6,600円（税込） | 駐車料金+出張料 |
※可能な限り「加算」を頂かないようにしますが、駐車場が必要な場合や
遠方に限り、1000円前後で加算させて頂きます。（要相談）