タグ: HTML

学科 HTML基礎③

-本日のアジェンダ-

1限目
学科 HTML基礎③
テキスト分類タグとコンテンツ埋め込みタグについて

2限目
学科 HTML基礎③
画像の取り扱いについて

3限目
学科 HTML基礎③
テーブルタグとフォームタグについて

4限目
学科 HTML基礎③
HTML・CSSの紐付けと特殊文字について

5限目
学科 HTML基礎③
本日の講義のまとめ

本日のテーマ

HTMLとCSS記述の基本事項を理解しましょう

【まとめサイト】

【動画】

テキスト分類タグについて

  • a 要素（ハイパーリンク）
    ハイパーリンクする範囲を指定します。
  • em 要素（強調）
    強調する（アクセントを付ける）範囲をを指定します。
  • strong 要素（強い重要性）
    強い重要性を示す範囲を指定します。
  • small 要素（免責・警告・著作権など）
    免責・警告・著作権などの注釈や細目する範囲を指定します。
  • i 要素（声や心の中で思ったこと）
    声や心の中で思ったことなど、他と区別したい範囲を指定します。
  • b 要素（キーワードや商品名など）
    キーワードや商品名など、他と区別したい範囲を指定します。
  • span 要素（ひとつの範囲）
    ひとつの範囲として定義する範囲を指定します。
  • br 要素（改行）
    改行する箇所を指定します。本要素には、終了タグがありません。

コンテンツ埋め込みタグについて

  • img 要素（画像）
    画像の埋め込み表示を指定します。本要素には、終了タグがありません。
    img要素では、alt属性を使用して代替テキストを指定してください。「代替テキスト」は、画像が表示できない時に画像の代わりに表示するテキストを指定します。必須項目なので必ず指定してください。
  • iframe 要素（インラインフレーム）
    インラインフレーム内に「フレーム内に表示する URL」で指定した URL の内容を表示します。「補足情報」には表示する内容の補足的な情報を指定します。
    「フレームの幅」と「フレームの高さ」には、作成するフレームの大きさを指定します。幅の初期値は 300、高さの初期値は 150 です。

画像の取り扱いについて

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

参考サイト

ワンポイントアドバイス

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

テーブルタグについて

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

<table>
　　<caption>キャプション</caption>
　　<tr><th>見出し</th><th>見出し</th></tr>
　　<tr><td>データ</td><td>データ</td></tr>
　　<tr><td>データ</td><td>データ</td></tr>
</table>

  • table要素（テーブルの範囲）
    テーブルの範囲を指定します。
  • caption要素（表のキャプション）
    表のキャプション（主題）を指定します。
  • tr要素（1行の範囲）
    1行の範囲を指定します。
  • th要素（タグ見出し）
    タグ見出し項目を指定します。
  • td要素（データ項目）
    データ項目を指定します。

参考サイト

ワンポイントアドバイス

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

フォームタグについて

  • form 要素（フォーム）
    入力フォームの作成を指定します。フォーム要素にフォームを構成するフォーム要素（部品）を配置します。
  • label 要素（ラベル）
    入力フォームのフォーム部品とラベルを関連付けます。一般的には、関連付けを行うことでラベルをクリックしてもフォーム部品をクリックしたのと同じ効果を出すことができます。
  • input 要素（インプット）
    テキスト入力欄やボタンなそのフォーム部品を作成します。本要素には、終了タグがありません。
  • textarea 要素（テキストエリア）
    複数行のテキスト入力ボックスを作成します。本要素には、終了タグがありません。
  • select/option 要素（セレクト／オプション）
    select 要素は、option 要素で指定されたリストからの選択ボックスを作成します。
  • button 要素（ボタン）
    ボタンを作成します。
  • fieldset/legend 要素（フィールドセット／レジェンド）
    fieldset 要素は、フォーム要素をグループ化します。legend 要素は、グループ化した要素群のキャプションを指定します。

CSSとの紐付けについて

HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用されます。

参考サイト

特殊文字について

HTMLのコードを記述する時に特別な書き方をする必要のある文字があります。

参考サイト

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

学科 HTML基礎②

-本日のアジェンダ-

1限目
学科 HTML基礎②
HTMLの基本構造について

2限目
学科 HTML基礎②
HTMLの文書情報について

3限目
学科 HTML基礎②
セクション分類タグについて

4限目
学科 HTML基礎②
コンテンツ分類タグについて

5限目
学科 HTML基礎②
本日の講義のまとめ

本日のテーマ

HTMLの基本構造を理解しましょう

【まとめサイト】

【動画】

HTMLの基本構造について

