読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

head要素・body要素の中に何を書くか?

head要素の中に何を書くか?

head部
  • UA(user agent)が表示するための必要な条件とページの目的、そして外部との関連づけを記述する
  • あくまでもブラウザが理解するための部分
  • 不可視(非表示)


現在のインターネットの利用の仕方は、ほぼ「検索」から始まります。
つまり、検索対象になるWebページを作成しない限り、見られることはないということです。


では「検索」は、何を検索するのか?
検索エンジンのサーバーに記録してあるデーターから検索します。
インターネットの世界にある「ありとあらゆるデータ」から検索されるわけではありません。


この「検索エンジンのサーバーに記録されること」を、インデックスと呼びます。


この「インデックス」をされるためには、HTML文書内の「head部」と「body部」のバランスが必要になります。

DTD

  • Document Type Definition(文書型定義、DTD)とは、文書構造(文書型)を定義するためのスキーマ言語の一つ
  • ごくごく簡単なDTDの説明
  • Strict(厳密型)、Transitional(移行型)、Frameset(フレーム設定型)の三種類がある - 詳細はテキストに入ってから解説します
  • 記述する位置は、ドキュメントの最上位部


HTML5の場合

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>
meta
  • Metainformation(メタ情報)の略
  • 「超〜」「高次〜」「〜の間の」「〜の後ろの」「〜を含む」などの意味を持つ英語の接頭辞
  • metaphorが語源
<meta charset="UTF-8">
<meta name="description" content="ページの内容を説明する文章">
外部リンク
  • rel:relative 関係性(HTMLドキュメントに対しCSSファイル)
<link href="style.css" rel="stylesheet">

body要素の中に何を書くか?

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

ドキュメントは、多くの人へ効率的に情報を伝達するために適したツールです。
その中に書かれる内容が「コンテンツ」です。
そのドキュメントを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種類)


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


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


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

画像

文字だけが長く続くと、それだけで読む気が起こりにくいものです。
そこで、より情報量が多い「画像」を挿入して、読みやすさのアクセントを作ります。


画像には、2種類の使い方があります。

  • 説明・解説のための画像(キャプションなどをつけます)
  • Webページの印象をつくるための画像


写真集でもない限り、写真が主張しすぎると全体のバランスを崩す原因にもなりかねません。

ハイパーリンク

現在、電子ドキュメントの中でもっとも重要な要素です。
文章の特定の場所から、関連する情報に移動できるような仕組みを指します。
WordでもPDFでも、この仕組みを使うことができるようになっています。


もちろん、Webページでは「ハイパーリンク」がなければ役立ちません。


文書構造

上記のドキュメント内容を、見る人が理解しやすくする形を「文書構造」と呼びます。


Webページの場合、「読みやすい」「体裁が整っている」「メンテナンス性が高い」以外に、「検索結果が上位表示」するということを求められます。
このことも、正しい文書構造をつくる必然性のひとつになっています。


この文書構造こそが「伝えるドキュメントの書き方」の本質です。
そして、Webの勉強は文書構造の書き方を中心におこないます。
プログラミングであっても同じことです。
伝える相手が人から「OS(機械)」に変わるだけのことです。
伝えようとする内容が、的確に効率よく伝わらなければ意味がありません。


記述(マークアップ)のルール

  1. 表示する内容(コンテンツ)は、必ず「開始タグ」と「終了タグ」で囲む
  2. すべて小文字で記述する


以下は、記憶する部分ではなく、入力の経験のみが優先されます。
まず、入力してみましょう。

段落 <p>

  • 基本的には、2行以上の文章に指定する(1行でも可)
  • 迷ったら、「p要素」にする
  • 段落ブロックの下は、必ず1行分の空きができる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アフォーダンス</title>
</head>
<body>
<p>ギブソンの提唱した本来の意味でのアフォーダンスとは「動物と物の間に存在する行為についての関係性そのもの」である。</p>
<p>例えば引き手のついたタンスについて語るのであれば、「"私"はそのタンスについて引いて開けるという行為が可能である」、この可能性が存在するという関係を「このタンスと私には引いて開けるというアフォーダンスが存在する」あるいは「このタンスが引いて開けるという行為をアフォードする」と表現するのである。</p>
<p>要点は行為の可能性そのものであるため、そのタンスが引いて開けられるのだと示すインターフェイスを持つか否か、ひいては"私"自身がそのタンスを引いて開けることが可能だと認識しているか否かは全く関係ない。</p>
<p>タンスに取り付けられているのが「引き手に見えない、あるいは引き手として使用できそうもない引き手」であっても、"私"に引いて開ける事が可能ならば、その両者の間にアフォーダンスは存在するのである。</p>
</body>
</html>



見出し <h1> <h2> <h3>

  • ページ内容を表す1行
  • 優先順位のレベルでマークアップする
  • 見出しの拾い読みでも、ページのツリー講座がわかるように
<h1>アフォーダンス</h1>
<h2>デザインにおけるアフォーダンス</h2>
<h3>本来のアフォーダンス</h3>


本来は、段落(本文)と組み合わせて記述します。

箇条書き <ul> <ol> <dl>

  • 必然性のある箇条書きを利用する
unordered list

順序が置き換わっても意味が伝わる並列な内容に使う。

  • 行頭マークは「黒丸」
<ul>
  <li>私が好きな真っ赤なりんご</li>
  <li>あなたが好きなのはバナナ</li>
</ul>

ordered list

順序が置き換わっては意味が伝わらない、順序が意味をもつ内容に使う。

  • 行頭は数字
<ol>
  <li>まず良く洗ってから皮をむき</li>
  <li>それからおもむろに囓りつく</li>
</ol>

definition list

「名称(用語)」と「その説明文(定義)」をセットにしてリスト化するときに使う。

  • リスト全体に対する dl要素:definition list
  • 名称(用語)に対する dt要素:definition term
  • 説明文(定義)に対する dd要素:definition description
<dl>
<dt>りんご</dt>
<dd>赤い色をした丸い果物。</dd>
<dt>バナナ</dt>
<dd>黄色い色をした細長い果物。</dd>
</dl>

画像挿入 <img>

<img src="画像の置いてある場所" width="幅" height="高さ" alt="代換え文字">


img:images
src:source


画像の表示は、HTMLソースをブラウザが解釈して表示する段階で、もう一度サーバーまで「画像の置いてある場所」にとりにいってから表示されます。
このとき、幅・高さなどの情報がないと、その計算をしてから表示されるため、表示が遅くなります。
一般的に「レスポンスが悪い」という状態です。


ハイパーリンク <a>

リンクには「テキストリンク」「画像リンク」「メールリンク」の3種類あります。
詳細は、授業内で説明します。

<a href="移動先の住所(パス)">リンクテキスト</a>


a:anchor
href:hyper reference