2025.04.26
アジェンダ
- Webサイト制作の手順について
- Webサイト制作時の事前準備について
- HTMLの基本構造について
- 文書情報と文書本文について
- 本日の講義のまとめ
テーマ：Webサイト制作の手順を理解しましょう
＊Webサイト（ページ）の制作について
お客様からWebサイト（ページ）の依頼をされた場合に必要となる作業を工程別に理解しよう
Webサイト構成要素について
・HTML：Webページ内の各要素の意味や文書構造を定義
・CSS：レイアウトデザインや各要素の装飾（色、サイズ）を定義
・JavaScript・jQuery：動きや計算などの処理を行う
ワンポイントアドバイス
Webサイトを作成するには、HTML・CSS・JavaSprict・jQueryなどを使用し、画像や原稿ファイルなど複数のファイルを管理する必要がある。作成するWebサイト用の開発フォルダを作成すると同時に必要に応じてサブフォルダを作成して各ファイルを管理する。
Webサイト制作の手順
お打合せ
１.ご提案（企画をまとめる）
企画書・企画案
サイトマップ
見積もり
＊場合によっては「ワイヤーフレーム」も
製作依頼を受諾「制作スタート」
２.デザインに必要な素材の作成
「必要な素材」
ロゴ
ピクトグラム
アクセスマップ
写真（加工・撮影・収集）
原稿
その他（SNS・jQueryの動きの素材等）
３.デザインラフの作成
実際に作る形を提示
見た目は完成形
必要に応じて、PC・スマホ・タブレットの素材も用意する
＊ソフト：Photoshop、Illustrator・XD
４.コーディング
HTML言語 例）＜title>～タイトルの文言</title>
タグを＜＞で囲う
＊ページのソースで内容をチェックできる
＊タイトル＝検索キーワードに直結
CSS ＝ 見た目を決定している
文字・背景色・大きさ・位置など
＊検証で内容をチェックできる
HTML/CSSを覚えるコツ
検索・コピペなど全然オーケー
整理整頓する
できることとできないことを整理する
コーディングの手順（ポイント）
１.素材の確認
・ロゴ
・ピクトグラム
・写真
・原稿
・その他（SNS・jQueryの動きの素材）
２.マークアップ（HTMLファイルの作成）
①「!doctype html」「html」「head」「body」など
骨組みを整える
②「h1～h6」「P」「ul,li」「img」「a」など
基本タグで「原稿」と「画像」をマークアップ
③「header」「nav」「main」「footer」など
セクションの部分をマークアップ
④デザインに合わせ「div」「span」を追加
「id=””」「class””」をつけていく
⑤検証ツールを上手に使う
３.「CSSでデザインする」
CSSの記述
①リセットCSSの設定
CSSをうまくコントロールするためにリセットCSSを設定する
②セレクタ（selecter）の記述を先にしてしまう
例）#header h1 {}
③ひたすらプロパティを書いていく
④スマートフォン対応（メディアクエリ）を足す
デロッパーツールのシミュレーターなど実機検証を行う
⑤SNS・jQueryの埋め込みは最後に行う
サーバーにアップしないと動かないものもあるので最後に行う
最初は思い通りにCSSと連動するのが難しいので、元に戻せるようマメにバックアップ（上書きではなく新規ファイルにて保存）
４.サーバーにテストアップ
リンク切れ・画像の確認・ブラウザデバイスの確認
５.納品
納品後も運営があるので準備をする
HTML/CSSの命令文
・命令文は半角英数字
・内容（素材分）などはテキスト文書で先に書いておく
・メモ書きサイト
https://samplesdl.me/training_html-css/
・検証ツール
http://www.htmllint.net/html-lint/htmllint.html
・上書きはせずに別名保存
・ブラウザとテキストエディタが必要
TeraPad +Chrome
・[EOF]： End Of File の略
・□ ： 全角スペース（html文書内に絶対に使わない）
・␣ ： 半角スペース
・文字コード：日本語対応のもの UTF-8N
・保存 ：文字改行コード指定保存をする
HTMLの基本構造について
絶対に書かなければならないもの
＜タグ＞
タグ：＜＞で囲う
始まり＜～＞・終わり＜/～＞
文書はじめ：<!doctype html＞ … HTMLで書くよという宣言
ドキュメント宣言とも言う
最初と最後：<html></html> … ここからここまでhtmlです
＊</html>の後には文字は書かない
間 ：<head></head>・<body></body>がひとつずつ入る
見やすくするため、ツリー構造を意識しtabで位置替えする
下げ過ぎたらshift+tabで戻す
<body> は間の文章
<head> は文章の情報 タイトル、要約の記述など
要素として（文字コード指定/charset）
<meta chaeset=”uft-8″> ＊終了コードは不要
＝ は必要属性値
”” はWクォーテーション
<meta description=””> は要約文書
<title>～</title> はページタイトル
保存時 は index.html
HTMLツリー構造
祖先要素
親要素
子要素
孫要素
構造を意識して入力の順番を考える
<body>
・構造化タグ・コンテンツグループ化タグ
メインコンテンツ・header・グローバルナビ・footer・見出しタグ
表・テーブル・フォームなど
HTML：構造化タグ
・article（ページ内で独立したもの）
・section（見出し～1.2.3.4などの数字）
・nav（グローバルナビゲーション）
・asid（補足）
・h1～h6（h1タイトル・h2見出し…）h１は基本1ページ1回
・header
・footer
HTML：コンテンツのグループ化タグ
・P（段落、パラグラフ）
・hr（区切り）（空要素、終了タグ不要）
・ol/li（順序のあるリスト）
・ul/li（順序のないリスト）
・dl/dt/dd（定義、説明リスト）
・main（メインコンテンツ）
・div（ひとつの塊の範囲）
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
↓
・リスト1
・リスト2
・リスト3
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
↓
1.リスト1
2.リスト2
3.リスト3
<dl>
<dt>定義の用語</dt>
<dd>解説</dd>
</dl>
<meta name=”keywords”>
パスの考え方
index.html はテキスト文書（トップページ）
∟images 画像の素材フォルダ
∟company 会社概要など
∟project 製品・サポートフォルダ
絶対パス・相対パス
絶対パスとは、別会社の住所などのイメージ
相対パスとは、同じ社内の違う部署などのイメージ
パスを作る際の方法
同じフォルダ内 <a href =”suppoet.html”>
同じフォルダの
中の別フォルダ <a href=”a/index.html”>
のファイル
上階層ファイル <a href=”../index.html”>
別フォルダの <a href=”../company/index.html”>
ファイルにリンク
<header>
…ロゴ<h1>～</h1>
…Top～インスタ<nav>ナビゲーション
…<ul>～</ul>
<li>～</li>リスト
＼ 最新情報をチェック ／
コメント