Stylesheet Preview : Improved Houyhnhnm Stylesheet(h1要素)

見出しのスタイル(h2要素)

第3レベルの見出し(h3要素)

第4レベルの見出し(h4要素)

第5レベルの見出し(h5要素)
第6レベルの見出し(h6要素)

HTMLにおいて、見出し(h1-h6)は文書の論理構造を示す大切な要素です。単に文字を大きくする目的で見出しを使うのはNGです。全ての環境で見出しが大きな文字で表現されるとは限りません。文書の構造に基づいて、適切に見出しをマークアップする必要があります。見出しが適切だとウェブページも読み易くなります。スタイルシートによるレイアウトでも、見出しのスタイルが全体の良し悪しに影響してくるように思えます。(p要素)

そしてこれはp要素による段落です。p要素はそれが段落であることを明示します。多くの視覚系ユーザエージェントでは、p要素の前後にスペースを空けることで段落を表現します。しかし、見出し同様、それは表現の一形態に過ぎません。音声系ユーザエージェントであれば、読み上げの間隔を広げることで段落を表現するかも知れません。スタイルシートを使えば、空行ではなくインデントで段落を表現することも可能です。p要素はそれぞれのユーザエージェントが適切に表現します。スペースを空ける目的でp要素を使ってはいけません。(p要素)

連絡先のスタイル

連絡先を示すにはaddress要素を使います。ここはaddress要素の中です。
ウェブページ全体ではなく、ある主要な部分に対する連絡先を示すことも可能です。
詳細は HTML 4.01 Specification をご覧下さい:http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.6

引用のスタイル

引用はblockquote要素またはq要素で示します。

blockquote要素は、その部分が引用された文章であることを示す要素です。引用部分が長く、ブロックレベルで引用したい場合に使用されます。一般的なブラウザでは左右がインデントされて表示されますが、インデントさせることが目的の場合はスタイルシートを利用するようにしてください。

さらに長めの引用。

吾輩は猫である。名前はまだ無い。

どこで生まれたか頓と見當がつかぬ。何ても暗薄いじめじめした所でニャー/\泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間で一番獰惡な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。掌の上で少し落ち付いて書生の顏を見たが所謂人間といふものゝ見始であらう。此の時妙なものだと思つた感じが今でも殘つて居る。第一毛を以て裝飾されべき筈の顏がつる/\して丸で藥罐だ。其後猫にも大分逢つたがこんな片輪には一度も出會はした事がない。加之顏の眞中が餘りに突起して居る。そうして其穴の中から時々ぷう/\と烟を吹く。どうも咽せぽくて實に弱つた。是が人間の飮む烟草といふものである事は漸く此頃知つた。

此書生の掌の裏でしばらくはよい心持に坐つて居つたが、暫くすると非常な速力で運轉し始めた。書生が動くのか自分丈が動くのか分らないが無暗に眼が廻る。胸が惡くなる。到底助からないと思つて居ると、どさりと音がして眼から火が出た。夫迄は記憶して居るがあとは何の事やらいくら考へ出さうとしても分らない。

ふと氣が付いて見ると書生は居ない。澤山居つた兄弟が一疋も見えぬ。肝心の母親さへ姿を隱して仕舞つた。其上今迄の所とは違つて無暗に明るい。眼を明いて居られぬ位だ。果てな何でも容子が可笑いと、のそ/\這ひ出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。

漸くの思ひで笹原を這ひ出すと向ふに大きな池がある。吾輩は池の前に坐つてどうしたらよからうと考へて見た。別に是といふ分別も出ない。暫くして泣いたら書生が又迎に來てくれるかと考へ付いた。ニャー、ニャーと試みにやつて見たが誰も來ない。其内池の上をさら/\と風が渡つて日が暮れかゝる。腹が非常に減つて來た。泣き度ても聲が出ない。仕方がない、何でもよいから食物のある所迄あるかうと决心をしてそろりそろりと池を左りに廻り始めた。どうも非常に苦しい。そこを我慢して無理やりに這つて行くと漸くの事で何となく人間臭ひ所へ出た。此所へ這入つたら、どうにかなると思つて竹垣の崩れた穴から、とある邸内にもぐり込んだ。(以下略)

一方、q要素は引用部分が短く、インラインで引用したい場合に使用されます。

整形済テキストのスタイル

詩やソースコード、ASCIIアートなど、空白文字に意味のある部分はpre要素を使って表します。

  朝御飯  納豆ねばねば  平城京
    改行が  そのまま反映  されますよ
      空白も    連続しても   そのまんま
#include <stdio.h>

int main(void)
{
    printf("Hello, world!\n");
    return 0;
}
  %   __ __ __ __ __ __ __ __ __ __ __ __ __ __  
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)

インライン要素のスタイル

アンカーのスタイル

見出しの中のアンカー(h3要素)

見出しの中のアンカー(h4要素)

見出しの中のアンカー(h5要素)
見出しの中のアンカー(h6要素)
テーブルの中のアンカー(caption要素)
未訪問リンク #1713266340 (ダミーページ) 未訪問リンク #1713266340 (ダミーページ) 訪問済みリンク (このページ)
未訪問リンク #1713266340 (ダミーページ) 未訪問リンク #1713266340 (ダミーページ) 訪問済みリンク (このページ)
未訪問リンク #1713266340 (ダミーページ) 未訪問リンク #1713266340 (ダミーページ) 訪問済みリンク (このページ)
未訪問リンク #1713266340 (ダミーページ) 訪問済みリンク (このページ) 未訪問リンク #1713266340 (ダミーページ)
訪問済みリンク (このページ) 未訪問リンク #1713266340 (ダミーページ) 未訪問リンク #1713266340 (ダミーページ)

リスト(箇条書)のスタイル

順序無しリスト(ul要素)

順番に意味の無い箇条書きにはul要素を使います。

順序付きリスト(ol要素)

順番が意味を持つ箇条書きにはol要素を使います。

  1. 順序付きリスト、ol要素です
  2. リストの項目はli要素で表します
  3. リストは入れ子にすることも出来ます
    1. ol要素の中にol要素を入れました
      1. ol要素の中のol要素にol要素を入れました(その1)
      2. ol要素の中のol要素にol要素を入れました(その2)
      3. ol要素の中のol要素にol要素を入れました(その3)
    2. 入れ子にする時は注意が必要です
      1. ol要素の直下はli要素しか配置できません
      2. ol要素の直下にol要素を入れないようにしましょう
      3. 入れ子の階層はほどほどが良いでしょう
    3. 順序無しリスト(ul要素)との入れ子も可能です
      • ol要素の中のol要素にul要素を入れました(その1)
      • ol要素の中のol要素にul要素を入れました(その2)
      • ol要素の中のol要素にul要素を入れました(その3)
  4. リストのマーカがアラビア数字であるとは限りません
  5. 本質的に列挙すべきものなら、項目が一つだけでも構いません

定義リスト(dl要素)

用語と説明の列挙にはdl要素を使います。

これは定義される用語です(dt要素)
そしてこれは用語に対する説明です(dd要素)
定義リストの入れ子について(dt要素)
質問(dt要素)
定義リストは入れ子にすることができますか?(dd要素)
回答(dt要素)
はい、定義リストは入れ子にすることができます(dd要素)
dd要素のみが連続して出現する場合(dt要素)
dd要素だけの連続出現が悪いとは仕様には書かれていません(dd要素)
dd要素だけの連続出現が良いとは仕様には書かれていません(dd要素)
dt要素のみが連続して出現する場合(dt要素)
dt要素が連続出現したらどうなる?(dt要素)
dt要素だけが連続出現した時の対応関係は謎です(dd要素)
dt要素とdd要素がそれぞれ連続して出現する場合(dt要素)
それぞれ連続出現するのは仕様で示されている?(dt要素)
dt要素とdd要素が両方連続する例は仕様でも示されています(dd要素)
こうなると、もう何でも「あり」のような気がしてきました(dd要素)
定義リストの用途
定義リストの作り方
  1. 始めにdl要素を記述します
  2. そしてdt要素を記述します
  3. 最後にdd要素を記述します

引用の中のリスト

まずは順序なしリスト(ul)。

次は順序付きリスト(ol)。

  1. 栃木縣上都賀郡足尾銅山鑛毒の慘酷なる事實は、今尚其被害地なる栃木群馬茨城埼玉の四縣下人民より提出しつゝある鑛業停止請願に依り又群馬縣々會も鑛業停止すべきを内務大臣に建議を爲したるを以て明なり。是れ一國の大問題にして一日たりとも等閑に附し去るを得ず。然るに多年政府の之を等閑に附し去る理由如何。
  2. 明治廿四年十二月十八日本員等は國務大臣に向て足尾銅山鑛毒被害に關する當局者の職責怠慢を質問せり。不幸にして第二議會解散に會ひ、其答辯書は新聞紙上に於て之を見たり。曰く其被害の原因に付て未だ確實なる試驗の成績に基ける定論あるに非ず。曰く、粉鑛採聚器を新設し一層鑛物の流失を防止するの準備をなせりと。然るに爾來鑛業の増加は益々甚しく、被害の區域愈々擴大せし事實あるは如何。
  3. 明治廿五年五月廿三日、本員等は如此前後撞着の答辯に對し更に第二囘の質問をなし、農科大學の試驗成績を以て國務大臣の明答を促したり。然るに其答辯には、鑛業の害たるは試驗の結果によりて之を認めたりと自白しながら、其損害たるや鑛業を停止すべき程度には非ずと主張し、且つ鑛業人に於ては現に粉鑛採聚器設置の準備を爲し、將來植物の生長を害する如き事なしと斷言しながら、其所謂粉鑛採聚器を設置したる六週年後の今日、鑛業の被害益々増加するを默視するの理由如何。

