-本日のアジェンダ-

1限目
学科 HTML基礎①
Webサイト制作の手順について

2限目
学科 HTML基礎①
Webサイト制作時の事前準備について

3限目
学科 HTML基礎①
Webサイト制作時の知識について

4限目
学科 HTML基礎①
HTMLの基本構造について

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

本日のテーマ

Webサイト制作の手順を理解しましょう

Webサイト（ページ）の制作について

お客様からWebサイト（ページ）の制作を依頼された場合に必要となる作業を工程別に理解しましょう。

参考サイト

【動画】

Webサイト（ページ）の構成要素について

  • HTML
    Web ページ内の各要素の意味や文書構造を定義します。
  • CSS
    レイアウトデザインや各要素の装飾（色・サイズなど）を定義します。
  • JavaScript/jQuery
    動きを付けたり計算などの処理を行います。

ワンポイントアドバイス

Webサイトを作成するには、HTML、CSS、JavaScript/jQuery、画像ファイルなど、複数のファイルを管理する必要があります。作成するWebサイト用の開発フォルダを作成すると同時に必要に応じてサブフォルダを作成して各ファイルを管理しましょう。

Webページ開発ツールについて

Webページ開発には、テキストエディタとブラウザが必要です。Windows標準にインストールされているメモ帳とEdgeでもWebページ開発が可能ですが、本訓練では、TeraPadとChromeを使用してWebページ開発を行います。TeraPadとChromeは、Windows標準ではインストールされていませんのでインストールを行ってください。

参考サイト

文字コードについて

日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがあります。Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用してください。

参考サイト

ファイルのパス指定について

ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法があります。それぞれの特徴を理解して使い分けましょう。

参考サイト

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 ページとして表示されます。

doctype宣言とは？

HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良いでしょう。

DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となります。 互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合があります。 ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要があります。 主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モードとなります。

参考サイト

ワンポイントアドバイス

楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合があります。その場合やむを得ず、違う方法を使わなければならない場合がありますので、お仕事で担当した時は、 DOCTYPE宣言は必ず確認しておきましょう。

授業ノート

□ホームページ文字コード
　Shift_JIS（以下sjisと表記）・・・少し前までは日本のホームページでよく使われていた文字コード
　euc-jp（以下eucと表記）
　utf-8（以下utf8と表記）・・・世界基準であり一般的に採用されることが多いので授業ではこれを使う
※下記はutf-8での文字コード指定タグ（html5の場合の記述例）

XD・・・Photoshopとillustratorの主要機能を簡易的にに使えるソフト

□WEBサイトのコーディング
　HTML＝検索エンジンに対するタグの記述
　CSS＝色や配置、デザインなどの見た目の作成
　SEO対策＝グーグル検索に引っかかるようにする対策

□memo
　・WEBページ作成の際は使用する素材はあらかじめ用意しておくことが大切
　・metaとlinkはとじタグ不要
　・stylecss＝設定しているデザイン
　・resetcss＝初期設定デザインを消す
　・コードに著作権はないので使いやすいものを使いまわしてokだがIDは使いまわせない
　・favicon=サイトのタブアイコン
　・HTMLのタグはメインで使うのは15個くらいでおよそ決まったタグを使用することが多い
　・cssのプロパティー＝適用するCSSのスタイルの種類
※例えば、文字サイズを変更したい場合の「font-size」や、背景色を変更したい場合の「background-color」などのことを指す