HTMLタグとフォーマットの表示デモページ

HTMLタグとフォーマットの表示デモページ

2017.03.03
デモページ

このページは各HTML要素がどのように表示されるかを確認するためのページです。

目次

見出しのデモ

見出しのデモです

見出し弐(h2)

見出し２の下の文章です。見出し２の下の文章です。見出し２の下の文章です。見出し２の下の文章です。見出し２の下の文章です。見出し２の下の文章です。見出し２の下の文章です。見出し２の下の文章です。見出し２の下の文章です。

見出し２の下の文章です。見出し２の下の文章です。見出し２の下の文章です。

見出し参(h3)

見出し３の下の文章です。見出し３の下の文章です。見出し３の下の文章です。見出し３の下の文章です。見出し３の下の文章です。見出し３の下の文章です。見出し３の下の文章です。見出し３の下の文章です。見出し３の下の文章です。見出し３の下の文章です。

見出し３の下の文章です。見出し３の下の文章です。

見出し四(h4)

見出し４の下の文章です。見出し４の下の文章です。見出し４の下の文章です。見出し４の下の文章です。見出し４の下の文章です。見出し４の下の文章です。見出し４の下の文章です。見出し４の下の文章です。見出し４の下の文章です。見出し４の下の文章です。

見出し４の下の文章です。見出し４の下の文章です。見出し４の下の文章です。

見出し五(h5)

見出し5の下の文章です。見出し5の下の文章です。見出し5の下の文章です。見出し5の下の文章です。見出し5の下の文章です。見出し5の下の文章です。見出し5の下の文章です。見出し5の下の文章です。

見出し5の下の文章です。見出し5の下の文章です。

見出し六(h6)

見出し6の下の文章です。見出し6の下の文章です。見出し6の下の文章です。見出し6の下の文章です。見出し6の下の文章です。見出し6の下の文章です。見出し6の下の文章です。見出し6の下の文章です。見出し6の下の文章です。

見出し6の下の文章です。見出し6の下の文章です。

引用 (Blockquote) テスト

一行の引用。

ハングリーであれ、愚かであれ。

cite 参照を含む複数行の引用。

これは言語みたいなものだ。アルファベットすなわち音階を学び、文すなわちコードを学ぶ。そしてやがてホーンと即興で会話するようになる。即興で話すのはすばらしいことだと思うが、私には決して会得できないだろう。しかし音楽ともなれば、私は即座によろこんで会話する。そう、それがジャズ音楽のすべてだ。

スタン・ゲッツ

スタン・ゲッツ

テーブル

通常テーブル

社員給料 
山田太郎1ドルスティーブ・ジョブズが必要なサラリーと同じ額。
田中花子1,000万円ブログを書くために必要になる資金。
山本次郎1億円百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。
中山愛子10億円特に理由は要りません。

固定幅テーブル

社員給料
山田太郎1ドルスティーブ・ジョブズが必要なサラリーと同じ額。
田中花子1,000万円ブログを書くために必要になる資金。
山本次郎1億円百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。
中山愛子10億円特に理由は要りません。

スクロールあり

追加CSSに tbl-scroll クラスを設定することでスマホ表示でスクロールするテーブルを作成できます。

社員給料
山田太郎1ドルスティーブ・ジョブズが必要なサラリーと同じ額。
田中花子1,000万円ブログを書くために必要になる資金。
山本次郎1億円百聞は一見にしかず、ということで、カメラマンはブロガーの100倍。
中山愛子10億円特に理由は要りません。

定義リスト

定義リストタイトル
これは定義リストです。
定義
物事、領域、何かについての意味の正確な文章や説明: 詩を構成するものの定義。
ギャラリー
WordPress 2.5 から導入された、投稿に添付された画像を展示するための機能です。同じように、投稿を編集中にアップロードすると、そのファイルは「投稿に添付」されます。
Gravatar (グラバター)
グラバターとはグローバルに認識されるアバター (あるユーザーを表すグラフィックイメージや写真) です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。

非順序リスト (ネスト化)

  • リスト項目 1
    • リスト項目 1
      • リスト項目 1
      • リスト項目 2
      • リスト項目 3
      • リスト項目 4
    • リスト項目 2
    • リスト項目 3
    • リスト項目 4
  • リスト項目 2
  • リスト項目 3
  • リスト項目 4

順序リスト (ネスト化)

  1. リスト項目 1
    1. リスト項目 1
      1. リスト項目 1
      2. リスト項目 2
      3. リスト項目 3
      4. リスト項目 4
    2. リスト項目 2
    3. リスト項目 3
    4. リスト項目 4
  2. リスト項目 2
  3. リスト項目 3
  4. リスト項目 4

HTML 要素タグテスト

  • Strong タグ：太字
  • Code タグ：word-wrap: break-word;
  • Delete タグ：打ち消し線

Preformatted タグ

<pre> タグは複数行のコードのスタイリングに使います。

.post-title {
　　margin: 0 0 5px;
　　font-weight: bold;
　　font-size: 38px;
　　line-height: 1.2;
　　and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}