HTML要素のスタイル一覧

クラスレス（class-less）で使えるデモページ作成用の簡易CSSフレームワーク「kawa.css」のHTML要素のスタイル一覧。使用頻度が高そうなHTML要素にスタイルをあてています。使用頻度が低そうな要素は入っていないので要注意。※レスポンシブ対応はまだできていません。

1. 見出しと本文のレイアウトの確認
2. 見出しを連続で記述した場合のレイアウトの確認
3. 見出しが2行になる場合のレイアウトの確認
4. 段落と一覧（ulとol）のスタイル
5. ulとolの入れ子のスタイルの確認
6. pre要素
7. インラインテキスト・セマンティクス要素
8. 編集範囲の特定
9. ルビを入れたテキスト
10. Blockquote
11. 説明リスト
12. 画像
13. テーブル
14. 詳細折りたたみ要素
15. コードブロック
16. コンテンツ内のナビゲーションリンク一覧

1. 見出しと本文のレイアウトの確認

見出しレベル1

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。

見出しレベル2

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。

見出しレベル3

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。

見出しレベル4

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。

2. 見出しを連続で記述した場合のレイアウトの確認

見出しレベル1の文字

見出しレベル2の文字

見出しレベル3の文字

見出しレベル4の文字

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。

3. 見出しが2行になる場合のレイアウトの確認

見出しレベル1が2行になる場合の行間の確認のためのコンテンツ

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。

見出しレベル2が2行になる場合の行間の確認のためのコンテンツ

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。

見出しレベル3が2行になる場合の行間の確認のためのコンテンツ。2行目のコンテンツ

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。

見出しレベル4が2行になる場合の行間の確認のためのコンテンツ見出しレベル4が2行になる場合の行間の確認のためのコンテンツ

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。

4. 段落と一覧（ulとol）のスタイル

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

• 恥の多い生涯を送って来ました
• 自分には、人間の生活というものが、見当つかないのです
• 自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした
• 設備せられてあるものだとばかり思っていました

自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。

1. 恥の多い生涯を送って来ました
2. 自分には、人間の生活というものが、見当つかないのです
3. 自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした
4. 設備せられてあるものだとばかり思っていました

• 恥の多い生涯を送って来ました
• 自分には、人間の生活というものが、見当つかないのです
• 自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした
• 設備せられてあるものだとばかり思っていました

自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。

5. ulとolの入れ子のスタイルの確認

• 恥の多い生涯を送って来ました
• 自分には、人間の生活というものが、見当つかないのです
  • 恥の多い生涯を送って来ました
  • 自分には、人間の生活というものが、見当つかないのです
  • 自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした
  • 設備せられてあるものだとばかり思っていました
• 自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした
• 設備せられてあるものだとばかり思っていました
  1. 恥の多い生涯を送って来ました
  2. 自分には、人間の生活というものが、見当つかないのです
  3. 自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした
  4. 設備せられてあるものだとばかり思っていました

1. 恥の多い生涯を送って来ました
2. 自分には、人間の生活というものが、見当つかないのです
   • 恥の多い生涯を送って来ました
   • 自分には、人間の生活というものが、見当つかないのです
   • 自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした
   • 設備せられてあるものだとばかり思っていました
3. 自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした
4. 設備せられてあるものだとばかり思っていました
   1. 恥の多い生涯を送って来ました
   2. 自分には、人間の生活というものが、見当つかないのです
   3. 自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした
   4. 設備せられてあるものだとばかり思っていました

6. pre要素

自分は東北の田舎に生れましたので
        自分は東北の田舎に生れましたので
自分は東北の田舎に生れましたので
    スペース4つ

7. インラインテキスト・セマンティクス要素

• リンクテキストのスタイル
• HTMLのような略語はabbr要素で説明を追加できます
• bを使った強調要素のスタイル
• サイテーションのスタイル
• a { color: white; }などのコードのスタイル
• emを使った強調要素のスタイル
• iを使った要素のスタイル
• markで目立たせたいテキストのスタイル
• テキスト内の引用のスタイル
• smallを使ったテキストのスタイル
• strongを使った内容の重要性、重大性、または緊急性が高いテキストのスタイル
• 下付き文字のスタイル_{下に付く文字}
• 上付き文字のスタイル^{上に付く文字}
• uで囲ったテキストのスタイル

8. 編集範囲の特定

delを使って文章を修正insを使って修正文の追加

9. ルビを入れたテキスト

ルビをいれる場合は、この漢(かん)字(じ)のように表示されます。自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然（ぜんぜん）気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。

10. Blockquote

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

「自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。」

太宰治 「人間失格」

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

11. 説明リスト

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

説明する用語

説明文。恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

説明する用語

説明文。恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

説明する用語

説明文。恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

説明する用語

説明文。恥の多い生涯を送って来ました。

説明する用語

説明文。恥の多い生涯を送って来ました。

説明する用語

説明文。恥の多い生涯を送って来ました。

説明リストのタイトル

説明する用語のタイトルが長い場合

説明文。恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。

説明する用語のタイトルが長い場合

説明文。恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。

説明する用語のタイトルが長い場合

説明文。恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。

12. 画像

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

画像のタイトル

13. テーブル

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

14. 詳細折りたたみ要素

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

15. コードブロック

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

<body>
  <header>
    <a href="index.html"><img src="img/kawacss-logo.svg" width="240" height="72" alt="kawa.css" class="logo"></a>
  </header>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="elements.html">スタイル一覧</a></li>
      <li><a href="structure.html">ページ構造</a></li>
      <li><a href="flexible-typesize.html">タイプサイズの検証</a></li>
      <li><a href="elements-en.html">Style List</a></li>
    </ul>
  </nav>

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。

16. コンテンツ内のナビゲーションリンク一覧