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

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

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

HTMLの役割と基本構造

ブラウザに情報を表示するためにはHTMLで記述する

  • テキストP.014〜019
  • ブラウザに伝える内容を表示するためには、HTMLで記述する必要があります。
  • それ以外では表示できないと言っても過言ではありません。


ですから情報を発信しようとすれば、必ずHTMLのルールを理解する必要があります。

HTML:HyperText Markup Language


ハイパーテキストのための、文書に目印を付ける方法を定めた文法上の約束」ということになります。

ある文章の中にある言葉から、関連のあるページのその言葉にリンクしてあること。
それが「ハイパーテキスト」という概念です。


正確な意味を理解するには、「仕様書」と呼ばれるW3C(World Wide Web Consortium)が策定したルールを読むことが必須です。


ごく簡単なHTMLの説明(HTML仕様書の日本語要約)


HTMLの目的

  • HTMLはネットワークでつながった世界中の文書を関連づけ、それを有益な情報としてコンピュータで分析できるようにする役割を持っています。
  • コンピュータのプログラムが「リンク」をたどって世界の文書を収集し、その「構造」を分析・管理することを可能にします。

HTMLを記述することは、見知らぬ誰かとつながること

  • 一個人が作ったサイト(情報)であっても、リンクをたどって、その情報の知りたい人の役にたつことができるかもしれないということです。
  • つまり、自分の価値を誰かが認めてくれるということです。
  • その誰かを意識することにより、初めて「表現」が成立します。

HTMLの基本ルール

  • 日本語で入力した文字はそのまま表示されない(他国語も同様)
  • マークアップという意味付けをすると表示できる
  • HTMLでは、大きさ・色のなどの修飾は直接記述しない

Markupとは
  • 目印(荷札:タグ)をつけていくこと
要素(Element)
  • 「開始タグ」と「終了タグ」に囲まれた範囲のこと

  • どこから = 開始タグ
  • どこまで = 終了タグ

開始タグ

  • <」と「/>」の間に「要素名」を書く。

終了タグ

  • 「<」と「/>」の間に「要素名」を書く。


<h1>一番重要な見出し</h1>


文書の部分ごとの意味に応じて、要素に適切なタグを適用することが、HTML作成の主な作業となります。

属性(Attribute)
  • 要素に対する様々なオプション設定のような役割をもつ
  • 属性の値は、「 " ダブルクォーテーション」で囲む

HTMLの記述の準備

記述の準備:テキストエディタ

初期の段階で「HTML」を記述する練習には「メモ帳」ではないテキストエディタが必要になります。

  • 起動・動作が早い
  • 文字コード指定
  • コードのカラーリングなど、HTML入力に適している


そのような理由で、仕事の現場では「テキストエディタ」を使用します。

HTMLを記述する

  1. テキストエディターを起動する
  2. 新規ファイル作成
  3. 所定の場所に保存する
  4. 拡張子は「.html」
  5. 記述を始める
DTD
  • Document Type Definition
  • 使用するHTMLのバージョンを宣言します
  • 2014年12月現在、HTML5が勧告されています
<!DOCTYPE html>
HTMLを記述する箱を用意する
  • 〜 は、そのルールで記述するための「箱」
<!DOCTYPE html>
<html>

</html>
箱の中の必要な2つの要素を記述する
  • 〜 ブラウザに内容のルールを伝える(ブラウザでは不過視)
  • 〜 閲覧者に内容の意味を伝える(ブラウザでは可視)
<!DOCTYPE html>
<html>
<head>

</head>

</html>


次に

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>
  • テキストP.015 図01-3参照
  • ここまではHTMLの「箱」を作る記述のため、表示する内容はありません(ブラウザでプレビューしても何も表示されません。)
  • このあと必要な要素を記述していくことになります

基本構造

  • DTD以外の基本構造(DTDは、HTML5で記述すること)

XHTMLとは

  • 2014年12月時点では、テキストP.017〜019を読む程度の理解で問題ありません
html要素
  • HTML文書のルート要素
head要素
  • UA(user agent)が表示するための必要な条件とページの目的、そして外部との関連づけを記述する
  • あくまでもブラウザが理解するための部分
  • 不可視(非表示)
