ウェブデザイン演習 第03回 - ウェブデザイン演習 | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザイン演習 第03回

前回の講義内容覚えてますか??

  • Webサイトが表示される仕組みは、PCやスマートフォンを使って検索やクリックなどの方法でWebサーバーにリクエストを送り、Webサーバーが応答して表示されるというもの。
  • HTMLファイルの役割は他の言語の受け皿で最終的な表示用ファイル
    CSSファイルの役割はHTMLへデザインを反映させること
    JavaScriptファイルの役割は表示状態などの変更をリアルタイムで処理すること
  • ウェブサイトデザインで大事なのは、
    「見やすさと操作性の向上」「トーン・マナーの設計」
  • 「見やすさと操作性の向上」とは、
    誰が見ても理解しやすくすること、目的を達成しやすくすること、
    迷わせないこと、一貫性のあるルールを持たせること。
  • 「トーン・マナー」とは、
    属性や世界観を伝える要素メッセージを伝えるための色・形・言葉の軸となるものです。これを設計していくことにより、Webサイトに「らしさ」を持たせましょう。
  • 紙は固定サイズWebは可変サイズ
    それぞれに役割を持たせることでターゲットユーザーに有効に訴求することができる。

といった内容でした。

今回は実際にHTML・CSSコーディングに入る前に、
HTMLタグの役割の解説とコーディング前の下準備を行います。

ウェブデザイン演習 第03回

なぜHTMLタグを使うのか?

SEO

ここからは、検索結果の表示順を検索順位という言い方に統一し、
検索結果の1ページ目など、早い段階で掲載されているサイトは順位が高い逆は順位が低い、として解説します。

Yahoo!やGoogleで検索を行った時に検索結果が表示されますよね。
検索結果の1ページ目・2ページ目に出てくる検索順位の高いサイトは開くけど、
3ページ目、4ページ目以降の検索順位の低いサイトはあまり開くことがありません。

つまり、検索順位が低いと多くの人に見てもらえる可能性はグンと下がってしまいます。
多くの人に見てもらうため、Yahoo!やGoogleなどの検索エンジンでの検索順位がより高くなるように対策をする検索エンジンへの最適化を行うことが、有名なSEO(Search Engine Optimization)と呼ばれる手法です。

クローラー(検索ロボット)とは?

ではこの検索順位はどうやって決まっているんでしょうか?

答えは「検索エンジンが、クローラーを使って収集したWebサイトの情報をもとに、検索した内容に最もふさわしい内容を、最もふさわしい順番で表示」しているんです。これは、検索内容からいち早くユーザーに答えを提供出来るように検索エンジンがとっている配慮です。

このネット上のWebサイトの情報を集める仕事を担っているのが、クローラー(検索ロボット)と呼ばれるもので、Yahoo!やGoogleなどの検索エンジンが定期的にそれぞれのクローラーを使い、ネット上の巡回を行っています。

検索エンジンは、クローラーが巡回を行うことにより、新しくオープンしたWebサイトを追加したり、閉鎖してしまったWebサイトがあれば検索結果から削除したり、ページの内容が変わればそれを反映して検索結果を更新して、検索結果の様々な整理を行っています。

人間とクローラーの見え方の違い

そもそもなぜHTMLタグを使うんでしょう??
それは、閲覧する人間と、巡回するクローラーの、Webサイトの見え方の違いに理由があります。

lesson03_miekata01

人間が見ている状態はまさにみなさんが今見ているページの状態です。
ではクローラーにはこのページはどのように見えているんでしょうか?

lesson03_miekata02

前回、前々回と講義で紹介した、まさに記号や英数字などの文字情報だけのページです。情報を集めるクローラーには、人間が見ているようなデザインは見えていないんです。その代わりにHTMLタグを判別してサイトの構成や内容を判断し、検索エンジンに報告します。

つまり、「ここはページタイトル、ここはブロック、ここは段落」と、
クローラーが判別しやすいように最適なHTMLタグを使ってコーディングを行わなければ、検索順位にいい影響を与えてはくれません。

HTMLでよく使うHTMLタグ

開始タグと閉じタグの理解

今回はWebサイト制作において最も使用頻度の高いタグを紹介しますが、
各タグを紹介する前に、まず大原則として開始タグと閉じタグの概念を理解してください。

開始タグと閉じタグ

<p><!-- 〜これが開始タグ〜 -->
今日はウェブデザイン演習の第3回目の講義です。
</p><!-- 〜これが閉じタグ〜 -->

こちらのマークアップの場合、
開始タグとは、「これからp(段落)を始めます」という記述で、
閉じタグは「p(段落)はここまで」という記述になります。

原則、タグのマークアップは開始タグと閉じタグの両方を記述してください。
ただタグは様々なものがあり、中には閉じタグを記述しなくていいものもあります。
これに関しては下のimgタグのブロックで解説します。 

