HTMLの勉強|Webサイト作りの基礎

初心者向けの向けのHTMLの勉強の仕方を綴っていきます。かくいう私もWebサイト作りの初心者です笑

headには何を書けば良いのかを勉強しましょう!part2

headタグに何を書けば良いのかについて、2回でお伝えすると言いましたが、

書いていたら量が多かったので、3回になります。

それでは、早速、前回の続きを勉強していきましょう。

 

ドキュメント(コンテンツ)

ドキュメントは、多くの人へ効率的に情報を伝達するために適したツールです。

その中に書かれる内容が「コンテンツ」です。

そのドキュメントをHTML形式で書いたものが、Webページです。

そして「body要素」内に書かれる部分を「コンテンツ」と呼びます。

 

以下、ドキュメントを「Webページ」と置き換えて読んでみてください。

 

なぜドキュメントを作成するのか?

誰かが誰かに情報を伝達する手段には、以下の方法があります。

 

  1. 口頭(相手が限られ、残らない)
  2. 手書きのメモ(整理されていない、必要な部分を取り出しにくい)
  3. 電子ドキュメント(複製・再配布が容易、検索可能)

 

いうまでもなく、パーソナルコンピュータが使われる理由がここにあります。

 

電子ドキュメントを作成するコスト

通常の企業に見られるように、ただ誰かが作った大量のドキュメントが効率的な情報伝達に役に立つかと言えば、必ずしもそうではありません。

 

そこには、コミニュケーション・コストの考え方が欠如しています。

 

  1. 作成のコスト(最初に作成するコスト、ツール次第でコスト削減ができる)
  2. 配布のコスト(伝えたい相手に比例して増大する、最新版を得るためのコスト)
  3. 理解のコスト(内容を理解するために必要なコスト、読みやすさがコストに跳ね返る)
  4. 保守のコスト(現状にあわせて、更新するためのコスト)

 

「Word」でドキュメントを作るときには、あまり意識していないコストの問題が、Webページを作ることを意識したとたんに、はっきり見えてきます。

本来、Wordなどのドキュメント作成ツールの場合でも、考える必要があります。



よいドキュメント

WordでもWebページでも、必要とされる要件は同じです。

 

  • 読みやすい
  • 体裁が整っている
  • メンテナンス性が高い

 

もっとも誤解が生じやすいのが「読みやすい(見栄え)」という部分です。

読みやすい(見栄え)
  • 見出しと本文の区別がある
  • 適切な内容の分割がある
  • 結論から内容への誘導がある
  • 必要な場所へ移動できる
体裁が整っている
  • 読み手のことを考えてある
  • 必要十分な空きがある
  • 文字の大きさで重要度に変化をつけてある
  • ドキュメント全体の規則性がある
メンテナンス性が高い
  • 繰り返し改訂・追記されることが前提
  • 誰もがルールに則り更新ができる
  • 無駄な作業をせずに価値ある作業に集中できる



つまり、コンテンツを作るということは、文章を書く技術を最大限利用しておこなう行為なのです。

それは、HTMLを暗記するなどという行為とはまったく意味の違うものです。

ですから、このクラスは「まる暗記」はしません。



コンテンツ内容

必ず以下の要素が必要になります。WordもWebページも同じです。

 

  1. 本文
  2. 見出し
  3. 箇条書き
  4. 画像(説明・解説用、イメージ)
  5. 補足要素(引用、脚注)
  6. ハイパーリンク
  7. ヘッダー・フッター(Wordのみ)

 

本文(ほんもん)

紙媒体の場合、日本では「9pt ≒ 13Q、中明朝体、正体、べた組み」と基準が決まっています。

Webページも同様に、ブラウザの標準文字サイズ「16px」が基準となります。

本文の文字サイズを指定しなければ、自動的に「16px」で表示されます。

 

ここで最も重要なことは、文字サイズは「スタイルシート」で設定することです。

とくに、Wordの場合「スタイルシート」を使わなければ、Wordの機能の1/10も利用したことになりません。

もちろん、Webページは言うまでもありません。

 

見出し

本文が数十行にわたって書かれていれば、誰も読む気はおこりません。

ですから、本文は段落ごとに分かれていて、なおかつ内容をわかりやすくまとめた1行、つまり「見出し」が必要になります。

 

見出しには、重要度によってランク付けがあります。

 

Wordの場合は、見出し1→ 見出し2→ 見出し3

Webページの場合は、h1→ h2→ h3→ h4→ h5→ h6

 

という風に基準が決まっています。

WordもWebページも、この指定がなくても表示上問題はありません。

しかし、よいドキュメントである条件

  • 読みやすい
  • 体裁が整っている
  • メンテナンス性が高い

 

を満たしたことにはなりません。

つねに「本文と見出し」の組み合わせで書くことを意識しましょう。

 

箇条書き

しかし、実際には「本文と見出し」だけでは単調なもになってしまいます。

とくに説明する内容などは、全体が比較して見えないと理解につながりません。

そこで利用されるのが、「箇条書き」です。

 

箇条書きには、3種類あります。(Wordでは2種類)

 

番号なし箇条書き

順序の前後が入れ替わっても、意味や価値の変わらない場合に利用します。

 

番号つき箇条書き

順序の前後が入れ替わると、意味の通じない順序が重要なレシピなどの説明に利用します。

 

定義型箇条書き

語句の説明や、日ごとに起こったことを並列で並べて見せるときに利用します。