9月2日（土）学科 HTML基礎①【オンライン】

大浜 信彦　先生

アジェンダ

1限目
学科 HTML基礎①
Webサイト制作の手順について

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

3限目
学科 HTML基礎①
Webサイト制作時の知識について

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

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

ポイント

• HTML/CSS言語を習得する（UIは9月後半から10月）
• 0１.企画まとめ
• 02.必要な素材作成
• 03.デザインラフ
  • レイアウトサンプル　https://samplesdl.me/training_html-css/
  • 事前準備：・ロゴ・ピクトグラム・写真・原稿
  • ★HTML　「!doctype html」「html」「head」「body」等
    • 「h1～h6」「p」「ul,li」「img」「a」等
    • 「header」「nav」「main」「section 」「footer」等
    • 「div」や「span」を追加して「id=””」「class=””」
  • ★CSS　リセットCSS
    • セレクタ（selector）で再利用しやすく
    • メディアクエリ
    • SNSやjQueryの埋め込みは最後
  • ※まめにバックアップ
• 04.テストアップ（関係者の確認用にWebコンテンツをテスト環境に公開する）
• 05.納品・運営
• HTML-CSS 入門講座　★★★自己予復習！★★★
• ナビゲーション＝メニュー　・グローバルナビゲーション＝全ページ共通メニュー
• タグ　<要素名 属性=”属性値”>
• 浜谷先生＠HTML-CSS 入門講座 – 情報デザイン工房 濱屋HTML-CSS 入門講座
  • L1.1 はじめに
  • L1.2 レイアウトデザイン
  • L1.3 ファイルのパス指定
  • L2.1 はじめに
    • L2.1.1 概要
  • L2.2 HTML の基本構造
    • L2.2.1 HTML の構造
    • L2.2.2 HTML 例

• HTMLでのテーブルレイアウトは時代遅れ
  • https://t-shukujo.com/not-table-yes-css/　
    • 理由：装飾のためにtableタグを使うとHTMLが冗長化（コード散在）、マルチデバイスに対応できない。tableタグを用いると文書構造が正しくならないことも多い。文書の構造はHTML、装飾はCSSで分業する！　但し「表」としてtableタグは使う。
  • ・https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13253247643
    • CSS も新しく CSS3 の仕様がつぎつぎと解禁され、 display:flex や display:grid のような ブロックを自由自在に並べられるスタイル指定が使えるようになると、 <table> でレイアウトするメリットが無くなった。