HTML基礎①
〇WEBサイト…複数のページをまとめたもの
WEBページ…複数のページのうちの一つ
ランディングページ…商品、製品を紹介するページ
Web制作の流れ
0.依頼を頂いた
打ち合わせ
1.ご提案（企画をまとめる）
・企画書 ・サイトマップ ・見積り
2.デザインに必要な素材の作成
・ロゴ ・ピクトグラム ・アクセスマップ ・写真 ・原稿 ・その他（SNSやjQueryの動き素材など）
3.デザインラフの作成
ワイヤーフレーム、たたき台を作る
4.コーディング
HTML（ページのソース）・CSS（検証）
〇HTML：検索エンジンの為
CSS：デザインのため（見た目）
〇覚えるコツ 整理整頓、「概要」を理解する（メモ書きサイトを作るなど）
コーディングの手順
1.素材の確認
2.マークアップ
HTMLファイルの作成
① 骨組みの「タグ」を整える
② 基本タグで「原稿」と「画像」をマークアップ
③ セクション（章・節・項）部分のマークアップ
④ デザインの必要性に合わせて「id=””」「class=””」を付ける
⑤ 検証ツールをうまく使う
3.CSSでデザインする
CSSの記述
① リセットCSSの設定
（リセットCSS：ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイル）
② セレクタ（selector）の記述を先に
（セレクタ：CSS ルールの最初の部分）
③ ひたすらプロパティを書く、デザインの上から
④ スマートフォン対応の「メディアクエリ」を足す
⑤ SNSやjQueryの埋め込みは最後
4.サーバにテストアップ
リンク切れや画像の確認・ブラウザデバイスの確認
5.納品
納品後はサイトの運営というサポートがある
1.HTMLとCSSとは
参考サイト：https://html-css.hamaya2020.com/index.html
Webページ＝HTML（文書構造）+CSS（レイアウト・装飾）+Java Script / jQuery（動き）
開発用フォルダ構成
〇Web-test—開発用フォルダ（一つのフォルダを作る）
index.html ─┬──HTMLファイル
sub.htm ──┤
sub.html ──┘
style.css—CSSファイル
[images]—画像ファイル（一つ下のフォルダ）
photo.jpg ─┬──画像ファイル
logo.png──┘
文字コード
① シフトJIS/SIFT-JIS/SJIS…pc（Windows）で使われる文字コード
② ECU…サーバー用UNIXで使われる文字コード
③ UTF-8（UTF-8 BOM有り）
④ UTF-8N（UTF-8 BOM無し）
※UTF-8，UTF-8Nが基本
BOMはファイルの頭にBOM：バイトオーダーマーク（UTF-8であること）がついているという意味
HTML/CSSのチェック
文法チェックサイトを利用する
HTML：http://www.htmllint.net/html-lint/htmllint.html
CSS：https://jigsaw.w3.org/css-validator/validator.html.ja
絶対パスと相対パス
①絶対パス
http://sample.com/index.html
https://sample.com/index.html
・httpやhttpsから始まるパス指定
・どこから指定しても必ず開かれる
②相対パス
about.html
images/photo.jpg
・自己ファイル格納位置からの相対位置で開く
・同じフォルダ内でないと開けない
〇同じフォルダ内であれば相対パスでOK（“/”は子の意味、フォルダ内の子ファイルを指す）
〇子フォルダから親フォルダを開く（指定する）場合は”../“
2.HTMLの記述
HTMLとは：ハイパーテキストマークアップランゲージ
タグの記述 属性が複数あれば半角の空白で区切って並べられる
<要素名 属性="属性値">① 要素名：タグの種別を指定、閉じタグは</要素名>
② 属性：要素名に対して設定する属性名
③ 属性値：属性に対する値、””で表示、ないときは省略
<!DOCTYPE html>
<html lang="ja">
<head>
(文書の情報を記述) 〇メタデータ：Webページに表示されない
</head>
<!--(コメント)--> ※Webページには表示されない
<body>
(文書の本体を記述) 〇文書の本体：Webページに表示される
</body>
</html>〇メモで作っておいて貼り付ける方が良い
〇WordPressでソースコードを直接表示させるにはブロックエディタからコードエディタ（<>のマーク）で貼り付ける