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

WEBCRE8TOR.COM

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

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

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

といった内容でしたね。

今回は実際にHTMLコーディングに入っていきます。
今回は、これを記述しておかないと正常に表示がされないという必須の部分の記述を行っていきましょう。

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

「内側」「囲う」という言葉の意味

コーディングを始める前に・・・
前回の講義で開始タグと閉じタグのお話をしましたね。

今後講義を進める中で頻繁に「内側」「囲う」という言い方をすると思います。
例えば「〇〇タグの内側に入れましょう」だとか「〇〇を△△タグで囲いましょう」といった感じです。

講義中にすぐ理解できるように、それぞれを説明します。

内側

index.html

<div>
  <!-- 〜ここが<div></div>タグの内側〜 -->
  <p>こんにちわ</p><!-- 〜これは<div></div>タグの内側の<p></p>タグ〜 -->
</div>

内側は、開始タグと終了タグの間のことを意味します。
上の例のように<div></div>タグの開始タグ(<div>)と終了タグ(</div>)の間に記述する場合、
<div></div>タグから見て「内側に記述する」という言い方をします。

また3行目に<p></p>タグがありますが、
これを指すときには「<div></div>タグの内側の<p></p>タグ」という言い方をします。

逆に外側だと、<p></p>タグは<div></div>タグの中にあるので、
「<p></p>タグの外側 = <div></div>タグの内側」ということになります。

囲う

囲う、とはHTMLタグの外側にさらにHTMLタグを記述した状態です。
囲うを別の言い方で表すと「マークアップ」ということになります。

index.html

  <p>こんにちわ</p>

上のコードで「<p></p>タグを<div></div>タグで囲ってください」という言い方をしたら・・・

index.html

<div>
  <p>こんにちわ</p>
</div>

こんな風に、<p></p>タグの外側に<div></div>タグを記述しましょう。

また、「こんにちわ」を<p></p>タグでマークアップしてください、という言い方をしたら・・・

index.html

こんにちわ
<!-- 〜↓<p></p>タグでマークアップ〜 -->
<p>こんにちわ</p>

こんな風に「こんにちわ」を<p></p>タグで囲えばいい、ということですね。
もうわかるよね??

HTMLファイルの基本的な構成

コーディングを始めていく上で、HTMLファイルには必ず記述しなければいけない4つのブロックがあります。それが以下の項目です。

  • 文書型定義ブロック
  • HTMLの文書の本体ブロック
  • <head></head>セクション
  • <body></body>セクション

それぞれ解説していきます。
コーディングを行いながら解説を行いますので、まずはDreamweaverを起動し、前回作成した「index.html」ファイルを開いてコーディングの準備を行ってください。

手順は以下。

  1. Adobe Dreamweaver CCを起動する。
  2. ポップアップウィンドウを閉じる。
  3. 前回作成した「html」フォルダの中にある「index」というファイルを、Dreamweaverのウィンドウ内にドラッグ&ドロップして開く。

以上です。準備ができたら早速始めましょう。

文書型定義ブロック

最初に「文書型宣言」をする必要があります。この文書型定義をしないと、Wordなどで作られた文書と同じように単なるテキスト文書として扱われてしまいます。テキスト文書になると、CSSが正しく読み込まれず、レイアウト崩れを引き起こす原因になります。

HTML文書として扱ってもらうために「どのバージョンのルールで書かれているのか」を宣言し、ブラウザのルールに沿った表示をさせるために記述が必要です。

早速、index.htmlの最初の行に以下を記述してください。

index.html

<!doctype html>

「doctype」はDocument Type(文書型)のことで、半角スペースを空けて「html」と記述しています。見たままかもしれないですが、簡単に解説すると、「文書型はhtmlです」という定義を行いブラウザにHTML文書と認識させています。

ちなみに先ほど「どのバージョンのルールで書かれているのか」を宣言すると言いましたが、皆さんが学習しているHTMLのバーションはHTML5です。

現在はこのHTML5が主流になっていますが、一昔前までは、HTML4や、HTMLとは少し性質の違うXHTMLといったものがありました。その時代も当然文書型宣言を行っていたんですが、当時よく使われていたHTML4の文書型宣言は以下のようなものでした。

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

当時の書き方はとても長くてとても覚えられるものじゃありませんでした。
2014年10月にHTML5が正式に勧告されるまではこちらのような書き方を行っていましたが、正式勧告後はHTML5での記述が標準となり、記述を簡素化されたものになりました。

HTMLの文書の本体ブロック

<html></html>タグはhtmlの記述部分、表示・制御に関わる部分の範囲全てを包括するものです。開始タグは<!doctype html>の直後に記述し、閉じタグはHTMLファイルの一番最後の行に記述します。

この<html></html>タグは後述する、制御のためのブロック<head></head>と、表示のためのブロック<body></body>を全て含んだブロックになります。

それでは、<!doctype html>の下に、以下のハイライトされている2行目・3行目を記述してください。

index.html

<!doctype html>
<html lang="ja">
</html>

また<html lang=”ja”>となっていますが、この<html></html>内で記述されている言語(lang)は日本語(ja)です、という意味を持っています。
例えばブラウザの翻訳機能を使えばlangを読み取ってくれるので、ブラウザが言語を認識する手間を省略することができます。

<head></head>セクション

