今回からWebページ制作について学びます。
今日の授業は、初めて聞く単語や考え方が多く、「分からないところが分からない」状態になってしまいました。
明日は登校日で実際に手を動かして作業する日なので、少し不安ですが頑張りたいです。
目次
1．用語について
HTML：Web ページ内の各要素の意味や文書構造を定義
CSS：レイアウトデザインや各要素の装飾（色・サイズなど）を定義
JavaScript / jQuery：動きを付けたり計算などの処理を行う
2．コーディング手順
①素材の用意
②マークアップ
（1）「!doctype html」「html」「head」「body」等骨組みのタグを整える
（2）「h1～h6」「p」「ul,li」「img」「a」等の基本タグで「原稿」と「画像」をマークアップ
（3）header」「nav」「main」「section 」「footer」等のセクションの部分をマークアップ
（4）デザインに合わせて「div」や「span」を追加して「id=””」「class=””」を付けていく
（5）検証ツールを上手く使いましょう。
③CSSをデザインする
（1）リセットCSSの設定
（2）セレクタ（selector）の記述を先にしてしまいましょう。
（3）後はひたすらプロパティを書いていきましょう。
（4）スマートフォン対応「メディアクエリ」を足していきましょう。
（5）SNSやjQueryの埋め込みは最後に行うのがコツ
④サーバーにテストアップ
⑤納品
3．教科書サイト
https://html-css.hamaya2020.com
https://samplesdl.me/training_html-css/
4．用意する開発ソフト
・テキストエディタ
・FTPソフト
・ブラウザ
※複数のファイルを管理するため、作業開始前に整理用のフォルダーを用意する。
（参考）https://html-css.hamaya2020.com/appendix-5.html
5．日本語を使用する場合は文字コードを使用する
・日本語を扱える代表的な文字コード
（おすすめ）UTF-8（UTF-8 BOM 無し）（charset=”UTF-8″）
（参考）https://html-css.hamaya2020.com/appendix-5.html
6．チェックツール一覧
(1) HTML チェック
(2) CSS チェック
7．絶対パスと相対パスの違い
絶対パス：外のファイルを指定する
http や https から始まるパス指定であり、どこから指定しても同じ位置になります。
相対パス：内側にあるファイルを指定する
自己ファイル格納位置からの相対位置で指定します。
5．ハイパーテキストとマークアップ
ハイパーテキスト：紐付けを行う
（例）別のWEBページのリンク、画像動画の埋め込み
マークアップ：文章に意味づけをする
（例）見出し・段落
(参考) L2.1.1 概要
6．主な要素
必ず使う要素
body：画面に表示させるページ内容を定義します。
head：ドキュメントのヘッダーを定義します。
htmlHTML： 文書の開始を宣言してドキュメントルートを定義します。
link：外部ファイルへのリンクを埋め込みを指定します。
meta：ドキュメントに関するメタ情報を指定します。
title：ウェブページのタイトルを指定します。
（参考）L2.2.3 主要な要素
■文章メタデータ
（参考）L2.4
・head 要素（ドキュメントヘッダー）
・title 要素（ドキュメントタイトル）
・base 要素（ページ基準 URL）
・link 要素（外部ファイルリンク）
・meta要素
文字コード
HTMLファイルの説明
（参考）L2.4.5 meta 要素（メタ情報）
・style 要素（スタイルシート）
■セクション
（参考）L2.5 セクション
・body 要素（表示内容）
・article 要素（自己完結記事）
・section 要素（文書構造セクション）
・nav 要素（ナビゲーション）
・ aside 要素（余談や補足）
・ h1 ～ h6 要素（見出し）
・header 要素（セクション先頭部）
・ footer 要素（セクション最終部）
・address 要素（連絡先）
■グルーピングコンテンツ
（参考）L2.6
・p 要素（文書段落）
・hr 要素（区切り）
・ul 要素（順序性のないリスト）
・ ol 要素（順序性のあるリスト）
・li 要素（リスト項目）
・ dl 要素（定義リスト）※ワードプレスにはない