終わりに定義リスト(dl)。

質問書 項番一
栃木縣上都賀郡足尾銅山鑛毒の慘酷なる事實は、今尚其被害地なる栃木群馬茨城埼玉の四縣下人民より提出しつゝある鑛業停止請願に依り又群馬縣々會も鑛業停止すべきを内務大臣に建議を爲したるを以て明なり。是れ一國の大問題にして一日たりとも等閑に附し去るを得ず。然るに多年政府の之を等閑に附し去る理由如何。
質問書 項番二
明治廿四年十二月十八日本員等は國務大臣に向て足尾銅山鑛毒被害に關する當局者の職責怠慢を質問せり。不幸にして第二議會解散に會ひ、其答辯書は新聞紙上に於て之を見たり。曰く其被害の原因に付て未だ確實なる試驗の成績に基ける定論あるに非ず。曰く、粉鑛採聚器を新設し一層鑛物の流失を防止するの準備をなせりと。然るに爾來鑛業の増加は益々甚しく、被害の區域愈々擴大せし事實あるは如何。
質問書 項番三
明治廿五年五月廿三日、本員等は如此前後撞着の答辯に對し更に第二囘の質問をなし、農科大學の試驗成績を以て國務大臣の明答を促したり。然るに其答辯には、鑛業の害たるは試驗の結果によりて之を認めたりと自白しながら、其損害たるや鑛業を停止すべき程度には非ずと主張し、且つ鑛業人に於ては現に粉鑛採聚器設置の準備を爲し、將來植物の生長を害する如き事なしと斷言しながら、其所謂粉鑛採聚器を設置したる六週年後の今日、鑛業の被害益々増加するを默視するの理由如何。

視覚系要素のスタイル

上付き文字はsup要素で示します。例えば E=MC2 など。環境によっては上手く伝わらないでしょう。


下付き文字はsub要素で示します。例えば TEX など。視覚系要素に頼らないウェブページ作りが大切です。

追加・削除部分のスタイル

追加部分と削除部分を示すにはins要素とdel要素を使います。インライン要素としてしか使用できません(del要素)。ブロックレベル要素としてもインライン要素としても使用できます(ins要素)。

段落を丸ごと削除部分としてマークアップしてみました。(del要素)

段落を丸ごと追加部分としてマークアップしてみました。(ins要素)

入力フォームのスタイル

入力フォームの配置にはform要素を使います。form要素の中にはテキストフィールドやボタンなどの部品を入れることができます。fieldset要素やlabel要素を用いると、より使い易いフォームを作れます。なお、以下のフォームはサンプルのため正しく機能しません。


input要素

input要素とbutton要素による画像ボタン

input要素による と、button要素による の例

select要素とbutton要素とinput要素

テーブル(表)のスタイル

表を示すにはtable要素を使います。表を上手く使うことで複雑な情報を整理することができますが、環境によっては逆効果になることもあります。言うなれば表は黒魔術です。かなりイケてるっぽい黒魔術ですが、やっぱり所詮は黒魔術です。レイアウトに使うのは論外です。

テーブル比較表(caption要素)
比較項目(thead要素中のth要素) HTMLのテーブル 高級木製テーブル
比較結果(tfoot要素中のth要素) 表として使いましょう(tfoot要素中のtd要素) 家具として使いましょう(tfoot要素中のtd要素)
時間割表(tbody要素中のth要素) 作れます(tbody要素中のtd要素) 作れません(tbody要素中のtd要素)
顧客名簿 作れます 作れません
碁盤 置けません 置けます
恋人との夕食 出来ません 出来ます
徹甲弾 止められません
榴弾
レイアウト うちの子じゃありません グッドデザイン賞受賞
スタイルシートを使いましょう お揃いの椅子もあります

イメージ(画像)のスタイル

画像を配置するにはimg要素を使います。img要素は空要素です。alt属性で代替テキスト(画像の説明ではない!)を指定するようにしましょう。

段落直下のimg要素と、アンカーの中のimg要素です。

ルビふりがなのスタイル

ruby要素を使うとルビ(ruby)を示すことができます。ここでいうルビは振り仮名ふりがなのことで、プログラミング言語のrubyではありません。ルビは印刷用語に由来し、もともとは約5.5ptポイントの活字のことをいうそうです。平仮名ひらがな片仮名カタカナだけではなく、漢字かんじアルファベット(alphabet)を振っても構わないでしょう。対応していない環境で見ると、あまりエレガント優美ではありません。

オブジェクトのスタイル

object要素は各種形式のデータを扱うことができる汎用の要素です。

段落直下のobject要素と、アンカーの中のobject要素です。

このページについて

ナビゲーション
クレジット
Stylesheet Preview, © 2004-2005,2007-2011,2021,2023 Nzawa.