まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
Sponsored Link
前回の講義内容覚えてますか？？
- ネット上のWebサイトの情報を集める仕事は、各検索エンジンのクローラーと呼ばれる検索ロボットが行っている、
- 人間が見るWebサイトと、クローラーが見るWebサイトは違い、クローラーは文字情報だけを見ている。
- htmlタグを使うのは、クローラーにページの構成や内容を判別させるため。
- クローラーが収集してきた情報をもとに、検索エンジンが表示順を決定する。
- 表示順を少しでも上に持っていくために行うのがSEOと呼ばれる手法。
- htmlタグには開始タグと閉じタグがあり、文字を囲うことで使用する。
またimgタグなど、中には閉じタグが存在しないhtmlタグもある。 - divタグは箱のようなもので、いろいろな要素を入れることができる。
- hタグは見出しで、数字が少ないほど重要な見出しになる。
- pタグは段落で、最も使用頻度の高いhtmlタグ。
- imgタグはページに画像を読み込むhtmlタグで、閉じタグが必要ない。
といった内容でしたね。
今回は実際にhtmlコーディングに入っていきます。
今回は、これを記述しておかないと正常に表示がされないという必須の部分の記述を行っていきましょう。
「内側・外側」「囲う」という言葉の意味
コーディングを始める前に・・・
前回の講義で開始タグと閉じタグのお話をしましたね。
今後講義を進める中で頻繁に「内側」「外側」や「囲う」という言い方をすると思います。
例えば「〇〇タグの内側に入れましょう」だとか「〇〇を△△タグで囲いましょう」といった感じです。
講義中にすぐ理解できるように、それぞれを説明します。
前回の講義で解説した、<div></div>タグと<p></p>タグを使って説明します。
・・・<div></div>タグと<p></p>タグの役割は覚えてる？？
内側・外側
マークアップされたタグの目線から考える
内側・外側の概念は、どのタグの立場から見たものかを考えるとわかりやすいです。
以下の例を見てみましょう。
html
<div>
<!-- 〜ここが<div></div>タグの内側〜 -->
<p>こんにちわ</p><!-- 〜これは<div></div>タグの内側の<p></p>タグ〜 -->
</div>内側
内側は、開始タグと終了タグの間のことを意味します。
上の例のように<div></div>タグの開始タグ（<div>）と終了タグ（</div>）の間（2・3行目）に記述する場合、<div></div>タグから見て「内側に記述する」という言い方をします。
また3行目の<p></p>タグを指す場合は、
「<div></div>タグの内側（中）の<p></p>タグ」という言い方をします。
外側
逆に外側だと、<p></p>タグは<div></div>タグの中にあるので、
「<p></p>タグの外側 = <div></div>タグの内側」ということになります。
囲う
「囲う」とはhtmlタグの外側にさらにhtmlタグを記述した状態です。
囲うを別の言い方で表すと「マークアップ」ということになります。
html
<p>こんにちわ</p>上のコードで「<p></p>タグを<div></div>タグで囲ってください」という言い方をしたら・・・
html
<div>
<p>こんにちわ</p>
</div>こんな風に、<p></p>タグの外側に<div></div>タグを記述しましょう。
また、「こんにちわ」を<p></p>タグでマークアップしてください、という言い方をしたら・・・
html
こんにちわ
<!-- 〜↓<p></p>タグでマークアップ〜 -->
<p>こんにちわ</p>こんな風に「こんにちわ」を<p></p>タグで囲えばいい、ということです。
コーディングの基礎② htmlファイルの基本的な構成
コーディングを始めていく上で、htmlファイルには必ず記述しなければいけない4つのブロックがあります。それが以下の項目です。
- 文書型定義ブロック
- htmlの文書の本体ブロック
- <head></head>セクション
- <body></body>セクション
それぞれ解説していきます。コーディングを行いながら解説を行いますので、ひとまずテキストエディタを起動して「index.html」「main.css」へのコーディング準備を行ってください。
Visual Studio Codeの左のエクスプローラーメニューの「html」フォルダから「index.html」「main.css」を開いて早速始めていきましょう。
文書型定義ブロック
最初に「文書型宣言」をする必要があります。
この文書型定義をしないと、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" "https://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ファイルの読み込みを行って「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>ウェブデザインA・演習</title>
</head>
</html>ページのタイトルは<title>ウェブデザインA・演習</title>となっている「ウェブデザインA・演習」の部分を変更すれば反映されます。ページに最もふさわしいページタイトルをつけて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>ウェブデザインA・演習</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>ウェブデザインA・演習</title>
</head>
<body>
</body>
</html>もし違っていたら、もう一度よく確認して訂正しましょう。
<（小なり）や>（大なり）や/（スラッシュ）は大文字になっていないか？？英字の綴りを間違っていないか？？タグの部分の英数字が全角になっているだけでもレイアウトが崩れます。
テンプレートにして効率アップ
今回皆さんが記述したものは、ページのデザインとは違いどの案件でもほとんど変わることがないテンプレートのようなものです。毎回同じような内容を記述しなくてもいいようにテンプレートにして置いておき、案件のコーディングを始める時に使い回すのが効率アップになります。
もちろん案件ごとに変わるものはありますが、新たに読み込んだり逆に削除したりすればそれだけでかなり時間短縮になります。
なお、このindex.htmlは必ず上書き保存しておいてください。
Windowsなら「Ctrl + S」、Macなら「Cmd + S」で上書き保存ができます。
課題の提出
今回は課題提出として、この講義でコーディングを行ったデータの提出を行います。
「html」フォルダのデータを提出しましょう。
提出用に「html」フォルダをまるごとzip形式で圧縮してください。
「html」フォルダをzip形式で圧縮
まず、「html」フォルダ圧縮の手順は以下。
- 「html」フォルダを右クリックして、「送る」→「圧縮（zip形式フォルダー）」を選択してzipファイルを作る。
- 圧縮したzipファイルのファイル名を「あなたの学籍番号_html01.zip」に変更する。
以上です。
なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。zip形式ではないファイルだと送信の際にエラーが出て送信ができませんので、必ず「html」フォルダをまるごと圧縮してzip形式で提出してください。
またファイル名を変更せず提出扱いになりません。（これ、かなり多いです。）
特に日本語のファイル名は提出時に文字化けしてしまうため、必ずファイル名を「あなたの学籍番号_html01.zip」に変更しましょう。
課題の提出ができたら今回の講義は終了です。
