HTML/CSS基礎①

1限：Webサイト制作の手順について

2限：Webサイト制作時の事前準備について

3限：HTMLの基本構造について

4限：文章情報と文書本文について

5限：本日のまとめ

---

Webサイト（ページ）制作の流れ

依頼を受けてからの流れ

1、ご提案（企画案）

• 企画書（企画案）
• サイトマップ
• 見積り
• 場合により、ワイヤーフレームなどを準備

2、デザインに必要な素材の作成

• ロゴ
• ピクトグラム
• 写真（加工、撮影、収集）
• 原稿
• その他（SNS、動きの素材など）

3、デザインラフの作成

必要に応じ、スマホ版、タブレット版の素材も準備する。

4、コーディング

HTML

検索エンジンのため、このサイトは何が記述してあるかをマークアップするための言語。

CSS

見た目を整えるための言語HTMLとの使い分けや特徴をしっかりと理解する。

→覚えるコツは整理整頓

すべてを覚えようとせず概要をきちんと理解し、検索してコピーペーストでも作ることはできる。（自分ですべて入力する必要はない）

コーディングの流れ

1、素材の確認

使用する素材の準備がされているか。

2、マークアップ、HTMLファイルの作成

「!DOCTYPE html」、「html」、「head」、「body」等骨組みのタグを整える。

↓

「h1～h6」、「ul・li」、「img」、「a」で原稿と画像のマークアップ

↓

「header」、「nav」、「main」、「section」、「footer」等のセクション部分をマークアップ

↓

デザインに合わせて「div」、「spa」を追加。「id=” “」、「class=” “」をつけていく。

↓

検証ツールで確認

※最初は思い通りにCSSと連携するのは難しいため、もとに戻せるようこまめにバックアップを取るようにする。

3、CSSでデザイン

リセットCSSの設定

↓

セレクタ（selector）の記述を先にしていく。

ex.#header header h1{ }　点数計算とセレクタの記述ルールに気を付ける。

↓

ひたすらプロパティを書く。（リテイクに強いコードを意識）

コツはデザインの上から作成すること。

※セレクタをマークアップと小野路上から書くことで間違い探しが楽になる。

↓

スマートフォン対応「メディクエリ」を足していく。

デベロッパーツールのシミュレーター等を使い、実機検証を行っていく。

↓

SNSやjQueryの埋め込みは最後に行う。サーバーにアップしないと動作しないものもある。

↓

サーバーにテストアップし、リンク切れや画像の確認、ブラウザデバイスを確認。