依頼からWeb制作のながれ
ー打合せ（ヒアリング→どんな機能が必要か、どんなページの作成か、作業のボリュームの確認）
ー企画をまとめてご提案（企画書、サイトマップ、見積もり、ワイヤーフレームの作成）
ーデザインに必要な素材の作成（ロゴ、ピクトグラム、アクセスマップ、写真、などの準備や作成）
ーデザインラフの作成（デザインのたたき台）
⋆ソフト・・・Photoshop、Illustrator、XD
ーコーディング（HTML、CSS）※必ずフィックスしてからのスタート
⋆HTML・・・ウェブページにテキストや画像を配置したり、それらに意味付け（例えば、見出しとして扱わせるなど）したりするための言語 半角英数で入力
⋆HTML SEO・・・ウェブサイトの検索エンジンでの表示順位を向上させるために、HTMLコードを最適化する対策のこと
⋆CSS・・・デザイン、見た目を作成する
webページ開発ツール
Webサイト作成には、テキストエディタでHTMLやCSS、JavaScriptなどのコードを記述し、Webブラウザで表示・確認する
ーテキストエディタ
おすすめ
Windows → TeraPad
mac → mi
Windows/mac → Visual Studio Code/VS Code
ーブラウザ（Chrome、Edge、Safari、Firefoxなど）
※訓練ではChromeを使用 実際の仕事では様々なブラウザできちんと表示できるか確認が必要
コーディングの手順
ー素材の確認（ロゴ、ピクトグラム、写真、原稿、その他）
ーマークアップ・HTMLファイルの作成
①「!doctype html」「html」「head」「body」等骨組みのタグを整える
②「h1～h6」「p」「ul,li」「img」「a」等の基本タグで「原稿」と「画像」をマークアップ
③「header」「nav」「main」「section 」「footer」等のセクションの部分をマークアップ
④デザインに合わせて「div」や「span」を追加して「id=””」「class=””」を付けていく
⑤検証ツールを使用して、文法が正しいか確認
◆参考サイト
http://www.htmllint.net/html-lint/htmllint.html
ーCSSでデザインをする
①リセットCSSの設定
※CSSを上手くコントロールするためにリセットCSSを設定 リセットCSSは育てていく
②セレクタ（selector）の記述を先にする
例：#header header h1{} 点数計算とセレクタの記述ルールに気を付ける
③後はひたすらプロパティを書いていく
コツはデザインの上から作成していく Dreamweaver、デベロッパーツールの利用
※セレクタをマークアップと同じ上から書くことによって間違い探しがラクになる
④スマーフォン対応「メディアクエリ」を足していく
デベロッパーツールのシュミレーターなどを使って、実機検証を行っていく
⑤SNSやjQueryの埋め込みは最後に行うのがコツ
※サーバーにUPしないと動かないものもあるので、最後に取っておく
元に戻せるようにまめにバックアップを取ってく
→上書き保存ではなく、「別名で保存」する
ーサーバにテストアップ（リンク切れや画像の確認・ブラウザやデバイス確認）
ー納品（運営というサポートがある）
HTMLとCSSの基礎をまとめたサイト
https://samplesdl.me/training_html-css
HTML-CSS 入門講座
https://html-css.hamaya2020.com/index.html
HTMLの記述
Tera Pad
①【表示】→【オプション】を開いて、【基本】→【タブの文字数】を４に設定
②【表示】→【オプション】を開いて、【表示】→【マーク】５つ全てに✔をいれる
※（文章以外のところで）全角スペースは絶対に入れない → 表示されなくなったりする
③【ファイル】→【文字／改行コード指定保存】→【UTF-8N】を使用する
④保存するときのファイル名：「index.html」（.htmlは拡張子）
タグ
<!DOCTYPE html>・・・『HTML5で読み込んでください』という命令
<html lang=”ja”>・・・日本語で書かれた文書であることを表している
<head>・・・検索した時に出てくるタイトル、タブ表示されるタイトル、ページには掲載されていないもの
<body>・・・body 要素で囲まれた領域が Web ページとして表示される
ブロック要素
ブロック要素とは、HTMLやCSSにおけるレイアウトで、文書の構造を形成し、ページをセクションごとに区切る役割を持つ要素
一般的に、ブロック要素は改行され、新しい行から始まり、幅と高さを指定できる
head 要素（文書情報）
- <meta>：空要素なので終了タグが無い どんな属性なのか指定していく（charset、descriptionなど）
→<meta charset="UTF-8">：文字コードの指定 日本語の場合は『utf-8』と入力する
→<meta name="description" content="ドキュメントの説明文"> - <title>：ページのタイトル </title>で終了する
body 要素（文書本文）
- 構造化タグ
- コンテンツのグループ化タグ
- テキストの意味
- コンテンツの埋め込み
- テーブル ・・・カレンダー、表
- フォーム・・・お問い合わせ、会員登録
HTML：構造化タグ
- article 要素（アーティクル）→ その部分で一つの記事になり得るもの 独立した記事
- section 要素（セクション）→ 第１章 第２章 第１節 第２節 タイトルがつくもの
- nav 要素（ナビ） → グローバルナビゲーション、サブナビゲーション
- aside 要素（アサイド） → 補足的な要素
- h1～h6 要素（見出し） → 順番に使用しないとならない h1は１ページに１回のみ使用
- header 要素（ヘッダー）
- footer 要素（フッター）
HTML：コンテンツのグループ化タグ
- p 要素（段落（パラグラフ））
- hr 要素（区切り） 区切り線 話が変わる 終了タグがない要素（カラータグ）
- ol/li 要素（順序のあるリスト） 順番があるリスト ランキング／手順 など
- ul/li 要素（順序のないリスト） 順番がないリスト 入れ替わっても大丈夫
- dl/dt/dd 要素（定義・説明リスト）
- main 要素（メインコンテンツ）
- div 要素（ひとつのかたまりの範囲）
