Category Archives: 学科 HTML基礎

学科 HTML基礎②

-本日のアジェンダ-

1限目
学科 HTML基礎②
タグ分類について

2限目
学科 HTML基礎②
リストとテーブルについて

3限目
学科 HTML基礎②
画像とリンクについて

4限目
学科 HTML基礎②
HTMLのまとめ

5限目
学科 HTML基礎②
グラフィックツールの復習

本日のテーマ

タグの役割と特性を確認しましょう。

タグ分類について

  • セクション分類タグ
  • コンテンツ分類タグ
  • テキスト分類タグ

セクショニング・コンテンツについて

CSS3から登場のセクショニング・ コンテンツのタグは、より細かい役割を指定する時に使いましょう。

セクションニングタグ一例

<section>∼</section>一つのセクションであることを示す
<nav>∼</nav>ナビゲーションであることを示す
<header>∼</header>ヘッダであることを示す
<footer>∼</footer>フッタであることを示す

コンテンツタグ一例

<div>∼</div>ひとかたまりの範囲として定義する
<main>∼</main>メインコンテンツであることを示す

サンプルページ（htmlの記述【body】）

参考サイト

テキストの意味を持つタグについて

<a>～</a>のタグのようにテキストに意味を持たせることが出来るタグがいくつか用意されています。必要に応じて使用してみましょう。

テキストの意味

<em>∼</em>強勢する（アクセントを付ける）箇所を表す
<strong>∼</strong>強い重要性を表す
<small>∼</small>免責・警告・著作権などの注釈や細目を表す
<i>∼</i>声や心の中で思ったことなど、他と区別したいテキストを表す
<b>∼</b>文書内のキーワードや製品名など、他と区別したいテキストを表す
<span>∼</span>ひとつの範囲として定義する

参考サイト

ワンポイントアドバイス

「div」「span」とタグは「意味を持たない」という意味を持っています。CSSで文法の意味を持たないレイアウト が必要な時に使いましょう。

ブロックレベル要素とインライン要素について

要素の多くは、ブロックレベル要素とインライン要素に分類されます。
■ブロックレベル要素
文書の骨組みとなる要素です（例えば見出しや段落など）。このタイプの要素は、body要素の直接の子要素として配置することができます。
■インライン要素
文章中の一部として扱われる要素です（例えばリンクや文字の強調など）。このタイプの要素は、通常はブロックレベル要素内で使用します。
※ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

参考サイト

リストとテーブルについて

リスト「ul ol li」について

<ul>タグはunordered listの略で、順序のないリストを表示する際に使用します。 リスト項目は、<li>タグで指定します。
<ul>タグで作成されるのは順序のないリストなので、リスト項目の順序を変えても文書の意味は変わりません。 順序のあるリストを作成する際には<ol>タグを使用してください。

<ol>タグはordered listの略で、順序のあるリストを表示する際に使用します。 リスト項目は、<li>タグで指定します。
<ol>タグで作成されるのは順序のあるリストなので、リスト項目の順序を変えると文書の意味が変わってしまうはずです。 順序のないリストを作成する際には<ul>タグを使用してください。

サンプルページ（htmlの記述【リスト】）

テーブルタグについて

「TABLE」とは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。表の基本的な構造は<table>～</table>の中に<tr>～</tr>で表の横部分を指定し、その中に<th>～</th>や<td>～</td>で表題や縦軸を指定してセルを定義します。この時ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
<table>はしばし、レイアウトのために使用されることがあります。しかし本来の使用方法ではありませんので、レイアウトで同様の効果が欲しい場合はスタイルシートを利用するとよいでしょう。

参考サイト

ワンポイントアドバイス

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

画像とリンクについて

画像について

<img>タグは、画像を表示する際に使用します。 必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

参考サイト

ワンポイントアドバイス

Webサイトを重くする（表示スピードの低下）の大きな原因の一つは画像サイズです。WebサイトにUPする画像はPhotoshopやIllustratorでしっかりと画像の最適化をしてUPしましょう。

パス（URL）について

