-本日のアジェンダ-
1限目
学科 HTML基礎①
ページのソースとデベロッパーツールについて
2限目
学科 HTML基礎①
基本タグとヘッダー領域
3限目
学科 HTML基礎①
見出し（h1～h6）と段落（p）
4限目
学科 HTML基礎①
HTMLのまとめ
5限目
学科 HTML基礎①
グラフィックツールの復習
本日のテーマ
まずHTMLのソースコードの見方を理解しましょう。
ページのソースについて
ホームページのソースとは？ 普段何気なく見ているホームページなどのウェブページは、HTMLやCSSというマークアップ言語からできています。 これらの言語で書かれたファイルのことを「ソースファイル」と呼び、例えばHTMLで書かれたファイルを「HTMLソース」といいます。
参考サイト
デベロッパーツールについて
デベロッパーツールはGoogle Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML構成や表示スピード、通信状況などを確認できます。 特別なツールやプログラムを使わずブラウザのみで手軽に利用でき、エンジニアの私もWebサービスの開発やテスト、デザインのチェックを行うときに頻繁に使っています。
参考サイト
ワンポイントアドバイス
ソースコードは実際に記述したコードの内容で、デベロッパーツールはブラウジングされた内容として出力されます。コードの誤り等を見つけるのに便利ですので、しっかり使いこないしてみましょう。
htmlの記述【基本タグ】
- <!doctype html>
- <html>∼</html>
- <head>∼</head>
- <body>∼</body>
doctype宣言とは？
HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良いでしょう。
DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となります。 互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合があります。 ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要があります。 IE6も含めて、主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モードとなります。
参考サイト
ワンポイントアドバイス
楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合があります。
その場合やむを得ず、違う方法を使わなければならない場合がありますので、お仕事で担当した時は、 DOCTYPE宣言は必ず確認しておきましょう。
<html>∼</html>
<html>タグは、HTML文書であることを示す際に使用します。 <html>～</html>で定義されるhtml要素は、文書のルート（根っこ）となる要素で、HTML文書の内容が始まることを表します。 <html>～</html>の直下には、 <head>と <body>がそれぞれ一つづつ必要となります。
<head>∼</head>
<head>タグは、文書のヘッダ情報を表す際に使用します。 ヘッダ情報とは、その文書に関する情報のことです。 head要素を正確に定義するなら、「そのHTML文書に関するメタデータを集めたもの」ということになります。
<body>∼</body>
<body>タグは、文書の本体を表す際に使用します。 文書の本体とはブラウザ上に表示されるメインコンテンツのことです。
htmlの記述【ヘッダー領域】
- <meta>
- <title>∼</title>
- <link>
<meta>
<meta>タグは、その文書に関する情報（メタデータ）を指定する際に使用します。 メタデータとは、“情報に関する情報”のことですが、HTMLの仕様では“その文書に関する様々な情報”を意味します。
ワンポイントアドバイス
<meta charset=”UTF-8″> の文字コードの指定は実は必須要素ではありませんが、サイト制作時にはほとんどの場合記述しておきましょう。
主に文字化けの原因となる事を回避する目的として記載しておくタグと覚えておいてよいでしょう。
<title>∼</title>
<title>タグは、文書にタイトルをつける際に使用します。 <title>タグで文書のタイトルを指定する場合には、一つの文書に一つだけ、<head>～</head>の中に配置します。 一つの文書内で複数の<title>を指定することはできません。<title>～</title>に指定する文書のタイトルは、 検索エンジンの検索結果画面やユーザーの利用するブラウザのブックマーク欄などに表示されるので、文書の内容を表すものを指定する必要があります。
ワンポイントアドバイス
<title>∼</title> はとにかくSEOに直結します。検索エンジンで検索した時の一覧に表示される文字列に反映されますので、タイトル（題名）はよく考えて作成しましょう。
<link>
<link>タグは、リンクする外部リソースを指定する際に使用します。 外部リソースとは、例えば、HTMLファイル、CSSファイルなど、現在の文書ファイルに関連している外部ファイルのことです。 <link>タグは、<head>～</head>の中に記述します。
<link>タグを指定する場合には、href属性とrel属性が必須です。 href属性とrel属性が指定されていない場合には、<link>タグの指定は無効となります。 href属性には、リンクする外部ファイルのURLを指定します。
参考サイト
htmlの記述【見出し（h1～h6）と段落（p）】
- 見出し「h1～h6」
- 段落「p」
- 改行「br」
見出し「h1～h6」について
<h1>・<h2>・<h3>・<h4>・<h5>・<h6>タグは、見出しを付ける際に使用します。数値が小さいほど高いランクの見出しとなります。 <h1>が最も高位の大見出しで、<h6>が最も低位の小見出しです。 同じ数値のものが複数ある場合には同じランクとなります。
ワンポイントアドバイス
h1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は1ページにh1タグが複数あっても問題ありません。
参考サイト
段落「p」ついて
<p>タグは、ひとつの段落（パラグラフ）であることを表す際に使用します。<p>タグは、段落よりもふさわしい要素がある場合には使用するべきではありません。
ワンポイントアドバイス
マークアップに悩んだらとにかく「p」にしましょう。
改行「br」について
<br>タグは、改行する際に使用します。<br>は、例えば詩や住所などのように、改行が実際にコンテンツの一部を成すような場合にのみ使用します。 文の長さを揃えたりレイアウトを整えるなどのスタイリング目的に<br>を使用してはいけません。
ワンポイントアドバイス
スペースを取る為に改行「br」を使うのは文法的にNGです。レイアウトとしてスペースを空けたいときはCSSで行いましょう。
特殊文字
ウェブページに特殊文字や記号を表示させるには専用の文字コードが必要となります。 その内容と特徴を確認しておきましょう。
参考サイト
改行とタブとスペースについて
HTML文章中の改行とタブとスペースにもルールがあります。
下記参考サイトより確認しておきましょう。
本日の課題①
wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。
本日の課題②
グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科 グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。