＜概要＞
⚫︎Webサイト制作の手順について
⚫︎Webサイト制作時の事前準備について
⚫︎HTMLの基本構造について
⚫︎文章情報と文書本文について
★Webサイト制作の手順を理解する
まずは流れについてマスターする！
出来ないのは当たり前！
⚫︎Webサイト（ページ）作成の流れとは？
00.依頼を頂く：
・打ち合わせ
01.ご提案（企画をまとめる）：
・企画書（企画案）
・サイトマップ
・見積り
※場合によりワイヤーフレームの用意が必要な場合がある
ここで制作依頼を受諾＝制作スタート
02.デザインに必要な素材の作成：
・ロゴ
・ピクトグラム
・アクセスマップ
・写真（加工・撮影・収集）
・原稿
・その他（SNSやjQueryの動きの素材等々…）
03.デザインラフの作成：
※必要に応じて「PCのデザイン」と「スマホ・タブレット」の素材も用意する
ここまでで主に使用するツールは
Photoshop・Illustrator・XD
04.コーディング：
・HTML：検索エンジンに対して、「このサイトには何を記述してある」ということをマークアップするための言語で＜＞のようなタグ（要素）であらわされる。
文法を学ぶ必要がある。
・CSS：見た目を作るための言語。
紙に筆で絵を描くようにプログラム言語を利用してWebサイトを描く。
★覚えるコツは「整理整頓」
デザインの話とは違い「覚えること」が多くなる。
そのため、まず「概要」を理解しておく必要がある。
学校のテストをする訳ではなく、実務でWebページを作ったり、編集したり出来るようになればお仕事として成立する。
そのため検索しても良し、コピペしても出来れば良し。
メモ書きのサイトなどでいつでも使えるようにするということも大事。
●Webサイト（ページ）の構成要素について
HTML：Web ページ内の各要素の意味や文書構造を定義する。
CSS：レイアウトデザインや各要素の装飾（色・サイズなど）を定義する。
JavaScript / jQuery：動きを付けたり計算などの処理を行う。
■HTML・CSSのメモ書きサイト（2022年9月訓練校作成）
https://samplesdl.me/training_html-css/
※現時点で確認済みのほぼ全てのブラウザで使えるタグやよく使うスタンダードなタグのみ掲載されている。
⚫︎コーディングの手順
01. 素材が揃っているか確認
02. マークアップ
【マークアップ・HTMLファイルの作成①】
「!doctype html」「html」「head」「body」等骨組みのタグを整える
→【マークアップ・HTMLファイルの作成②】
「h1～h6」「p」「ul,li」「img」「a」等の基本タグで「原稿」と「画像」をマークアップ
→【マークアップ・HTMLファイルの作成③】
「header」「nav」「main」「section 」「footer」等のセクションの部分をマークアップ
→【マークアップ・HTMLファイルの作成④】
デザインに合わせて「div」や「span」を追加して「id=””」「class=””」を付けていく
→【マークアップ・HTMLファイルの作成⑤】
検証ツールを上手く使う
参考サイト：http://www.htmllint.net/html-lint/htmllint.html
03. CSSでデザインをする
【CSSの記述①】
CSSを上手くコントロールするためにリセットCSSの設定をする
※リセットCSSは育てていくもの。
→【CSSの記述②】
セレクタ（selector）の記述を先にしてしまう。
例：#header header h1{} 点数計算とセレクタの記述ルールに気を付ける。
→【CSSの記述③】
後はひたすらプロパティを書いていく。
セレクタをマークアップと同じ上から書くことによって間違い探しがラクになる。
ここまでで主に使用するツール
Dreamweaver・デべロッパーツール
→【CSSの記述④】
スマーフォン対応「メディアクエリ」を足していく。
デベロッパーツールのシュミレーターなどを使って実機検証を行っていく。
→【CSSの記述⑤】
SNSやjQueryの埋め込みは最後に行うのがコツ。
※サーバーにUPしないと動かないものもあるため。
★最初は思い通りにCSSと連動するのは難しいので、元に戻せるようにまめにバックアップを取っておくことが必要。
★リテイク（変更・修正）に強いコードを意識して、「後から使うかも…」のセレクタまで記述しておくと良い。
04. サーバにテストアップする
ここでリンク切れや画像の確認・ブラウザやデバイス確認をする。
05. 納品（納品後の運用もあるため全て終了というわけではない）
【HTML基本構造について】
■ファイルのパス指定について
ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法がある。
絶対パス：
住所を指定するのと同様で、Web上の絶対的な場所を指定する。
Web上で絶対的な場所は URLというアドレスになる。
もし、絶対パスを使ってリンクを指定する場合は、リンク先のページをブラウザで表示し、 ブラウザのアドレスバーにあるURLをコピーすることで指定できる。
なお、絶対パスは主に”外部のWebサイト”へのリンクに利用する。
相対パス：
人に道を教えるのと同様で、現在居る場所から目的のファイルまでの道順を指定する。
その為にはまず、どのファイルがどのフォルダに入っているのかというフォルダ構成を理解しておく必要がある。
参考：https://creatorquest.jp/lessons/html/absolutepath-relativepath/#google_vignette
■タグの構造
<要素名>内容（コンテンツ）
<要素名 属性=”属性値”>内容（コンテンツ）
<要素名 属性=”属性値”>
要素名：
タグの種別を指定するもので、タグ名とも言われる。
要素の種類によって終了タグ（</要素名>）の有無が決定する。
属性：
要素名に対して設定する属性名を指定する。
属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができる。
属性値：
属性に対する値を指定する。
一般的には、ダブルクォーテーション（”）で囲んで指定するが シングルクォーテーション（’）で囲むことも可能。
属性値がない時は、イコール（=）以降が省略される。
複数の属性を指定する時は、スペースで区切って指定する。
■HTMLの基本構造
<!DOCTYPE html>
<html lang=”ja”>
<head>
（文書の情報を記述）
</head>
<body>
（文書の本体を記述）
</body>
</html>!DOCTYPE 宣言（ドキュメントタイプ宣言）：
この文書のバージョンを宣言するメタ情報のこと。
HTML5 であれば<!DOCTYPE html>と記述する。
html 要素（HTML の文書）：
この文書が HTML の文書であることを表す。
「lang=”ja”」の “ja” は日本語で書かれた文書であることを表す。
head 要素（文書情報）：
この文書のメタデータを記述する。
例えば、<title>～</title>でその文書のタイトルを記述することができる。
body 要素（文書本文）：
この文書の本文を記述する。
この body 要素で囲まれた領域が Web ページとして表示される。
★DOCTYPE宣言とは？
HTML5におけるDOCTYPE宣言はあまり意味を持たないとされているが、 作成した文書がHTML5によるものであることをブラウザなどに明示的に伝えるために記述しておいたほうが良い。
DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となる。
互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合がある。
ブラウザに標準モード（Standards mode）で解釈させる場合にはDOCTYPE宣言を記述する必要がある。
主要なブラウザでは文書の先頭に<!DOCTYPE html> と記述することで標準モードとなる。
※楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合がある。
その場合やむを得ず、違う方法を使わなければならない場合があるため仕事になっても DOCTYPE宣言は必ず確認しておく。
■head 要素（文書情報）
title 要素（ページタイトル）
meta 要素（文字コード指定／charset）
meta 要素（ページの説明文／description）
meta 要素（ビューポート／viewport）
link要素（外部 ファイルとの紐付け）
■body 要素（文書本文）
構造化タグ
コンテンツのグループ化タグ
テキストの意味
コンテンツの埋め込み
テーブル
フォーム
■ブロックレベル要素とインライン要素について
要素の多くは、ブロックレベル要素とインライン要素に分類される。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっており、あくまでも性質を持っていると考えておく。
■HTML：構造化タグ
article 要素（アーティクル）
section 要素（セクション）
nav 要素（ナビ）
aside 要素（アサイド）
h1～h6 要素（見出し）
header 要素（ヘッダー）
footer 要素（フッター）
※見出し（h1～h6）要素でh1タグ以外は、特に使用回数に制限はない。
h2やh3などは大きな見出しとなることが多いためたくさん使われる。
「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」
これを守っていれば使用になんら問題はない。
ただ、html5の場合は、sectionタグやarticleタグと組み合わせることで1ページに複数のh1タグを記述することができる。
■HTML：コンテンツのグループ化タグ
p 要素（段落（パラグラフ））
hr 要素（区切り）
ol/li 要素（順序のあるリスト）
ul/li 要素（順序のないリスト）
dl/dt/dd 要素（定義・説明リスト）
main 要素（メインコンテンツ）
div 要素（ひとつのかたまりの範囲）
次回実践で覚えていきます！