見出し

見出し(デフォルト)

h1見出しが入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h2見出しが入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h3見出しが入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h4見出しが入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h5見出しが入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h6見出しが入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

見出し(リンク)

h1見出し(リンク)が入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h2見出し(リンク)が入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h3見出し(リンク)が入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h4見出し(リンク)が入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h5見出し(リンク)が入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h6見出し(リンク)が入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

見出し(装飾オフ)

h1見出し(装飾オフ)が入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h2見出し(装飾オフ)が入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h3見出し(装飾オフ)が入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h4見出し(装飾オフ)が入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h5見出し(装飾オフ)が入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

h6見出し(装飾オフ)が入ります。

ここにテキストが入りますここにテキストが入りますここにテキストが入ります。

文字色

肯定

HTMLの記述方法 ブラウザでの表示結果
文字色を紺色
文字色を水色

否定・禁止

HTMLの記述方法 ブラウザでの表示結果
文字色を赤色

シンプルな強調

HTMLの記述方法 ブラウザでの表示結果
文字色をオレンジ色
文字色をピンク色
文字色を紫色

用語の解説・例示

HTMLの記述方法 ブラウザでの表示結果
文字色を緑色

その他の色

HTMLの記述方法 ブラウザでの表示結果
文字色を青色
文字色を黄色
文字色をオリーブ色
文字色をライム色
文字色を黒色
文字色を灰色
文字色を白色変更可能
文字色を茶色

マーカー表示

HTMLの記述方法 ブラウザでの表示結果
黄色の背景色
オレンジ色の背景色
ピンク色の背景色
青色の背景色
ライム色の背景色
灰色の背景色

テキストの表現

リスト

ul要素

  • リストが入ります。
  • リストが入ります。長めのリストはこのようなデザインになります。長めのリストはこのようなデザインになります。長めのリストはこのようなデザインになります。

ol要素

  1. リストが入ります。
  2. リストが入ります。

横並び

リストを横並びにして表示します。

  • リストが入ります。
  • リストが入ります。

リストの先頭に表示するマーカー文字を非表示

  • リストが入ります。
  • リストが入ります。

リストのデザインその1

  • テキストが入ります。

    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

  • テキストが入ります。

    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

  • テキストが入ります。

    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

    1. リスト
    2. リスト
    3. リスト
    4. リスト
  • テキストが入ります。

    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

リストのデザインその2

  1. テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
  2. テキストが入ります。
  3. テキストが入ります。
  4. テキストが入ります。
  5. テキストが入ります。
  6. テキストが入ります。
  7. テキストが入ります。
  8. テキストが入ります。
  9. テキストが入ります。
  10. テキストが入ります。

チェックリスト

  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。
  • チェックリストの項目が入ります。チェックリストの項目が入ります。

記述リスト(旧定義リスト)

「定義リスト(definition list)」は、html5では「記述リスト(description list)」と改められました。

dt要素
dd要素dd要素dd要素dd要素

定義リストとして使用する場合

dt要素とdfn要素で用語をマークアップ
dd要素に定義を記述します。

記述リストのデザインその1

記述リストのデザインその1
要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1
要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。
記述リストのデザインその1
要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の文字数の方が少なくなるとデザインが崩れます。

記述リストのデザインその2

記述リストのデザインその2
要素が縦に並びます。
記述リストのデザインその2
要素が縦に並びます。
記述リストのデザインその2
要素が縦に並びます。

Q&Aリスト

ここには質問文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには質問文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

アコーディオン
ここには質問文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには質問文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

ランキングリスト

  1. サンプル
    項目名などが入ります
    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
  2. サンプル
    項目名などが入ります
    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
  3. サンプル
    項目名などが入ります
    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
  4. 項目名などが入ります
    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
  5. 項目名などが入ります
    ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。ランキングに関する説明文が入ります。
  6. 項目名などが入ります
  7. 項目名などが入ります
  8. 項目名などが入ります
  9. 項目名などが入ります
  10. 項目名などが入ります

情報比較エリア

  1. サンプル

    商品名が入ります(メーカー名)

    価格:
    2,000円(税込)
    容量:
    100ml
    価格 5.0
    使用感 3.5
    効果 4.0

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  2. サンプル

    商品名が入ります(メーカー名)

    価格:
    2,000円(税込)
    容量:
    100ml
    価格 5.0
    使用感 3.5
    効果 4.0

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

  3. サンプル

    商品名が入ります(メーカー名)

    価格:
    2,000円(税込)
    容量:
    100ml
    価格 5.0
    使用感 3.5
    効果 4.0

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。商品に関する情報が入ります。

    管理人のレビュー

    管理人のレビューが入ります。管理人のレビューが入ります。

    管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。管理人のレビューが入ります。

    商品詳細を見る

連続改行

↓5つ連続した改行を入れます。






↑5つ連続した改行をいれました。

「br num=”x”」のxに数字をいれると、数字の数だけ改行が入ります。

注意書き

※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。

傍点

テキスト上にを打ちます。



当院おすすめインフォメーション!

キャンペーン企画