body要素
  • 閲覧者が内容を確認する部分
  • 閲覧者のためだけではなく、検索エンジンに情報が蓄積されるような意味付けも必要
  • 可視(表示)
ドキュメントツリー
  • ルート要素からの入れ子(ネスト)状態を表したもの
  • 要素の意味づけを明示したものを「文書構造」と呼びます

パラグラフの概念とSEOの関係

パラグラフの概念
  • 論理的な文章の書き方
  • 論理構造を明示するためには、「見出し+段落」を前提に書きます
  • 「見出し+段落」で表す内容が「パラグラフ」と呼ばれます
title要素
  • ドキュメントには、タイトルが必須です
  • 「title要素」には日本語サイトの場合は、日本語で記述しますが、何を記述すればよいかはSEOに関係します
body要素
  • 本来、body内は必要充分なテキストが入力してあるところから進めることが理想です
  • その内容は「本文(ほんもん)」として、記述します
  • その中から、内容を一目で把握できるように「見出し」を立ち上げます
  • つまり、見出しで表すことのできる、文節の塊が「段落」となります
  • 「p要素」そのものも「paragraph」と呼ばれますが、段落要素には見出し要素が不可欠であると考えましょう


つまりbody内には、常に

  1. 見出し
  2. 段落


が記述されることになります。

パラグラフの概念

基本的に論文やレポートにおけるパラグラフは、「ひとつのテーマを示す」単位です。
パラグラフは単に「読みやすい長さで切る」のではありません。
この考え方は、Webライティングをする上でとても重要です。


パソコンやモバイル機器の中で見る「文字」は、それほど読みやすいものではありません。
ですから、必然性がなければ読みたくないものなのです。
では、読むか・読まないかの判断をどこでするのでしょうか。


そこには「知覚心理」が影響します。
ここでは深く言及しませんが、デザインにおける2大要素「色彩」と「文字」は、この「知覚心理」が原点です。

トピックセンテンス
  • トピックセンテンスは、そのパラグラフの中に書かれているテーマを一言(一文節)で表したもの
  • トピックセンテンスは通常パラグラフの最初に置かれる
  • トピックセンテンスを見出しとして扱う
トピック以外の文
  • 見出し以外の本文(段落)
  • 並列した文(同じ重要度の文)→番号なし箇条書き
  • 時系列で並んだ文(時間軸に沿って並べないと意味が通じない文)→番号付き箇条書き
  • 論理を追う構造の文(因果関係などの論理を追った文)→定義型箇条書き

「見出し+本文(段落)+箇条書き」による文書構造を最小単位と考えることが「パラグラフ」です


1ページの中には、いくつかのパラグラフがあり組み合わせて構造を作ります。
流れとしては、紙媒体は「序論」→「本論」→「結論」という風に組み立てます。
Web媒体の場合は、「結論」→「本論」→「結論」となり、最初に眼に触れるものが「結論」とするように構成します。
「序論」は、Web媒体ではまわりくどい表現として敬遠され、読んでもう事の少ない部分になってしまいます。

HTMLは言語、目的は文書構造を作る

このパラグラフの概念を使って書かれた内容を「ブラウザ」が理解して正しく表示できるようにする「言語」が、HTMLです。

HTMLを理解する入り口
  • 文章を形にしてからマークアップする(文章を書くことを優先)
  • マークアップで構造化をしてから内容を入れる(タグを記述することを優先)

ブラウジング

  


ブラウジング
 メッセージ自体の差別化(他と比べて目立っていること)の方法が
 ユーザの興味・関心と一致したとき、「発見」という形で
 そのメッセージに注目してもらうことができる。

サーチ

  


▲サーチ
 そのメッセージがどんなグループに含まれるか(キーワードの立て方
 など)によって、ユーザに利用される度合いも変わってくる。

  • 現在のインターネットの利用の仕方は、ほぼ「検索」から始まります
  • つまり、検索対象になるWebページを作成しない限り、見られることはないということです
「検索」は、何を検索するのか?
  • 検索エンジンのサーバーに記録してあるデーターから検索します
  • インターネットの世界にある「ありとあらゆるデータ」から検索されるわけではありません


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


では、どうやったら「インデックス」されるのか。
その話に入る前に、しばらく準備の時間が必要です。
まず、サイトを制作しアップロードしょう。術は、そこからが始まりです。