【DAY33】Webサイト制作のコーディング

本日のテーマ

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

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

00.依頼を頂いた
01.ご提案（企画をまとめる）
02.デザインに必要な素材の作成
03.デザインラフの作成
04.コーディング
・コーディングの手順 STEP01 素材の確認
・コーディングの手順 STEP02 マークアップ
・コーディングの手順 STEP03 CSSでデザインをする
・コーディングの手順 STEP04 サーバにテストアップ
・コーディングの手順 STEP05 納品

依頼を頂いた: 打ち合わせ

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

制作依頼を受諾「制作スタート」

デザインに必要な素材の作成

・ロゴ
・ピクトグラム
・アクセスマップ
・写真（加工・撮影・収集）
・原稿
・その他（SNSやjQueryの動きの素材等々…）

デザインラフの作成

コーディング

コーディング

HTMLは検索エンジンの為

HTMLは、googleやYahoo！の検索エンジンに対して、「このサイトは何を記述してある」という事をマークアップする為の言語です。
その為にまずは、文法をしっかりと理解しましょう。

CSSはデザイン（見た目）

CSSは、見た目を作る為の言語です。紙に筆で絵を描くように、CSSというプログラム言語を利用して、Webサイトを描きます。
使い方や特徴をしっかりと理解していきましょう。

Warning

覚えるコツは、整理整頓

デザインの話とは違い「覚える事」が多くなります。
そんな時のポイントは、まず「概要」を理解しておきましょう。
検索しても良いですし、コピペ（コピー＆ペースト）しても、出来ればよい。
メモ書きのサイトを自分で用意するのも良い方法ですので、下記サイトのような、
Ｗｅｂサイトを用意して、いつでも使えるようにするという事も大事です。

ＨＴＭＬ・ＣＳＳのメモ書きサイト

■ＨＴＭＬ・ＣＳＳのメモ書きサイト
https://samplesdl.me/training_html-css/
・2022年9月某日現在の作品です。
・現時点で確認済みの、ほぼ全てのブラウザで使えるタグのみを掲載
・よく使うスタンダードなタグのみを掲載
・ページからコピペ（コピー＆ペースト）出来るように作成してあります。

■タグチェッカー

https://www.htmllint.net/html-lint/htmllint.html

コーディングの手順

①素材の確認

②マークアップ・HTMLの作成

③CSS

リセットCSSの設定
スマーフォン対応「メディアクエリ」を足し
SNSやjQueryの埋め込み

Danger

※最初は思い通りにCSSと連動するのは難しいので、元に戻せるようにまめにバックアップを取っておく

実務ではヒアリングが一番時間がかかるので、最初はしっかり話を聞いて詰めていく。

文字コードについて

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

HTMLの基本構造

タグの構造

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

HTMLの基本構造

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

自分で作ったものは、なぜそのように作ったのか説明できるようになっておくことが大事。

今学んでいることは、いずれAIにとって代われるので、人間しかできないことを意識しておく。

授業の感想

いよいよコーディングが始まってきたと思った。

わかるところもあったが、実際触ってみないとわからなさそうな点もあった。これから1か月楽しみ。