「パス」とは、使用するファイルなどが有る場所を示す文字列です（パソコンでは、フォルダ名の経路を示す文字列です）。
「URL」とは、パス（フォルダ）名にファイル名を加えた文字列です。

サンプルページ（パス）

ワンポイントアドバイス

リンクには「絶対パス」と「相対パス」というのがあります。
単純に説明すると…
絶対パスは「http（https）」から始まるURL（パス）の事
相対パスは「現在のファイル位置」から見たURL（パス）の事
になります。サイトの構造や運用方法によって使い分けが必要になる事がありますので、この2種類を覚えておきましょう。

参考サイト

リンクについて

<a>タグは、ハイパーリンクを指定する際に使用します。 ウェブページ内のテキストや画像などを<a>～</a>で囲んで必要な属性値を指定してやることで、 ハイパーリンクの始点（出発点）や終点（到達点）とすることができます。

<a>は、anchor（アンカー）の略です。 anchorを日本語にすると“船の錨・つなぎ止めて固定する”といった意味になります。 <a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。

ワンポイントアドバイス

SEO（検索エンジン最適化）の最も重要なタグの一つです。検索エンジンは、リンクを辿ってWebサイトを評価していきます。
まずは、リンク<a>～</a>で囲う文言は、リンク先のページの意味と同一になるように意識してみましょう。

参考サイト

ターゲット指定とは？

a要素に target="" を追加すると、リンク先の文書をどのフレーム（ウィンドウ）に表示するかを指定できます。

ワンポイントアドバイス

外部リンクを設定する時は自身のサイトからの離脱回避という意味と、他所のサイトの引用をしているという意味を込めて「 target=” _blank ” 」 新規のウィンドウに表示 に表示にしましょう。

要素と属性とその値について

HTML の要素は属性を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。

<要素名 属性="属性値">
開始タグの要素名の後ろに半角スペースを開ける
属性の後ろに=（イコール）を付ける
属性値は"（ダブルクオート）で囲む

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

学科 HTML基礎①

-本日のアジェンダ-

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>

サンプルページ（htmlの記述【基本タグ】）

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>

サンプルページ（htmlの記述【head】）

<meta>

<meta>タグは、その文書に関する情報（メタデータ）を指定する際に使用します。 メタデータとは、“情報に関する情報”のことですが、HTMLの仕様では“その文書に関する様々な情報”を意味します。

ワンポイントアドバイス

<meta charset=”UTF-8″> の文字コードの指定は実は必須要素ではありませんが、サイト制作時にはほとんどの場合記述しておきましょう。
主に文字化けの原因となる事を回避する目的として記載しておくタグと覚えておいてよいでしょう。

<title>∼</title>

<title>タグは、文書にタイトルをつける際に使用します。 <title>タグで文書のタイトルを指定する場合には、一つの文書に一つだけ、<head>～</head>の中に配置します。 一つの文書内で複数の<title>を指定することはできません。<title>～</title>に指定する文書のタイトルは、 検索エンジンの検索結果画面やユーザーの利用するブラウザのブックマーク欄などに表示されるので、文書の内容を表すものを指定する必要があります。

ワンポイントアドバイス

<title>∼</title> はとにかくSEOに直結します。検索エンジンで検索した時の一覧に表示される文字列に反映されますので、タイトル（題名）はよく考えて作成しましょう。

<link>タグは、リンクする外部リソースを指定する際に使用します。 外部リソースとは、例えば、HTMLファイル、CSSファイルなど、現在の文書ファイルに関連している外部ファイルのことです。 <link>タグは、<head>～</head>の中に記述します。
<link>タグを指定する場合には、href属性とrel属性が必須です。 href属性とrel属性が指定されていない場合には、<link>タグの指定は無効となります。 href属性には、リンクする外部ファイルのURLを指定します。

参考サイト

htmlの記述【見出し（h1～h6）と段落（p）】

  • 見出し「h1～h6」
  • 段落「p」
  • 改行「br」

サンプルページ（htmlの記述【body】）

見出し「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のサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。