いつもなら賢威がバージョンアップされるたびに装飾タグ一覧を投稿してくださるブロガーさんがいらっしゃって助かるのですが、（賢威7が変更箇所が多く賢威6.2のままなのか）いつになっても投稿してくださる方がいらっしゃらないので、他力本願じゃダメだと思い作ってみました。
賢威7.0ビューティー版の表示です。タグの記述方法は同じだと思いますが、コーポレート版・プリティ版・クール版ではアイコンおよび表示が変わる可能性があります。
文字色
肯定
| 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> |
記述リスト（旧定義リスト）
「定義リスト（definition list）」は、html5では「記述リスト（description list）」と改められました。
- dt要素
- dd要素dd要素dd要素dd要素
定義リストとして使用する場合
- dt要素とdfn要素で用語をマークアップ
- dd要素に定義を記述します。
記述リストのデザインその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> |
連続改行
↓５つ連続した改行を入れます。
↑５つ連続した改行をいれました。
|
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> |
整形済みテキスト
整形済みテキストです。コードなどを記述する場合は以下のようにcode要素でマークアップします。
|
1 |
<code>コード</code> |
インラインの装飾
em要素: 強勢する（アクセントを付ける）箇所を表す
|
1 |
<p>em要素: <em>強勢する（アクセントを付ける）箇所を表す</em></p> |
strong要素: 強い重要性を表す
|
1 |
<p>strong要素: <strong>強い重要性を表す</strong></p> |
small要素: 免責・警告・著作権などの注釈や細目を表す
|
1 |
<p>small要素: <small>免責・警告・著作権などの注釈や細目を表す</small></p> |
s要素: すでに正確ではなくなった内容を表すテキストが入ります。
|
1 |
<p>s要素: <s>すでに正確ではなくなった内容を表す</s>テキストが入ります。</p> |
abbr要素: HTML等の略語
|
1 |
<p>abbr要素: <abbr title="HyperText Markup Language">HTML</abbr>等の略語</p> |
透過ボックス
サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。
WordPress版のimageフォルダには画像が入っていないため、html版をDLして”transparent-panel-bg2.jpg”をimageフォルダにアップロードする必要があります。
|
1 2 3 4 5 |
<div class="transparent-panel-wrap"> <div class="transparent-panel"> <p>サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。</p> </div> </div> |
テーブルレイアウト
標準のテーブル
| 項目名 | 項目名 | |
|---|---|---|
| 項目名が入ります | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 |
|
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 |
<div class="table-scroll"> <table style="width: 500px;"> <thead> <tr> <th></th> <th>項目名</th> <th>項目名</th> </tr> </thead> <tbody> <tr> <th>項目名が入ります</th> <td>項目内容</td> <td>項目内容</td> </tr> <tr> <th>項目名が入ります</th> <td>項目内容</td> <td>項目内容</td> </tr> <tr> <th>項目名が入ります</th> <td>項目内容</td> <td>項目内容</td> </tr> </tbody> </table> </div> |
比較用テーブル
| 項目内容 | 項目内容 | 項目内容 | |
|---|---|---|---|
| 項目名が入ります | 項目内容 | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 | 項目内容 |
| 項目名が入ります | 項目内容 | 項目内容 | 項目内容 |
|
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 |
<table class="table-comparison"> <thead> <tr> <th class="w25"></th> <th class="w25">項目内容</th> <th class="highlight w25"><span class="f12em">項目内容</span></th> <th class="w25">項目内容</th> </tr> </thead> <tfoot> <tr> <th>項目名が入ります</th> <td>項目内容</td> <td class="highlight"><span>項目内容</span></td> <td>項目内容</td> </tr> </tfoot> <tbody> <tr> <th>項目名が入ります</th> <td>項目内容</td> <td class="highlight"><span>項目内容</span></td> <td>項目内容</td> </tr> <tr> <th>項目名が入ります</th> <td>項目内容</td> <td class="highlight"><span>項目内容</span></td> <td>項目内容</td> </tr> <tr> <th>項目名が入ります</th> <td>項目内容</td> <td class="highlight"><span>項目内容</span></td> <td>項目内容</td> </tr> </tbody> </table> |
引用エリア
blockquote要素
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。
ここに引用文が入ります。ここに引用文が入ります。引用元: 参照記事のタイトル
|
1 2 3 4 5 6 7 |
<blockquote> <p>ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。<br> ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。<br> ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。<br> ここに引用文が入ります。ここに引用文が入ります。</p> <p class="link-ref"><cite>引用元: <a class="outbound" href="https://www.google.co.jp/" target="_blank">参照記事のタイトル</a></cite></p> </blockquote> |
q要素
ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります。
ここにテキストが入りますここにテキストが入ります。
ここにテキストが入ります文中に出てくる短文の引用部分への装飾です
ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります。
|
1 2 3 |
<p>ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります。<br> ここにテキストが入りますここにテキストが入ります。<br> ここにテキストが入ります<q>文中に出てくる短文の引用部分への装飾です</q>ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります。</p> |
チェックリスト
小さなチェックリスト
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
|
1 2 3 4 5 6 7 |
<ul class="check-list"> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> </ul> |
大きなチェックリスト
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
- チェックリストの項目が入ります。チェックリストの項目が入ります。
|
1 2 3 4 5 6 7 |
<ul class="check-list-l"> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> <li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li> </ul> |
アイコンセット
小さなアイコン
| HTMLの記述方法 | ブラウザでの表示結果 | ||
|---|---|---|---|
|
ポイント |
||
|
注意 |
||
|
NEW |
||
|
初心者 |
||
|
別ウインドウ |
||
|
矢印上 |
||
|
矢印右 |
||
|
矢印下 |
||
|
矢印左 |
||
|
ダウンロード |
||
|
|
||
|
ZIP |
||
|
メール |
||
|
ショッピングカート |
||
|
虫眼鏡 |
||
|
ホーム |
||
|
フォルダ |
||
|
時計 |
||
|
カレンダー |
||
|
ビル |
||
|
マップ |
大きなアイコン
| HTMLの記述方法 | ブラウザでの表示結果 | ||
|---|---|---|---|
|
ポイント |
||
|
注意 |
||
|
NEW |
||
|
初心者 |
||
|
別ウインドウ |
||
|
矢印上 |
||
|
矢印右 |
||
|
矢印下 |
||
|
矢印左 |
||
|
ダウンロード |
||
|
|
||
|
ZIP |
||
|
メール |
||
|
ショッピングカート |
||
|
虫眼鏡 |
||
|
ホーム |
||
|
フォルダ |
||
|
時計 |
||
|
カレンダー |
||
|
ビル |
||
|
マップ |
コンバージョンボタン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="al-c m20"> <a href="#" class="btn btn-green"><span class="">送信内容を確認する</span></a> </div> <div class="al-c m20"> <a href="#" class="btn btn-blue"><span class="">送信内容を確認する</span></a> </div> <div class="al-c m20"> <a href="#" class="btn btn-orange"><span class="">送信内容を確認する</span></a> </div> <div class="al-c m20"> <a href="#" class="btn btn-red"><span class="">送信内容を確認する</span></a> </div> |
