例:ここはmain要素の中です。
例:引き続きここもmain要素の中です。
スタイルシートの適用結果をサンプル文書で確認
スタイルシートプレビューはHTML文書にスタイルシートを適用した結果を例示するためのサンプル文書です。あくまでも例示が目的ですので、適切なマークアップになっていない箇所があります。また、マークアップは一例に過ぎませんので、全てのパターンを網羅している訳ではありません。
※スタイルシートプレビューは現在アルファ版です。
ここではHTML文書の大きな構成単位となる要素群のサンプルを示します。
それ自身で完結した部分はarticle要素としてマークアップします。
一般的なセクションはsection要素としてマークアップします。
ナビゲーション・リンクを伴うセクションはnav要素としてマークアップします。
補足記事のように本文から逸れた内容のセクションはaside要素としてマークアップします。
セクションの見出しはh1,h2,h3,h4,h5,h6要素としてマークアップします。※HTML5では、要素名の数字とアウトラインの階層とが必ずしも一致しません。
導入部分やナビゲーションの補助となるグループはheader要素としてマークアップします。
これはheader要素の中のp要素です。
セクショニング・コンテンツのフッターはfooter要素としてマークアップします。
これはsection要素の中のp要素です。
body要素またはarticle要素の連絡先情報はaddress要素としてマークアップします。
これはarticle要素の中のp要素です。
これはarticle要素の中のaddress要素の中のp要素です。
段落はp要素としてマークアップします。※以下の例は吾輩は猫である(夏目漱石)からの引用です。
例:吾輩は猫である。名前はまだ無い。
例:どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。
例:この書生の掌の裏でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗に眼が廻る。胸が悪くなる。到底助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。
例:ふと気が付いて見ると書生はいない。たくさんおった兄弟が一疋も見えぬ。肝心の母親さえ姿を隠してしまった。その上今までの所とは違って無暗に明るい。眼を明いていられぬくらいだ。はてな何でも容子がおかしいと、のそのそ這い出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。
例:ようやくの思いで笹原を這い出すと向うに大きな池がある。吾輩は池の前に坐ってどうしたらよかろうと考えて見た。別にこれという分別も出ない。しばらくして泣いたら書生がまた迎に来てくれるかと考え付いた。ニャー、ニャーと試みにやって見たが誰も来ない。そのうち池の上をさらさらと風が渡って日が暮れかかる。腹が非常に減って来た。泣きたくても声が出ない。仕方がない、何でもよいから食物のある所まであるこうと決心をしてそろりそろりと池を左りに廻り始めた。どうも非常に苦しい。そこを我慢して無理やりに這って行くとようやくの事で何となく人間臭い所へ出た。ここへ這入ったら、どうにかなると思って竹垣の崩れた穴から、とある邸内にもぐり込んだ。縁は不思議なもので、もしこの竹垣が破れていなかったなら、吾輩はついに路傍に餓死したかも知れんのである。一樹の蔭とはよく云ったものだ。この垣根の穴は今日に至るまで吾輩が隣家の三毛を訪問する時の通路になっている。さて邸へは忍び込んだもののこれから先どうして善いか分らない。そのうちに暗くなる、腹は減る、寒さは寒し、雨が降って来るという始末でもう一刻の猶予が出来なくなった。仕方がないからとにかく明るくて暖かそうな方へ方へとあるいて行く。今から考えるとその時はすでに家の内に這入っておったのだ。(以下略)
場面転換など段落レベルでのテーマの区切りはhr要素としてマークアップします。
例:これはテーマが変わる前の段落です。
例:これはテーマが変わった後の段落です。
整形済みテキストはpre要素としてマークアップします。
まずは詩(和歌)をマークアップする例:
秋の田の かりほの庵の 苫をあらみ わが衣手は 露にぬれつゝ 春過ぎて 夏來にけらし 白妙の 衣ほすてふ 天の香具山
次にソースコードをマークアップする例:
#include <stdio.h>
int main(void)
{
printf("Hello, world!\n");
return 0;
}
そしてASCIIアートをマークアップする例:
% __ __ __ __ __ __ __ __ __ __ __ __ __ __ 100 | * | 90 | * * | 80 | * * | 70 | @ * | 60 | @ * | 50 | * @ * | 40 | @ * | 30 | * @ @ @ * | 20 | | 10 | @ @ @ @ @ | 0 5 10 15 20 25 30 35 40 45 50 55 60 65 70 Flash frequency (Hertz)
引用されたセクションはblockquote要素としてマークアップします。※以下の例は走れメロス(太宰治)からの引用です。
まずは一段落だけの引用:
メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此のシラクスの市にやって来た。メロスには父も、母も無い。女房も無い。十六の、内気な妹と二人暮しだ。この妹は、村の或る律気な一牧人を、近々、花婿として迎える事になっていた。結婚式も間近かなのである。メロスは、それゆえ、花嫁の衣裳やら祝宴の御馳走やらを買いに、はるばる市にやって来たのだ。先ず、その品々を買い集め、それから都の大路をぶらぶら歩いた。メロスには竹馬の友があった。セリヌンティウスである。今は此のシラクスの市で、石工をしている。その友を、これから訪ねてみるつもりなのだ。久しく逢わなかったのだから、訪ねて行くのが楽しみである。歩いているうちにメロスは、まちの様子を怪しく思った。ひっそりしている。もう既に日も落ちて、まちの暗いのは当りまえだが、けれども、なんだか、夜のせいばかりでは無く、市全体が、やけに寂しい。のんきなメロスも、だんだん不安になって来た。路で逢った若い衆をつかまえて、何かあったのか、二年まえに此の市に来たときは、夜でも皆が歌をうたって、まちは賑やかであった筈だが、と質問した。若い衆は、首を振って答えなかった。しばらく歩いて老爺に逢い、こんどはもっと、語勢を強くして質問した。老爺は答えなかった。メロスは両手で老爺のからだをゆすぶって質問を重ねた。老爺は、あたりをはばかる低声で、わずか答えた。
次は複数段落の引用:
メロスは口惜しく、地団駄踏んだ。ものも言いたくなくなった。
竹馬の友、セリヌンティウスは、深夜、王城に召された。暴君ディオニスの面前で、佳き友と佳き友は、二年ぶりで相逢うた。メロスは、友に一切の事情を語った。セリヌンティウスは無言で首肯き、メロスをひしと抱きしめた。友と友の間は、それでよかった。セリヌンティウスは、縄打たれた。メロスは、すぐに出発した。初夏、満天の星である。
メロスはその夜、一睡もせず十里の路を急ぎに急いで、村へ到着したのは、翌る日の午前、陽は既に高く昇って、村人たちは野に出て仕事をはじめていた。メロスの十六の妹も、きょうは兄の代りに羊群の番をしていた。よろめいて歩いて来る兄の、疲労困憊の姿を見つけて驚いた。そうして、うるさく兄に質問を浴びせた。
「なんでも無い。」メロスは無理に笑おうと努めた。「市に用事を残して来た。またすぐ市に行かなければならぬ。あす、おまえの結婚式を挙げる。早いほうがよかろう。」
妹は頬をあからめた。
「うれしいか。綺麗な衣裳も買って来た。さあ、これから行って、村の人たちに知らせて来い。結婚式は、あすだと。」
順序付きリストはol要素としてマークアップします。
順序無しリストはul要素としてマークアップします。
関連リストはdl要素としてマークアップします。※HTML4では定義リストと呼ばれていました。
それ自身で完結するようなフローコンテンツはfigure要素としてマークアップします。
まずは整形済みテキストの例:
続いて画像の例:
グローバル属性等を用いて子要素を意味付けする場合はdiv要素としてマークアップします。
例:ここはtitle属性を持つdiv要素の中です。
例:引き続きここもtitle属性を持つdiv要素の中です。
文書の主要テーマに直接関係している部分はmain要素としてマークアップします。
例:ここはmain要素の中です。
例:引き続きここもmain要素の中です。
ハイパーリンクはa要素としてマークアップします。
例:これは未訪問ハイパーリンクです。※ダミーページへのリンクです。
例:これは訪問済みハイパーリンクです。※固定ダミーページへのリンクです。
ハイパーリンク例示用のsection要素内のp要素その1
ハイパーリンク例示用のsection要素内のp要素その2
ハイパーリンク例示用のsection要素内のp要素その1
ハイパーリンク例示用のsection要素内のp要素その2
強調する部分はem要素としてマークアップします。
例:これは強調された部分です。
例:これはさらに強調された部分です。(ネストしたem要素)
重要な部分はstrong要素としてマークアップします。
例:これは重要な部分です。
例:これはさらに重要な部分です。(ネストしたstrong要素)
細目や注釈はsmall要素としてマークアップします。
例:これは細目です。
例:これは重要な細目です。(strong要素の中のsmall要素)
例:HTML5でsmall要素は再定義されました(HTML4では物理マークアップに使われます)。
不正確または関連のない部分はs要素としてマークアップします。
例:これは不正確な部分です。
例:HTML5でs要素は再定義されました(HTML4では非推奨要素です)。
作品名はcite要素としてマークアップします。
例:この文書はW3CのHTML5を参考にしています。
テキストレベルでの引用部分はq要素としてマークアップします。
例:q要素は引用部分が短く、インラインで引用したい場合に使用され
ます。
用語例はdfn要素としてマークアップします。
例:マークアップ言語のHTML4はSGMLアプリケーションです。
例:マークアップ言語のXMLはSGMLのサブセットです。(abbr要素を含んだdfn要素)
略語や頭字語はabbr要素としてマークアップします。
例:代表的なマークアップ言語としてSGMLが挙げられます。
24時間表記の時刻と正確な日付はtime要素としてマークアップします。
例:昼休みはから始まります。
例:HAL9000は、映画ではに、小説ではに稼働状態に入りました。
コードの断片はcode要素としてマークアップします。
例:COBOLのDISPLAY
命令はCのprintf()
関数に相当します。
変数はvar要素としてマークアップします。
例:引数のfooとbarはそれぞれコピー元とコピー先のファイル名で置き換えます。
出力サンプルはsamp要素としてマークアップします。
例1:このプログラムは標準出力にhello, worldという文字列を出力します。
キーボードや音声等による入力はkbd要素としてマークアップします。
例:改行するにはEnterを押します。
例:困ったときはCtrl+Alt+Deleteで何とかします。(ネストしたkbd要素)
例:hostnameコマンドで調べたlocalhost.localdomainを入力して下さい。(samp要素を含んだkbd要素)
上付き文字はsup要素としてマークアップします。
例1:私にはE=mc2という数式が理解できません。
下付き文字はsub要素としてマークアップします。
例:座標(x10, y10)を設定しました。
思考や技術用語、船名等はi要素としてマークアップします。
例:彼は同じ名前空間のまま別の意味を持たせるなんて無理矢理だと思いました。
例:HTMLとTeXとではdevice indipendentの考え方が異なります。
例:現存する戦列艦はHMS Victoryだけです。(abbr要素を含んだi要素)
特に重要でないキーワードや製品名等はb要素としてマークアップします。
例:ポケットの中にあるどら焼きで体力を回復することが出来ます。
例:サーブのJAS39はグリペンの愛称で知られています。
よく分からないけれど特別にレンダリングされるべきテキストはu要素としてマークアップします。仕様書では中国語での固有名詞とスペル間違いの例が挙げられています。※他に適切な要素が見当たらない場合にのみ使います。
例:訂正を意味する英単語はcollectではありません。
参照を目的としてマークまたはハイライトされる部分はmark要素としてマークアップします。
例:これはマークされた部分です。
ルビを振る部分はruby要素としてマークアップします。
例:これはルビを振られるテキストです。
例:日本語では漢字、平仮名、片仮名を使います。
例:ルビにはアルファベットを振っても構わないでしょう。
例:ルビは印刷用語に由来し、もともとは約5.5ptの活字のことをいいます。
例:ルビは対応していない環境で見ると、あまりエレガントではありません。
Unicodeの双方向アルゴリズムを周囲から分離する部分はbdi要素としてマークアップします。※例えば、右から左に表記するヘブライ語がテキスト中にあると、続く数字等の配置がおかしくなってしまいます。ヘブライ語部分をbdi要素としてマークアップすることで、双方向アルゴリズムの弊害を回避することが出来ます。
例:これは双方向アルゴリズムを周囲から分離した部分です。
Unicodeの双方向アルゴリズムを明示的に制御(上書き)する部分はbdo要素としてマークアップします。
例:これは左から右へと表記するよう明示的に指定された部分です。(dir属性にltrを指定したbdo要素)
例:これは右から左へと表記するよう明示的に指定された部分です。(dir属性にrtlを指定したbdo要素)
何からの範囲として示す部分はspan要素としてマークアップします。※グローバル属性と組み合わせて使うことが想定されています。
例:これは何からの範囲として示された部分です。(title属性を持つspan要素)
例:色を意味する英単語の綴りは、イギリス英語ではcolourですが、アメリカ英語ではcolorです。(lang属性を持つspan要素)
改行はbr要素としてマークアップします。
例:ここは改行前です。
ここは改行後です。
改行可能な位置はwbr要素としてマークアップします。
例:www.
追記部分はins要素としてマークアップします。
例:ins要素にはflow contentを含めることが出来ます。ただし、場合によってはphrasing contentしか含めることが出来ません。
例:これはp要素を丸ごと含んだins要素です。
削除部分はdel要素としてマークアップします。
例:del要素には如何なる場合でもflow contentを含めることが出来ます。del要素にflow contentを含めることが出来ない場合もあります。
例:これはp要素を丸ごと含んだdel要素です。
比較項目(thead要素中のth要素) | HTMLのテーブル | 高級木製テーブル |
---|---|---|
比較結果(tfoot要素中のth要素) | 表として使いましょう(tfoot要素中のtd要素) | 家具として使いましょう(tfoot要素中のtd要素) |
時間割表(tbody要素中のth要素) | 作れます(tbody要素中のtd要素) | 作れません(tbody要素中のtd要素) |
顧客名簿 | 作れます | 作れません |
碁盤 | 置けません | 置けます |
恋人との夕食 | 出来ません | 出来ます |
徹甲弾 | 止められません | |
榴弾 | ||
レイアウト | うちの子じゃありません | グッドデザイン賞受賞 |
スタイルシートを使いましょう | お揃いの椅子もあります |
進捗状況を示すプログレスバーはprogress要素としてマークアップします。
例:
例:
例:
例:
一定の範囲内の数量や割合を示すメーターはmeter要素としてマークアップします。
例:
例:
例: