1限目
学科 HTML/CSS基礎①
Webサイト制作の手順について
2限目
学科 HTML/CSS基礎①
Webサイト制作時の事前準備について
3限目
学科 HTML/CSS基礎①
HTMLの基本構造について
4限目
学科 HTML/CSS基礎①
文章情報と文書本文について
5限目
学科 HTML/CSS基礎①
本日の講義のまとめ
本日のテーマ
Webサイト制作の手順を理解しましょう
Webサイト制作の手順の教科書
お客様からWebサイト（ページ）の制作を依頼された場合に必要となる作業を工程別に理解しましょう。
01.ご提案（企画をまとめる）
・企画書（企画案）
・サイトマップ
・見積り
※場合のよっては「ワイヤーフレーム」の用意が必要な場合もあります。
制作依頼を受諾「制作スタート」
02.デザインに必要な素材の作成
「必要な素材」
・ロゴ
・ピクトグラム
・アクセスマップ
・写真（加工・撮影・収集）
・原稿
・その他（SNSやjQueryの動きの素材等々…）
03.デザインラフの作成
04.コーディング
- HTMLは検索エンジンの為
HTMLは、googleやYahoo！の検索エンジンに対して、「このサイトは
何を記述してある」という事をマークアップする為の言語です。
その為にまずは、文法をしっかりと理解しましょう。
- CSSはデザイン（見た目）
CSSは、見た目を作る為の言語です。紙に筆で絵を描くように、CSSと
いうプログラム言語を利用して、Webサイトを描きます。
使い方や特徴をしっかりと理解していきましょう。
ワンポイントアドバイス
- 覚えるコツは、整理整頓
デザインの話とは違い「覚える事」が多くなります。
そんな時のポイントは、まず「概要」を理解しておきましょう。
学生時代の学校のテストをする訳ではありません。実務でWeｂページを作ったり、
編集したり出来るようになればお仕事として成立する訳です。
ですので、検索しても良いですし、コピペ（コピー＆ペースト）しても、出来ればよいのです。
メモ書きのサイトを自分で用意するのも良い方法ですので、下記サイトのような、
Ｗｅｂサイトを用意して、いつでも使えるようにするという事も大事です。
■ＨＴＭＬ・ＣＳＳのメモ書きサイト
https://samplesdl.me/training_html-css/
・2022年9月某日現在の作品です。
・現時点で確認済みの、ほぼ全てのブラウザで使えるタグのみを掲載
・よく使うスタンダードなタグのみを掲載
・ページからコピペ（コピー＆ペースト）出来るように作成してあります。
コーディングの手順 STEP01
・ロゴ
・ピクトグラム
・写真
・原稿
・その他（SNSやjQueryの動きの素材等々…）
【マークアップ】
【マークアップ・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
※最初は思い通りにCSSと連動するのは難しいかもしれませんので、元に戻せるようにまめにバックアップを取っておきましょう。
コーディングの手順 STEP03
【CSSでデザインをする】
【CSSの記述①】
リセットCSSの設定
※CSSを上手くコントロールするためにリセットCSSを設定しましょう。またリセットCSSは育てていきましょう。
【CSSの記述②】
セレクタ（selector）の記述を先にしてしまいましょう。
例：#header header h1{} 点数計算とセレクタの記述ルールに気を付けましょう。
【CSSの記述③】
後はひたすらプロパティを書いていきましょう。
コツはデザインの上から作成していきましょう。
※セレクタをマークアップと同じ上から書くことによって間違い探しがラクになります。
※リテイク（変更・修正）に強いコードを意識して、「後から使うかも…」のセレクタまで記述しておくと良いでしょう。
【CSSの記述④】
スマーフォン対応「メディアクエリ」を足していきましょう。
デベロッパーツールのシュミレーターなどを使って、実機検証を行っていきましょう。
【CSSの記述⑤】
・SNSやjQueryの埋め込みは最後に行うのがコツ
※サーバーにUPしないと動かないものもありますので、最後に取っておきましょう
コーディングの手順 STEP04
- 【サーバにテストアップ】
ここでリンク切れや画像の確認・ブラウザやデバイス確認をしましょう。
コーディングの手順 STEP05
- 【納品】
でも納品してからも運営というサポートがありますので準備をしておきましょう。
まとめ
00.依頼を頂いた
01.ご提案（企画をまとめる）
02.デザインに必要な素材の作成
03.デザインラフの作成
04.コーディング
・コーディングの手順 STEP01 素材の確認
・コーディングの手順 STEP02 マークアップ
・コーディングの手順 STEP03 CSSでデザインをする
・コーディングの手順 STEP04 サーバにテストアップ
・コーディングの手順 STEP05 納品
Webサイト（ページ）の構成要素について
- HTML：Web ページ内の各要素の意味や文書構造を定義します。
- CSS：レイアウトデザインや各要素の装飾（色・サイズなど）を定義します。
- JavaScript / jQuery：動きを付けたり計算などの処理を行います。
ワンポイントアドバイス
Webサイトを作成するには、HTML、CSS、JavaScript / jQuery、画像ファイルなど、複数のファイルを管理する必要があります。作成するWebサイト用の開発フォルダを作成すると同時に必要に応じてサブフォルダを作成して各ファイルを管理しましょう。
Webページ開発ツールについて
Webページ開発には、テキストエディタとブラウザが必要です。Windows標準にインストールされているメモ帳とEdgeでもWebページ開発が可能ですが、本訓練では、TeraPadとChromeを使用してWebページ開発を行います。TeraPadとChromeは、Windows標準ではインストールされていませんのでインストールを行ってください。
文字コードについて
日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがあります。Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用してください。
ファイルのパス指定について
ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法があります。それぞれの特徴を理解して使い分けましょう。
HTMLの基本構造について
- タグの構造
<要素名>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>
- 要素名
タグの種別を指定します。タグ名とも言われます。要素の種類によって終了タグ（</要素名>）の有無が決定します。 - 属性
要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。 - 属性値
属性に対する値を指定します。一般的には、ダブルクォーテーション（”）で囲んで指定しますが シングルクォーテーション（’）で囲むことも可能です。属性値がない時は、イコール（=）以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します。
HTMLの基本構造
<!DOCTYPE html>
<html lang=”ja”>
<head>
（文書の情報を記述）
</head>
<body>
（文書の本体を記述）
</body>
</html>
- !DOCTYPE 宣言（ドキュメントタイプ宣言）
ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば<!DOCTYPE html>と記述します。 - html 要素（HTML の文書）
html 要素は、この文書が HTML の文書であることを表します。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。 - head 要素（文書情報）
head 要素は、この文書のメタデータを記述します。例えば、<title>～</title>でその文書のタイトルを記述することができます。 - body 要素（文書本文）
body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。
doctype宣言とは？
HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良いでしょう。
DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となります。 互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合があります。 ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要があります。 主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モードとなります。
ワンポイントアドバイス
楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合があります。その場合やむを得ず、違う方法を使わなければならない場合がありますので、お仕事で担当した時は、 DOCTYPE宣言は必ず確認しておきましょう。
head 要素（文書情報）
- title 要素（ページタイトル）
- meta 要素（文字コード指定／charset）
- meta 要素（ページの説明文／description）
- meta 要素（ビューポート／viewport）
- link要素（外部 ファイルとの紐付け）
body 要素（文書本文）
- 構造化タグ
- コンテンツのグループ化タグ
- テキストの意味
- コンテンツの埋め込み
- テーブル
- フォーム
ブロックレベル要素とインライン要素について
要素の多くは、ブロックレベル要素とインライン要素に分類されます。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。
HTML：構造化タグ
- article 要素（アーティクル）
- section 要素（セクション）
- nav 要素（ナビ）
- aside 要素（アサイド）
- h1～h6 要素（見出し）
- header 要素（ヘッダー）
- footer 要素（フッター）
ワンポイントアドバイス
見出し（h1～h6）要素でh1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は、sectionタグやarticleタグと組み合わせることで1ページに複数のh1タグを記述することができます。
HTML：コンテンツのグループ化タグ
- p 要素（段落（パラグラフ））
- hr 要素（区切り）
- ol/li 要素（順序のあるリスト）
- ul/li 要素（順序のないリスト）
- dl/dt/dd 要素（定義・説明リスト）
- main 要素（メインコンテンツ）
- div 要素（ひとつのかたまりの範囲）
本日の課題
本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。
感想
今日はHTMLとCSSについて学びました。検証ツールで自分のWordpressを見てみたりしました。全部自分一人でサイト制作が出来るようになりたいので勉強頑張ります👩🎓✨
コメント