-本日のアジェンダ-
1限目
学科 HTML/CSS基礎①
Webサイト制作の手順について

2限目
学科 HTML/CSS基礎①
Webサイト制作時の事前準備について

3限目
学科 HTML/CSS基礎①
HTMLの基本構造について

4限目
学科 HTML/CSS基礎①
文章情報と文書本文について

5限目
学科 HTML/CSS基礎①
本日の講義のまとめ

○WEBサイト制作の流れ

1.依頼を頂く

↓

2.提案する（企画をまとめる）

企画書/サイトマップ/ワイヤーフレーム/見積

↓

3.デザインに必要な素材の作成

ロゴ
・ピクトグラム
・アクセスマップ
・写真（加工・撮影・収集）
・原稿
・その他（SNSやjQueryの動きの素材等々…）

↓

4.デザインラフの作成

↓

5.コーディング

↓

6.素材の確認

↓

7.マークアップ

↓

8.CSSでデザインする

↓

9.サーバーにテストアップ

↓

10.納品

1.依頼を頂く

【本日の授業実践内容】
1.CSSを色々触ってみよう（10分自習）
2.早見表を作ると便利＆勉強になる
3.テラパッドで操作してみよう
手順４）保存したＨＴＭＬファイルを開く

【本日の授業実践内容】

1.CSSを色々触ってみよう（10分自習）

style〉background（バックグラウンド）に【#fcc】とありますが、

【#bdd】に変更すると…〈ボックス01-ボックス02〉の色が変わりました！

上記の様にCSSはサイト上の【見た目】を作っている【言語】になります。

その他：

width（ブロックの横幅）

margin-bottom（下側の余白を指定）

height（ブロックの高さ）

2.早見表を作ると便利＆勉強になる

○HTML

ログイン ‹ 〈藤澤つかさ〉のPRサイト　※移行します10月 — WordPress

○CSS

ログイン ‹ 〈藤澤つかさ〉のPRサイト　※移行します10月 — WordPress

意味と内容の把握でOK。

3.テラパッドで操作してみよう

絶対パス：https://もしくはhttp://の後にウェブ上のドメイン、フォルダ名、ファイル名を順に記載したファイルの表記方法

相対パス：現在のファイルから目的となるファイルまでの行き道

　例：../ は「1つ上へ」、./ は「今の場所」

○違いのまとめ

種類	説明	例
相対パス	今いる場所（＝現在のファイルの位置）からの道	`css/style.css` `../images/logo.png`
絶対パス	サイト全体やコンピュータ全体の「最初」からの道	`/images/logo.png` `https://example.com/images/logo.png`