<head></head>タグの中身はモニタに表示されるわけではありません。
ただ、デザイン制御を行うCSSや、動きの制御を行うJavaScriptなどの外部ファイルを読み込むのはこのブロックです。

また、ページの内容をツイートしたりFacebookのいいねボタンをクリックした時に自動で画像やテキストが抽出されることがありますよね。
その画像やテキストは<head>から</head>の間に記述されたものを抽出して表示していたりします。

それでは、以下の記述を先ほどの<html></html>タグの開始タグの下を2行改行し、ハイライトされている3行目・4行目を記述してください。

index.html

<!doctype html>
<html lang="ja">
<head>
</head>
</html>

今後、<head></head>タグの開始タグから終了タグまでの間に、ページの制御に関する記述を行っていきます。外部においている「main.css」や各種JavaScriptファイルの読み込みを<head>から</head>の間に行って「index.html」の制御を行いましょう。

headセクションに記述① meta要素を使ってエンコーディング

エンコーディングとは簡単に言うと文字コードの指定のことです。
たまに文字化けしたサイトがあったりしますが、この文字コードの指定ができていないことが原因だったりします。実務においてはほとんどの場合「UTF-8」を指定していれば問題ないと思います。

では、<head></head>タグの開始タグと終了タグの間を1行分改行し、ハイライトされている4行目の記述を追加しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
</head>
</html>

注意点として、ファイルを保存する際に文字コードを指定する項目が出てきますが、
<meta>タグで指定した文字コードと違うものを指定して保存してしまうと文字化けの原因になりますので保存時も同じ文字コードで保存しましょう。

headセクションに記述② link要素を使って読み込むCSSを指定する

前回ファイルだけ用意してもらった「main.css」の読み込みを行いましょう。
<link>タグを使ってページのデザインを決めるCSSの読み込みを行います。

先ほどの<meta charset=”utf-8″ />の下を1行分改行し、ハイライトされている5行目の記述を追加しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
</head>
</html>

CSSファイルを読み込むときはこんな感じの記述になります。
CSSを読み込んだことにより、「main.css」で指定した内容が反映され、ページのデザインをPhotoshopで制作した状態にすることができます。

headセクションに記述③ ページのタイトルを記述し表示させる

<title></title>タグを使ってページのタイトルを記述しましょう。
これが表示されるのは、検索エンジンで検索した時のリンクテキストの箇所になります。
また、ブラウザでページを開いた際にブラウザのタブ部分にはこのテキストが表示されます。

先ほど記述した<link rel=”stylesheet” href=”css/main.css”>の下を1行分改行し、ハイライトされている6行目の記述を追加しましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
</html>

ページのタイトルは<title>ウェブデザイン演習</title>となっている「ウェブデザイン演習」の部分を変更すれば反映されます。ページに最もふさわしいページタイトルをつけてSEOで強いページを作りましょう。

<body></body>セクション

<body></body>タグはブラウザに表示される内容を記述するブロックで、普段みなさんがブラウザで見ているWebサイトは、<body></body>タグ内に記述されたHTMLタグにCSSを使って指定したレイアウトやデザイン、そしてJavaScriptを使った動きが表示されています。

では、以下の記述を<head></head>タグの閉じタグの下に2行分改行し、ハイライトされている8行目・9行目を記述してください。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
</body>
</html>

もう一度言いますが・・・
<head></head>タグはページの制御ブロック
<body></body>タグはページの表示ブロックと覚えてください。

CSSやJavaScriptなど外部から読み込むファイル<head></head>タグの内側に記述し、ブラウザに表示される部分のHTMLコーディングは、この<body></body>タグの内側に記述していくことになります。

最終的なファイル

index.htmlの準備は以上です。
最終的に出来上がったindex.htmlのファイルの内容はこちら。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
</body>
</html>

もし違っていたら、もう一度よく確認して訂正しましょう。
<や>や/は大文字になっていないか??英字の綴りを間違っていないか??
タグの部分の英数字が全角になっているだけでもレイアウトが崩れます。

テンプレートにして効率アップ

今回皆さんが記述したものは、ページのデザインとは違いどの案件でもほとんど変わることがないテンプレートのようなものです。毎回同じような内容を記述しなくてもいいようにテンプレートにして置いておき案件のコーディングを始める時に使い回すのが効率アップになります。
もちろん案件ごとに変わるものはありますが、新たに読み込んだり逆に削除したりすればそれだけでかなり時間短縮になります。

なお、このindex.htmlは必ず上書き保存しておいてください。
Windowsなら「Ctrl + S」、Macなら「Cmd + S」で上書き保存ができます。

課題の提出

今回は課題提出として、この講義でコーディングを行ったデータの提出を行います。
「html」フォルダのデータ
を提出しましょう。

提出用に「html」フォルダをまるごとzip形式で圧縮してください。

「html」フォルダをzip形式で圧縮

まず、「html」フォルダ圧縮の手順は以下。

  1. 「html」フォルダを右クリックして、「送る」→「圧縮(zip形式フォルダー)」を選択してzipファイルを作る。

以上です。
なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。zip形式ではないファイルだと送信の際にエラーが出て送信ができませんので、必ず「html」フォルダをまるごと圧縮してzip形式で提出してください。

学籍番号(必須)
氏名(必須)
フリガナ (必須)
メールアドレス
質問など
課題ファイル

課題の提出ができたら今回の講義は終了です。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE