HTML/CSS基礎について

教科書：WEBサイト制作手順の教科書
HTML/CSSとは？→言語である！なので覚えるところから始める

WEBサイト作成の流れ

０：依頼をいただく

１：提案（企画をまとめる）
企画書・サイトマップ・見積もり※場合によりワイヤーフレームの用意をする

２：デザインに必要な素材の作成
・ロゴ・ピクトグラム・アクセスマップ・写真（加工、撮影、収集）
・原稿・その他SNS

３：デザインラフ作成（Illustrator・Photoshop・xdなど）

４：コーディング（右クリックでソースコード、検証が見れる）
・HTML→検索エンジンのため
〜が書いてあるよというマークアップ言語のこと。文法を理解する

・CSS→サイトのデザイン（見た目）
CSSという言語を使ってWEBサイトに絵を描く
使い方や特徴を理解する

【ポイント】
整理整頓をしっかりと行い、概要を理解しよう
検索やコピペして良い！

コーディングの手順

ステップ１
素材の確認（ロゴ・ピクトグラム・写真・原稿

ステップ２
HTMLファイルの作成
①骨組み（head、body等）
②原稿・画像（h１〜h６、img等）
③セクション部分
④デザインの合わせた動き（div,span等）
⑤検証ツールをうまく使う

ステップ３
CSSでデザインする
①リセットCSSの設定
②セレクタ（selector)の記述を先にする⇦大事！
③ひたすらプロパティを書く→コツはデザインの上から。ソフトはデベロッパーツール
④スマートフォン対応「メディアクエリ」をたす
⑤SNSやjQueryの埋め込みは最後に行うのがコツ（サーバーにアップしないと動かないものもあるので）

ステップ４
サーバーにテストアップする

ステップ５
納品　運営というサポートがあるので準備しておく