ごく簡単なHTMLの説明:内容と凡例

各ページはいくつかの原則に基づいて記述していますので、この凡例を一通り読んでおくとよりいっそう理解しやすくなると思います。

「正しいHTMLを書くということ」のセクションは、何のためのHTML?のページに移動しました。

取り上げている内容

ごく簡単なHTMLの説明は、HTMLの仕様を網羅して説明するものではなく、実際にページを制作する際に必要になると思われる要素を取り上げ、ポイントを解説するものです。解説はXHTML 1.0に準拠していますが、この仕様にふくまれる全ての要素タイプを紹介しているわけではありません。また、各要素タイプの属性も、必要でないと思われるものは省略しています。

このシリーズで解説している要素タイプは要素一覧のページでも確認できます。

記述の原則と表示例

各ページとも次のような原則で内容をマークアップしています。スタイルシートを使って、ポイントが視覚的に理解しやすくなるようにしていますが、対応しないブラウザの場合も内容を理解する上で支障がないよう務めています。

  • 新しい用語の定義:新しい用語が出現するときは、原則としてdfn要素を使ってマークアップしています。

  • 重要な部分と特に重要な部分:説明上の重要ポイントは、em要素とstrong要素を使って示します。

  • 注目表示:強調要素としてマークアップするような文脈上の重要性はなくても、周囲と区別して表示した方が読みやすい場合は、attnというクラスを設定します。説明している要素がマークアップの例の中に登場する部分などに用いています。必要に応じてattn2、attn3というクラスも用います。

  • (削除) 訪問済みリンク:これらの強調すべき要素と混同されないよう、訪問済みリンクの表現をスタイルシートで調整しています。対応するブラウザではくすんだ青紫で表現されます。 (削除ここまで)

  • HTMLなどの記述例:exampleというクラスを設定して示しています。スタイルシートを使わない場合は例であることを()で表示します。

    (例)

    HTMLなどのコードの例を示します

  • 誤った使用例:badexampleというクラスを設定しています。

    (誤った例)

    誤ったコードの例を示します。そのまま使わないでください

  • 詳細説明や補足説明:auxというクラスを設定して示しています。急いで概要だけ把握しようという場合は、次のようなセクションは読み飛ばしても差し支えありません。

    〔補足〕

    補足説明の部分を示します

    〔以上補足〕

次の方法で、ページ内、ページ間の移動が容易になるようにしています。

  • link要素でnext, prev, indexなどを設定しています。この要素に対応するブラウザでは画面の上部などにナビゲーションバーが表示されます。
  • accesskey属性をいくつかのリンクに設定しています。
    • 目次に戻るリンクにはU (Up)
    • 前のページへのリンクにはB (Before)
    • 次のページへのリンクにはN (Next)
    • ヘルプへのリンクにはH (Help)
    WindowsのIEならAltとキーとの組合せ、MacIEならControlキーとの組合せで、これらのショートカットを利用できます。

印刷について

印刷のために、画面表示用とは別のスタイルシート(media="print"と指定)を用意しています。media指定に対応するブラウザで印刷すると、通常のテキストは10ポイントの「平成明朝」もしくは「MS P明朝」で出力しますので、これらのフォントがあれば画面表示のフォントに関わりなく、コンパクトに読みやすく印刷されます。また、上記の強調要素などの表示例も、印刷用スタイルシートでは、白黒でも読みやすいように設定を変えてあります。

更新情報について

必要に応じて各ページの内容を追加・修正しています。各ページ末尾のstatus情報でご確認ください。細かい変更は新着情報ページには掲載していません。

このように内容が変更されることがありますので、このシリーズの利用・配布などに際しては、出典と日時を表記してくださいますようお願いします。詳しくはリンク・引用・配布などについての説明をご覧ください。