-本日のアジェンダ-
1限目
学科 HTML/CSS基礎①
Webサイト制作の手順について
2限目
学科 HTML/CSS基礎①
Webサイト制作時の事前準備について
3限目
学科 HTML/CSS基礎①
HTMLの基本構造について
4限目
学科 HTML/CSS基礎①
文章情報と文書本文について
5限目
学科 HTML/CSS基礎①
本日の講義のまとめ
Webサイト制作の手順の教科書
Webサイト（ページ）作成の流れ
00.依頼を頂いた
打ち合わせ
01.ご提案（企画をまとめる）
・企画書（企画案）
・サイトマップ
・見積り
※場合のよっては「ワイヤーフレーム」の用意が必要な場合もあります。
制作依頼を受諾「制作スタート」
02.デザインに必要な素材の作成
「必要な素材」
・ロゴ
・ピクトグラム
・アクセスマップ
・写真（加工・撮影・収集）
・原稿
・その他（SNSやjQueryの動きの素材等々…）
03.デザインラフの作成
※必要に応じて「PCのデザイン」だけでなく「スマホ・タブレット」の素材も用意
ソフトについて
Photoshop Illustrator XD
04.コーディング
HTML CSS コマンド
HTMLは検索エンジンの為
CSSはデザイン（見た目）
ワンポイントアドバイス
覚えるコツは、整理整頓
デザインの話とは違い「覚える事」が多くなる。
そんな時のポイントは、まず「概要」を理解。
メモ書きのサイトを自分で用意するのも良い方法なので、下記サイトのような、Ｗｅｂサイトを用意して、いつでも使えるようにするという事も大事。
コーディングの手順 STEP01
【素材の確認】
・ロゴ
・ピクトグラム
・写真
・原稿
・その他（SNSやjQueryの動きの素材等々…）
コーディングの手順 STEP02
【マークアップ】
【マークアップ・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
コーディングの手順 STEP03
【CSSでデザインをする】
【CSSの記述①】
リセットCSSの設定
※CSSを上手くコントロールするためにリセットCSSを設定しましょう。またリセットCSSは育てていきましょう。
↓
【CSSの記述②】
セレクタ（selector）の記述を先にしてしまいましょう。
例：#header header h1{} 点数計算とセレクタの記述ルールに気を付けましょう。
↓
【CSSの記述③】
後はひたすらプロパティを書いていきましょう。
コツはデザインの上から作成していきましょう。
※セレクタをマークアップと同じ上から書くことによって間違い探しがラクになります。
ソフトについて
Dreamweaver デベロッパーツール
【CSSの記述④】
スマーフォン対応「メディアクエリ」を足していきましょう。
デベロッパーツールのシュミレーターなどを使って、実機検証を行っていきましょう。
↓
【CSSの記述⑤】
・SNSやjQueryの埋め込みは最後に行うのがコツ
※サーバーにUPしないと動かないものもありますので、最後に取っておきましょう
コーディングの手順 STEP04
【サーバにテストアップ】
ここでリンク切れや画像の確認・ブラウザやデバイス確認をしましょう。
コーディングの手順 STEP05
【納品】
でも納品してからも運営というサポートがありますので準備をしておきましょう。
まとめ
00.依頼を頂いた
01.ご提案（企画をまとめる）
02.デザインに必要な素材の作成
03.デザインラフの作成
04.コーディング
・コーディングの手順 STEP01 素材の確認
・コーディングの手順 STEP02 マークアップ
・コーディングの手順 STEP03 CSSでデザインをする
・コーディングの手順 STEP04 サーバにテストアップ
・コーディングの手順 STEP05 納品