1限目
学科 HTML/CSS基礎①
Webサイト制作の手順について
html-css.hamaya2020.com lessonを中心に進める。
今後の予定 今月 HTML/CSS
来月 バナー製作
再来月 ワードプレステーマ作成
自分のHP作り
WEB サイト作成の流れ
0. 依頼
1. 提案 企画書（案） → サイトマップ → 見積り
場合によってはワイヤーフレーム
制作依頼を受諾・制作スタート
2. デザインに必要な素材の作成
・ロゴ
・ピクトグラム
・アクセスマップ
・写真（加工・撮影・収集）
・原稿
・その他（SNSやjQueryの動きの素材等々…）
3. デザインラフの作成
必要に応じてPCのデザインだけでなくスマホ・タブレットの素材も用意
4. コーディング
HTMLは検索エンジンの為
CSSはデザイン（見た目）
・覚えるコツは、整理整頓
「概要」を理解 → 検索しても良い、コピペOK
■ＨＴＭＬ・ＣＳＳのメモ書きサイト
https://samplesdl.me/training_html-css/
2限目
学科 HTML/CSS基礎①
Webサイト制作時の事前準備について
コーディングの手順 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の記述③】
後はひたすらプロパティを書いていきましょう。
コツはデザインの上から作成していきましょう。
※セレクタをマークアップと同じ上から書くことによって間違い探しがラクになります。
※リテイク（変更・修正）に強いコードを意識して、「後から使うかも…」のセレクタまで
記述しておくと良いでしょう。
【CSSの記述④】
スマーフォン対応「メディアクエリ」を足していきましょう。
デベロッパーツールのシュミレーターなどを使って、実機検証を行っていきましょう。
【CSSの記述⑤】
・SNSやjQueryの埋め込みは最後に行うのがコツ
※サーバーにUPしないと動かないものもありますので、最後に取っておきましょう
※最初は思い通りにCSSと連動するのは難しい。元に戻せるようにまめにバックアップ
コーディングの手順 STEP04 【サーバにテストアップ】
コーディングの手順 STEP05 【納品】
https://samplesdl.me/training_html-css/
サンプルでぃえる
全てのサイトで使えるもの
最低限のものを掲載・自分の使いやすいものを作るといい
（＊内容に関してヘッダーを見ると探しやすい メニュー）
htmlの記述【body】 細かい記述はタグチェッカーで調べてみましょう。
Webサイト
Webページ
HTML（ハイパーテキスト・マークアップ・ランゲージ）
文書構造 webページ内の各要素の意味や文書構造を定義
グーグルなど検索エンジンに理解してもらうための機能
CSS（カスケーディング・スタイル・シート）
レイアウトデザイン
JavaScript / jQuery
Web ページに動きを付けたり計算などの処理・ECサイト購入時の計算
A5.2 Windows 環境 開発ツール
A5.2.1 テキストエディタ（TeraPad） 学校で使用
A5.2.2 テキストエディタ（サクラエディタ） 大浜先生お気に入り
A5.2.3 テキストエディタ（Visual Studio Code/VS Code）
A5.2.4 ブラウザ（Chrome）
A5.2.5 ブラウザ（Edge）
A5.2.6 FTP ソフト（FFFTP）
A5.2.7 FTP ソフト（FileZilla）
3限目
学科 HTML/CSS基礎①
HTMLの基本構造について
A5.3 Mac 環境 開発ツール
A5.3.1 テキストエディタ（テキストエディット）使うときはプレーンテキストに設定
A5.3.2 テキストエディタ（mi） インストール
A5.3.3 テキストエディタ（Visual Studio Code/VS Code）
A5.3.5 ブラウザ（Safari）標準
A5.3.4 ブラウザ（Chrome）インストール おすすめ
A5.3.6 FTP ソフト（Cyberduck）
A5.3.7 FTP ソフト（FileZilla） 大浜先生おすすめ
TeraPad
字下げ 半角 tab
tabの文字数
特殊文字表示
ファイルの保存 文字コード UTF-8N
L1.1.5 文字コード
(4) UTF-8（UTF-8 BOM 無し） 推奨
UTF-8N
L1.3 ファイルのパス指定
(1) 絶対パス 住所（日本 都道府県 市町村
(2) 相対パス 建物の中
タグの構成
<要素名> 内容（コンテンツ） </要素名>
<要素名 属性=”属性値”> 内容（コンテンツ） </要素名>
<要素名 属性=”属性値”>
要素名 タグの種別 タグ名
属性 要素名に対して設定する属性名を指定
属性値 属性に対する値を指定
主要な要素
body 画面に表示させるページ内容を定義します。
head ドキュメントのヘッダーを定義します。
htmlHTML 文書の開始を宣言してドキュメントルートを定義します。
link 外部ファイルへのリンクを埋め込みを指定します。
meta ドキュメントに関するメタ情報を指定します。
title ウェブページのタイトルを指定します。
4限目
学科 HTML/CSS基礎①
文章情報と文書本文について
L2.2.1 HTML の構造
L2.3.1 !DOCTYPE 宣言（ドキュメントタイプ宣言）
HTML ドキュメントの一行目に記述してください。
<!DOCTYPE html> と記述
<html lang=”ja”> ここまでこのまま入れる
L2.4.4 link 要素（外部ファイルリンク）
<link href=”css/style.css” rel=”stylesheet”>
<link href=”images/favicon.ico” rel=”icon”> アイコン
favicon－generator 画像を作ったら変換させて使用する
L2.4.5 meta 要素（メタ情報）
文字エンコード方式
ドキュメントの概要
ビューポートの設定
L2.5 セクション
L2.5.1 body 要素（表示内容） 実際に画面に表示される文字列を表記
L2.5.2 article 要素（自己完結記事）
L2.5.3 section 要素（文書構造セクション）
L2.5.4 nav 要素（ナビゲーション）
L2.5.5 aside 要素（余談や補足） サイドバー
L2.5.6 h1 ～ h6 要素（見出し） 見出しを書く
L2.5.7 header 要素（セクション先頭部）
L2.5.8 footer 要素（セクション最終部）
L2.5.9 address 要素（連絡先） サイト運営者の住所やメールアドレス
L2.6 グルーピングコンテンツ
L2.6.1 p 要素（文書段落） パラグラフ（paragraph）
L2.6.2 hr 要素（区切り） 話題を変えるための区切り
L2.6.3 pre 要素（整形済みテキスト）
L2.6.5 ul 要素（順序性のないリスト） 箇条書き 順序をいれかえてもよい
<ul> 順序性のないリストコンテンツ </ul>
L2.6.6 ol 要素（順序性のあるリスト） 順序性のあるリスト
L2.6.7 li 要素（リスト項目） 1つの箇条書きを定義する
L2.6.8 dl 要素（定義リスト） 定義説明リスト
L2.6.9 dt 要素（定義リストの用語）
L2.6.10 dd 要素（定義リストの説明）
L2.6.13 div 要素（ブロックレベル要素の範囲） トランプのジョーカー
文書の構造てきんは意味はない。
あとでCSSを使う時に重要になる。
デザイン
L2.6.14 main 要素（主要文書） コンテンツの種類
ヘッダーやフィッターを除く文章の中の主要コンテンツ
5限目
学科 HTML/CSS基礎①
本日の講義のまとめ