<!DOCTYPE html>
<html lang=”ja”>
<head>
　　（文書の情報を記述）
</head>
<body>
　　（文書の本体を記述）
</body>
</html>

  • !DOCTYPE 宣言（ドキュメントタイプ宣言）
    ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば<!DOCTYPE html>と記述します。
  • html 要素（HTML の文書）
    html 要素は、この文書が HTML の文書であることを表します。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。
  • head 要素（文書情報）
    head 要素は、この文書のメタデータを記述します。例えば、<title>～</title>でその文書のタイトルを記述することができます。
  • body 要素（文書本文）
    body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。

文書情報について

  • title 要素（ページタイトル）
    Web ページのタイトル名を記載します。多くのブラウザではブラウザのタイトルタブに表示される名称となります。
  • meta 要素（文字コード指定/charset）
    HTML を記述している文字コードを指定します。文字コードが UTF-8 の場合は “UTF-8” と指定します。
  • meta 要素（ページの説明文/description）
    ページの概要を示す説明文を指定します。一般的には検索サイトでページ概要として表示され、PC は 120 文字程度、スマホは 50 文字程度が表示文字数となります。
  • meta 要素（ページのキーワード/keywords）
    ページの検索キーワードをカンマ（,）で区切って指定します。キーワードの有効可否は検索サイトに依存します。
  • meta 要素（ページの作者情報/author）
    Web ページの作成者情報を指定します。
  • meta 要素（ビューポート/viewport）
    Webページの表示領域を指定します。 上記の “width=device-width” デバイスの表示幅に合わせた表示領域を使用することを示し “initial-scale=1.0” は 1.0 倍の倍率で表示することを示します。 viewportを指定していないWebページをスマホで表示するとPC用の画面が縮小されて表示されます。 viewportを指定して複数の装置のデザインを実装することをレスポンシブWebデザインといいますが正しく実装するには、HTML に viewport を記述すると同時に CSS にレイアウト調整を行う記述が必要となります。
  • link要素（外部 CSS ファイルの紐付け）
    外部のスタイルシートファイルとの紐付けを指定します。
  • link要素（ファビコンファイルの紐付け）
    ファビコンファイル（Web ページのシンボルアイコンファイル）との紐付けを指定します。一般的なファビコンファイル名は “favicon.ico” になります。

文書本文について

文書本文に記載するタグには、以下の分類があります。

  • セクション分類タグ
  • コンテンツ分類タグ
  • テキスト分類タグ
  • コンテンツ埋め込みタグ
  • テーブルタグ
  • フォームタグ

参考サイト

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

要素の多くは、ブロックレベル要素とインライン要素に分類されます。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

  • ブロックレベル要素
    文書の骨組みとなる要素です（例えば見出しや段落など）。このタイプの要素は、body要素の直接の子要素として配置することができます。
  • インライン要素
    文章中の一部として扱われる要素です（例えばリンクや文字の強調など）。このタイプの要素は、通常はブロックレベル要素内で使用します。

参考サイト

セクション分類タグについて

  • h1～h6 要素（見出し）
    各レベルに従った見出しを指定します。一般的に h1 はページに 1 つだけ指定します
  • article 要素（アーティクル）
    単独で成り立つコンテンツのブロックを定義します。
  • section 要素（セクション）
    章のブロックを定義します。
  • header 要素（ヘッダー）
    ページ上部のヘッダーブロックを定義します。セクション要素やアーティクル要素内のヘッダー情報としても使用可能です。
  • footer 要素（フッター）
    ページ下部のフッターブロックを定義します。セクション要素やアーティクル要素内のフッター情報としても使用可能です。
  • nav 要素（ナビ）
    グローバルナビゲーションのブロックを定義します。
  • aside 要素（アサイド）
    ページの内容と関連がないブロックや補足情報のブロックを定義します。

参考サイト

ワンポイントアドバイス

見出し（h1～h6）要素でh1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は1ページにh1タグが複数あっても問題ありません。

参考サイト

コンテンツ分類タグについて

  • p 要素（段落（パラグラフ））
    段落（パラグラフ）を指定します。段落よりもふさわしい要素がある場合には使用するべきではありません。
  • hr 要素（区切り）
    テーマや話題の区切りを指定します。
  • ul/li 要素（順序のないリスト）
    順序性のないリスト要素を指定します。
  • ol/li 要素（順序のあるリスト）
    順序性のあるリスト要素を指定します。
  • dl/dt/dd 要素（定義・説明リスト）
    説明文リストを指定します。
  • div 要素（ひとつのかたまりの範囲）
    ひとつのかたまりの範囲を指定します。
  • main 要素（メインコンテンツ）
    ページのメインコンテンツブロックを定義します。

ワンポイントアドバイス

マークアップに悩んだらとにかく「p」にしましょう。

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。