スタイルシート表示確認用ページ(h1)

当サイトで使用しているスタイルシートの表示確認のためのリソース。ちなみにこれは冒頭の導入説明部分です。(.intro)

各要素のサンプル(h2)

第三レベル見出し(h3)

第四レベル見だし(h4要素)から第六レベル見だし(h6要素)は使用していないのでスタイル指定はありません。

ちなみにこれは段落です。(p)

リスト

リストには順不同リスト(ul要素)、順序付きリスト(ol要素)、それに定義リスト(dl要素)の三種類が存在します。

それぞれ論理的な意味が異なるので、それぞれの用法を守って正しく使いましょう。

  1. これは順序付きリストです。
  2. 順番に意味がある場合はこちらを使用します。
  3. 使いそうで意外と使わない要素の一つです。
これは定義される内容です(dt)
これはdt要素で示したものの定義、すなわち説明内容です。(dd)
実際の用法
リソースタイトルとその説明などといったように、非常に広範囲に応用されています。会話文のマークアップもこの形式で行われることが多いようです。

テーブル

テーブル(table)は表です。机ではありません。当然レイアウトをするための要素でもありません。

旅行先の検討(caption)
検討項目(th) 海 山 自宅ステイ
結論 それぞれに一長一短があり一概には決めがたい。
費用 ２万円程度(td) ２万５０００円−３万円程度 ０円
所要時間 ３時間 ４時間 ０分
みどころ 綺麗な砂浜に、水平線の彼方に沈む夕日 冷涼な空気に、滾々と湧き出る清涼な水 いつもの休みと変わらない落ち着いた日常
リスク 離岸流や高波に起因する海難事故 滑落や表層雪崩などの山岳事故 休み明けに振り返ったときの虚無感

引用

引用を明示するには、ブロックレベル要素であるblockquote要素とインライン要素であるq要素との二種類の方法があります。

文書中でほかの文書からの引用箇所を明示的に示すことがあります。このような場合はblockquote要素として引用箇所を扱います。引用元を示すときにはcite要素を用います。(中略)

ひとかたまりのブロックとしての引用ではなく、本文の途中でフレーズとして引用する場合はq要素を使って示すことができます。

上記の例がblockquote要素です。下記の例はq要素です。

神崎正英氏は、ごく簡単なHTMLの説明(cite)で、HTMLについて画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束(q)と述べられている。

整形済みテキスト

これは整形済みテキストです。
     改行やスペースなどがそのまま反映されます。
       タブ文字は避けたほうが良いらしいです。
   プログラムのコードなどを公開するときに役立つでしょう。
           このpre要素のpreは、Preformatted Textの略称です。

削除・追記

公開後に削除・追記する場合は、それぞれins要素、del要素を用います。datetime属性でその時刻を明治明示します。

これは削除された段落です。

これは追記された段落です。

水平罫線

hr要素は、区切りを入れる必要があるときに用いられます。

その他のインライン要素

各クラス・IDのサンプル

全ページで使用

これは補足説明です。(.more)

これは参考情報です。(.note)

定義リスト中の参考情報
これは参考情報です。(dd.note)

YSFSページで使用

配布物の名称(.download)
MD5チェックサム表示欄(.md5)
紹介文(.description)
最終更新日時(.date)
アドオン紹介
  • 収録データ名1
  • 収録データ名2
  • 収録データ名3
  • 以下同様

これは外部の用語集へのリンク(.keyword)です。

掲示板で使用

フォームタイトル(legend)
(input type="text")
field2
foo1 foo2 foo3 (input type="radio")
field3
(select,optpgroup,option)
submit?(.bbs_submit)

送信先は存在しないURIです。

親記事タイトル(.bbs_thread h3)

投稿者情報(.bbs_mes_header)
アイコン(.bbs_icon)

親記事本文(.bbs_message)

返信(レスポンス)記事タイトル(.bbs_response h3)

投稿者情報
アイコン

記事本文

返信(レスポンス)記事タイトル

投稿者情報

アップロードファイル(.bbs_attach)

記事本文

リンクページで使用

リンク先サイト名(.link dt)
管理人名(.master)
紹介文

Return to top T(.return)