訓練33日目　学科 HTML/CSS基礎①

本日のアジェンダ

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

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

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

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

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

本日のテーマ

Webサイト制作の手順を理解しましょう。

お客様からWebサイト（ページ）の制作を依頼された場合に必要となる作業を工程別に理解しましょう。

本日のレポート

Webサイト（ページ）作成の流れ

00.依頼をいただく
　　・打ち合わせ

01.ご提案（企画をまとめる）
　　・企画書（企画案）
　　・サイトマップ
　　・見積り
　　※場合のよっては「ワイヤーフレーム」の用意が必要な場合もあります。

02.デザインに必要な素材の作成
　　・ロゴ
　　・ピクトグラム
　　・アクセスマップ
　　・写真（加工・撮影・収集）
　　・原稿
　　・その他（SNSやjQueryの動きの素材等々…）

03.デザインラフの作成
　　※必要に応じて「PCのデザイン」だけでなく「スマホ・タブレット」の素材も用意

04.コーディング
　　・HTMLは検索エンジンの為
　　　検索エンジンに対して「このサイトは何を記述してある」という事をマークアップする為の言語です。
　　・CSSはデザイン（見た目）
　　　CSSは、見た目を作る為の言語です。

コーディングの手順

STEP-01 素材（ロゴ・ピクトグラム・写真・原稿など）の確認

STEP-02 マークアップを行う

  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. 検証ツールを使う

STEP-03 CSSでデザインをする

  1. リセットCSSの設定
  2. セレクタ（selector）の記述を先にしてしまいましょう。
  3. 後はひたすらプロパティを書いていきましょう。
  4. スマーフォン対応「メディアクエリ」を足していきましょう。
  5. SNSやjQueryの埋め込みは最後に行うのがコツ

STEP-04　サーバにテストアップ（リンク切れや画像の確認・ブラウザやデバイス確認）

STEP-05　納品（納品してからも運営というサポートがありますので準備をしておきましょう）

その他

Webページ開発ツールについて

Webページ開発には、テキストエディタとブラウザが必要です。
Windows標準にインストールされているメモ帳とEdgeでもWebページ開発が可能ですが、本訓練では、TeraPadとChromeを使用してWebページ開発を行います。

文字コードについて

日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがあります。
Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用してください。

HTMLの基本構造について

タグの構造

<要素名>内容（コンテンツ）
<要素名 属性=”属性値”>内容（コンテンツ）
<要素名 属性=”属性値”>

  • 要素名
    タグの種別を指定します。タグ名とも言われます。要素の種類によって終了タグ（）の有無が決定します。

  • 属性
    要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。

  • 属性値
    属性に対する値を指定します。一般的には、ダブルクォーテーション（”）で囲んで指定しますが シングルクォーテーション（’）で囲むことも可能です。属性値がない時は、イコール（=）以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します。

HTMLの基本構造

<!DOCTYPE html>
<html lang=”ja”>
<head>
　　（文書の情報を記述）
</head>
<body>
　　（文書の本体を記述）
</body>
</html>

  • !DOCTYPE 宣言（ドキュメントタイプ宣言）
    ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。
    HTML5 であればと記述します。

  • html 要素（HTML の文書）
    html 要素は、この文書が HTML の文書であることを表します。
    「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。

  • head 要素（文書情報）
    head 要素は、この文書のメタデータを記述します。
    例えば、<title>～</title>でその文書のタイトルを記述することができます。
    • title 要素（ページタイトル）
    • meta 要素（文字コード指定／charset）
    • meta 要素（ページの説明文／description）
    • meta 要素（ビューポート／viewport）
    • link要素（外部 ファイルとの紐付け）

  • head 要素（文書本文）
    body 要素は、この文書の本文を記述します。
    この body 要素で囲まれた領域が Web ページとして表示されます。
    • 構造化タグ
    • コンテンツのグループ化タグ
    • テキストの意味
    • コンテンツの埋め込み
    • テーブル
    • フォーム

ブロックレベル要素とインライン要素について

要素の多くは、ブロックレベル要素とインライン要素に分類されます。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

HTML：構造化タグ

  • article 要素（アーティクル）
  • section 要素（セクション）※章や節
  • nav 要素（ナビ）※ヘッダーのグローバルナビゲーションなど
  • aside 要素（アサイド）※補足情報：カレンダーや検索窓やリンクなど
  • h1～h6 要素（見出し）※必ず順番通りに使う
  • header 要素（ヘッダー）
  • footer 要素（フッター）

HTML：コンテンツのグループ化タグ

  • p 要素（段落（パラグラフ））
  • hr 要素（区切り）※話が変わるよ、の線の挿入。終了タグなし・空要素
  • ol/li 要素（順序のあるリスト）
  • ul/li 要素（順序のないリスト）
  • dl/dt/dd 要素（定義・説明リスト）
  • main 要素（メインコンテンツ）※ヘッダーとフッター以外の文
  • div 要素（ひとつのかたまりの範囲）
注意事項

HTMLでは、タグを別のタグで囲む「入れ子構造」によって、親子関係を明確にします。
囲っているタグが親要素、囲まれているタグが子要素です。子要素は親要素の影響を受けるため、正しく構造を理解して記述する必要があります。
タグを入れ子にする際は、開始タグと終了タグが交差しないように注意し、適切な組み合わせで使用します。

感想

今日が初めてのHTML/CSSの授業だった。
全くの未経験で初めて聞く言葉や意味がたくさん出てきたため少し不安になったが、
コーディングはWEBデザインを学ぶことを決める上で興味があったことなので自主学習をしつつ、
基礎的なことは早い段階でかためていきたい。


タイトルとURLをコピーしました