-本日のアジェンダ-
1限目
学科 HTML/CSS基礎①
Webサイト制作の手順について
2限目
学科 HTML/CSS基礎①
Webサイト制作時の事前準備について
3限目
学科 HTML/CSS基礎①
HTMLの基本構造について
4限目
学科 HTML/CSS基礎①
文章情報と文書本文について
5限目
学科 HTML/CSS基礎①
本日の講義のまとめ
本日のテーマ
Webサイト制作の手順を理解しましょう
Webサイト作成の流れ
00.依頼を頂く
01.ご提案（企画まとめ）
- 企画書
- サイトマップ（WEBサイトの地図みたいなもの）
- 見積り
- 場合によってはワイヤーフレーム（WEBサイトの設計図のようなもの）
02.デザインに必要な素材の作成
- ロゴ
- ピクトグラム
- アクセスマップ
- 写真
- 原稿
- その他（SNSやjQueryの動きの素材など）
03.デザインラフの作成
必要に応じてPCのデザイン（横長）だけでなく、スマホ・タブレットのデザイン（縦長）も用意
Photoshop、Illustrator、XDソフトで作成
04.コーディング
WebページはHTML、CSSのタグ（コード）で作られている。
- HTML：文章を書くもの。検索エンジンに対してマークアップする為の言語
- CSS：デザインを整えるもの。見た目を作る為の言語
※単体で動かせない
コーディング
コーディングを覚えるコツ
整理整頓がコツ。概要を理解しておく。
実務でWebページが作成できれば良いので、他サイトのコードを参考に検索し、コピペしてもよい。
メモ書きサイトを自分で用意すると良い。
▼訓練校が用意したメモ書きサイト
https://samplesdl.me/training_html-css/
▼サイトのコードを確認する方法
・Webサイト上で右クリック ＞ ページのソースを表示
・Webサイト上で右クリック ＞ 検証
コーディング手順
- 素材の確認
・ロゴ
・ピクトグラム
・写真
・原稿
・その他（SNSやjQueryの動きの素材など） - マークアップ
①骨組みのタグを整える
「!doctypehtml」「html」「head」「body」等
②の基本タグで「原稿」と「画像」をマークアップ
「h1～h6」「p」「ul,li」「img」「a」等
③セクションの部分をマークアップ
「header」「nav」「main」「section 」「footer」等
④デザインに合わせて調整
「div」や「span」を追加して「id=””」「class=””」を付けていく
⑤タグチェッカーを使って文法が正しいかチェックする
▼参考サイト
http://www.htmllint.net/html-lint/htmllint.html - CSSでデザインをする
①リセットCSSの設定
②セレクタを記述
先にセレクタをしっかり記述しておくと楽。
③後はひたすらプロパティを書いていく
Dreamweaver、デベロッパーツールを使用する。
④スマートフォン対応（メディアクエリを足す）
⑤SNSやjQueryの埋め込み
空白にして最後に回すのがコツ。
※元に戻せるようにバックアップを取っておく - サーバにテストアップ
- 納品
Webサイトの構成要素
- HTML：Webページ内の各要素の意味や文書構造を定義する。
- CSS：レイアウトデザインや各要素の装飾（色・サイズなど）を定義する。
- JavaScript / jQuery：動きを付けたり計算などの処理を行う。
Webサイトの開発フォルダ
開発用フォルダには多くのファイルが格納されるのでファイルの整理整頓が重要。
サブフォルダの作成も含めてわかりやすく管理する。
Webサイトの表示に不要なファイルは、格納しない。
Webページ作成ツール
TeraPad（エディタ）とChrome（ブラウザ）を使用してWebページ開発を行う。
文字コード
Webページを作成する時の文字コードは、UTF-8N(UTF-8 BOMなし）を使用。
ファイルのパス指定
ファイルを指定するためには、絶対パスと相対パスの指定方法がある。
HTMLの基本構造
タグの構造
<要素名>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>
（例）
<p class=”hello”>こんにちは</p>
- 要素名：タグの種類を示す名前（例：
p＝段落） - 属性：要素に追加情報を与えるもの（例：
classやidなど） - 属性値：属性に設定する具体的な内容（例：
class="hello"の"hello"の部分）
HTMLの基本構造
<!DOCTYPE html>
<html lang=”ja”>
<head>
（文書の情報を記述）
</head>
<body>
（文書の本体を記述）
</body>
</html>
コピペして使う
特殊文字について
そのまま本文に記述するとHTMLのタグとして認識されるため、特別な記述が必要。
- 「”」→「"」
- 「&」→「&」
- 「<」→「<」
- 「>」→「>」
- 「（スペース）」→「 」
- 「©」→「©」
- 「®」→「®」
インデント（字下げ）
インデントを揃える。入れ子構造になる。
字下げをしてHTMLを見やすくする（整理整頓になる）
HTML：コンテンツのグループ化タグ
- p 要素（段落（パラグラフ））
- ol/li 要素（順序のあるリスト）
- ul/li 要素（順序のないリスト）
- dl/dt/dd 要素（定義・説明リスト）
- main 要素（メインコンテンツ）
- div 要素（ひとつのかたまりの範囲）