<div></div>(divタグ:開始タグあり・閉じタグあり)

まず基本となる、div(ディヴ)タグを覚えましょう。
divタグとは、「division(分けること、分割すること)、divide(分ける、分割する)」の略で、
そのままの意味で「分割したブロックのこと」だと考えてください。

divタグは単体では特に意味を持ちませんが、主に各ブロックのレイアウトの役割を持っています。
特に意味を持っていないので逆に自由度が高く、大半のことに対応できる万能なHTMLタグです。

以下の画像をみてみましょう。

lesson03_div01

龍弥デザインのクライアントの株式会社松本鉄工様のウェブサイトです。
さて、この画像の見える範囲で、どれくらいのdivタグをどのあたりに仕込んでいるのか??
正解は下の画像です。

lesson03_div02

正解は「ほぼ全部」でした。
実はさらに外側に、この画像の範囲すべてを囲うdivタグがあります。

ヘッダー部分でdivタグを使って、サイトタイトルを左寄せ、
電話番号などを右寄せ、さらに下部を揃えているのがわかりますか??

使い方は以下のような感じです。

HTML

<div>
  <h1>WEBCRE8TOR.COM</h1>
  <p>ウェブデザインBやウェブデザインBの講義に使うためのブログです。</p>
</div>

divタグが、後述するh1タグやpタグを囲っていますよね。
例えばレイアウト時にこのdivごと移動してしまえば、
囲われているh1タグやpタグも一緒に移動するわけです。

レイアウト上、ブロックとは箱のようなものだと考えてください。
ブロックを生成するためにdivタグを頻繁に使用します。
この原理を使えば様々なレイアウトが可能になりますね。

<h○></h○>(h○タグ:開始タグあり・閉じタグあり)

h(エイチ)タグは、サイト内の見出しの役割を持っています。
hの後に1〜6の文字が入り、数字が小さいほど重要な見出しになり、
適切に使用すればクローラーへのアピールポイントとして非常に有効になります。

一目でわかる使い方で言えば以下のようになります。

HTML

<h1>最も重要な要素(サイトタイトルなど)</h1>
<h2>2番目に重要な要素(ページタイトルなど)</h2>
<h3>3番目に重要な要素(記事のセクションタイトルなど)</h3>
・
・
・
<h6>6番目に重要な要素</h6>

下の画像に、h1タグとh2タグを表示していますので見てみましょう。

lesson03_h

株式会社松本鉄工様のWebサイトでは、
サイトタイトルにh1、ページタイトルにh2を使いっています。

ただし上にも書いた通り、hタグは「適切に使用する」ことが重要です。

hタグの1〜6の順番付けでクローラーが判別を行っているため、乱用すると何が重要か判別ができなくなってしまいます。
アピールに有効だからといってh1タグを乱用すると検索エンジンからペナルティを受け、
最悪の場合、検索結果から削除されてしまうor検索順位を下げられてしまうこともあります。

<p></p>(pタグ:開始タグあり・閉じタグあり)

p(ピー)タグは以前にも少しだけ解説しましたが、文章の段落のための役割を持っています。
Webサイトはそのほとんどを文章によって構成されています。文章が多ければ段落が増えるので、自然とpタグがWebサイト制作で一番使うタグになってきます。

lesson03_p

使い方は以下のように段落ごとにpタグを使って囲います。

HTML

<p>舞台は先生のかっこうしずかげがへんにおどかしとんとんましです。それからしばらくだめたでしというおいましう。</p>
<p>気の毒たたんございはたまたざとじぶんのの生意気屋のままとはとうとう愉快でしまして、何などセロに見ろられる方ですまし。なっすぎ君は子でいいたながらこんどのねずみの野ねずみ汁をし第一ゴーシュたちの活動に見て来だた。子どもははじめ走っていまし。糸は万見るかっこうのようをあげてしまいた。</p>
<p>扉は手あとやそれをくわえながらしまえない。</p>

引用元:宮沢賢治「セロ弾きのゴーシュ」

<a></a>(aタグ:開始タグあり・閉じタグあり)

a(エー)タグは、内部や外部へのリンクの役割を持っています。
aタグを使用するときは「href=”〇〇”」の〇〇部分にリンク先を記述します。

また、現在開いているページを残したままブラウザの別タブなどで表示させたい場合は、
href=”〇〇”の後に半角スペースで半角1文字分あけて「target=”_blank”」と記述します。

HTML

<!-- 〜href="〇〇"と書くと、〇〇にリンクする〜 -->
<a href="http://ryu-ya.net">リンクテキストを記述します</a>

<!-- 〜target="_blank"と書くと、ブラウザの別タブでリンクを開く〜 -->
<a href="http://ryu-ya.net" target="_blank">リンクテキストを記述します</a>

また、aタグは基本的にpタグなどの文章内に使用することが多くなります。
上のものを少し改変すると・・・

HTML

<!-- 〜aタグはpタグなどの中に記述する〜 -->
<p>私は<a href="http://ryu-ya.net">龍弥デザイン</a>の脇坂と申します。</p>

といった記述になります。

<img />(imgタグ:開始タグあり・閉じタグなし)

img(イメージ)タグとは、その名の通り、画像を読み込む役割を持ったHTMLタグです。
このブログでも画像を結構使っていますが、その全てでimgタグを使って画像を表示させています。

lesson03_img

開始タグと閉じタグの理解の項で、
「閉じタグが必要ないHTMLタグがある」と言いましたが、
このimgタグには閉じタグは必要ありません

閉じタグの代わりに、開始タグの最後に/(スラッシュ)を入れます。

HTML

<img src="画像のURL" width="画像の横幅" height="画像の縦幅" alt="画像の内容を示す文章" />

また、今後紹介するhead要素内に記述する<meta>タグや<link>タグなどにも閉じタグが必要ありません。

HTMLタグはまだまだあります

今回は頻繁に使用するであろうHTMLタグを紹介しました。
次回からは実際にWebサイトのコーディングを行うための必須のHTMLタグを紹介し、少しずつコーディングに慣れていってもらおうと思っています。

フォルダ・ファイルの準備

ではコーディングに進む前に、HTMLファイルやCSSファイルなどの準備を行いましょう。

今後の講義で毎回使いますので、管理しやすく、データが消えないような場所にフォルダとファイルを作ってください。できればUSBメモリなど自分で持ち歩けるものにフォルダとファイルを保存して、講義の度に持ってきてもらうと安全です。

では、一つ一つ一緒にやっていきましょう。手順は以下です。

  1. 自分で管理できる場所にフォルダを作り、名前を「html」にする。
  2. htmlフォルダの中にさらに「css」「js」「img」というフォルダを作る。
  3. Dreamweaverを開き、新規ファイルを作成。
    「index.html」という名前をつけてhtmlフォルダの直下に保存する。
  4. Dreamweaverで新規ファイルを作り、「main.css」という名前をつけて、
    htmlの中のcssフォルダの中に保存する。

1・2 フォルダの作成

まずはじめにフォルダから作っていきましょう。
これは普通にフォルダの中にフォルダを作ればいいだけの話です。

右クリックメニューから、新規作成 > フォルダー と進み、「html」と名前をつけてください。
作成されたhtmlフォルダを開き、フォルダの中に「css」「js」「img」の3つのフォルダを再び作成して終わりです。

3・4 ファイルの作成

次に、3の「index.htmlの作成」の説明をします。
まずDreamweaverを起動してください。

lesson03_dreamweaver01

起動して出てきたウィンドウの「HTML」をクリックして・・・

lesson03_dreamweaver02

そのまま「作成」ボタンをクリックすると・・・

lesson03_dreamweaver03

新規ドキュメントが立ち上がりますが、すでに10行ほどコードが記述されています。
この講義では記述を行いながら説明を行うので、ひとまずこちらのコードを削除して、
上部メニューから、ファイル > 保存 と進み、「index.html」と名前をつけて保存しましょう。

この時、保存先が先ほど作成したhtmlフォルダになるように注意してください。

4の「main.cssの作成」も同様に、新規ドキュメントが立ち上がったらコードを削除して、「main.css」と名前をつけて保存しましょう。

ファイル・フォルダ構成の確認

問題なくできていれば、以下の画像のようなフォルダ構成になっているはずです。

lesson06_3

フォルダ・ファイル構成がもし違っていたら、もう一度よく確認しながら作ってください。 

本日のまとめ

  • ネット上のWebサイトの情報を集める仕事は、各検索エンジンのクローラーと呼ばれる検索ロボットが行っている、
  • 人間が見るWebサイトと、クローラーが見るWebサイトは違い、クローラーは文字情報だけを見ている
  • HTMLタグを使うのは、クローラーにページの構成や内容を判別させるため。
  • クローラーが収集してきた情報をもとに、検索エンジンが表示順を決定する。
  • 表示順を少しでも上に持っていくために行うのがSEOと呼ばれる手法。
  • HTMLタグには開始タグと閉じタグがあり、文字を囲うことで使用する。
    またimgタグなど、中には閉じタグが存在しないHTMLタグもある。
  • divタグは箱のようなもので、いろいろな要素を入れることができる。
  • hタグは見出しで、数字が少ないほど重要な見出しになる。
  • pタグは段落で、最も使用頻度の高いHTMLタグ。
  • imgタグはページに画像を読み込むHTMLタグで、閉じタグが必要ない

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE