2023/12/02 学科 HTML基礎①【オンライン】

1限目：Webサイト制作の手順について
2限目：Webサイト制作時の事前準備について
3限目：Webサイト制作時の知識について
4限目：HTMLの基本構造について
5限目：本日の講義のまとめ

今日教わったこと
今日の参考サイト

今日教わったこと

HTMLとCSSはつながった知識なので何かわからなければ積極的に質問して今日の疑問は今日のうちに解消する！

▼Web制作の流れ

00.依頼を頂く
　・この時点では成約してない。打合せとヒアリング
　・ざっくり「経営理念」とか「会社案内」とか必要ですと言われたら
　　それに対してこのページは分けたほうがいいじゃないですか、まとめた方が等、提案をしていく
　・サイトマップを作ってページ数と大体のボリュームを把握する。Excel で作ってもいい。
↓
01.提案（企画をまとめる）
　・01.に関しては営業がやることが多いが、フリーランスならここも自分でやる
　・01.も出来ないと企業でやっていくには…作るだけなら外注しようという流れもあるし、
　　フリーランスも厳しい
　・ワイヤーフレーム：ざっくりとここに何を配置するか白黒で作るもの。これでOK貰って受注となる。
↓
02.デザインに必要な素材の作成
（今まで習ってきた部分。ただ、今まで作品として扱ってきたけど今後はパーツになる）
↓
03.デザインラフの作成
　・完成予想図
　・実際にこういう形でWebに上がりますよというところまで作る。
　　コーディングが上手くいかないからこれやめようとか出来ない。
　・必要に応じてPCのデザインだけでなくスマホ・タブレットの素材も用意
　・写真加工するならフォトショ、アイコン作るならイラレ、ワイヤーフレーム作るならXD
↓
04.コーディング
　・HTMLは検索エンジンのため。このサイトは何を記述してあるか構造を示す言語
　・タグは検索に直結する
　・右クリック→ページのソースを表示で見れる
　・元々の成り立ちとしては文章と文章を紐づけるための技術として開発された（ハイパーリンク）
　・CSSはデザイン。見た目を作るための言語
　・右クリック→検証で見れる
　・覚えるコツは整理整頓。
　　テストじゃないから言葉というより概要を覚えればいい。
　　そうすればタグを検索したりコピペしたりでWebページが作れる。
　　頭文字2文字くらい覚えておいて検索していけばできる。
　　最初は深く考えずにインプットするくらいでいい。

・HTMLとCSSが分かってないとその先のJacaScriptなどの理解ができない

▼コーディングの手順

01.素材の確認
（自分のポートフォリオサイト用に今のうちに準備しておく）
↓
02.マークアップ
　①「!doctypehtml」「html」「head」「body」等骨組みのタグを整える
　②「h1～h6」「p」「ul,li」「img」「a」等の基本タグで「原稿」と「画像」をマークアップ
　③「header」「nav」「main」「section 」「footer」等のセクションの部分をマークアップ
　④デザインに合わせて「div」や「span」を追加して「id=””」「class=””」を付けていく
　⑤検証ツールを上手く使う（1文字ずつ見るよりシステムに聞こう）
※最初は特にこまめにバックアップを取って元に戻せるようにする。
ボス戦の前にセーブをしない人間はいない。
↓
03.CSSでデザインする
　①リセットCSSの設定
　　・ユーザーエージェント：各ブラウザごとに勝手に決めてくれる隙間や書式
　　　　　　　　　　　　　そういうのいらんよとするのがリセットCSS
　　・最初は「リセットCSS　おすすめ」とかで検索して出てきたのを使っていく
　②セレクタ（selector）の記述を先にする
　③ひたすらプロパティを書く。
　④スマーフォン対応「メディアクエリ」を足す
　⑤SNSやjQueryの埋め込み（サーバーにUPしないと動かないものもあるので最後）
※とにかく最初はバックアップを取って元に戻せるようにする。
↓
04.サーバにテストアップ（本番環境じゃない）
　リンク切れや画像・ブラウザやデバイスの確認をする。
　ここまでの作業は全て自分のPC。自分のPCだとアルファベットAの大文字小文字もどちらもAと認識するが、サーバー上だと大文字小文字が区別されるので、自分の環境でちゃんと表示されてても大文字小文字間違えてたらサーバー上で表示されないなんてことも。
　本来のお仕事であれば色んなブラウザ・デバイスで見て崩れてないことを確認する。
↓
05.納品
　納品後も運営というサポートがあるので注意。

・実際のお仕事では、フォルダ分けをしっかりする。自分だけが更新するとは限らないので。
　画像だけのフォルダ、企業情報、製品ページでフォルダを作るなど…

・命名ルール（↓以外が使えたとしても事故防止のために以下で覚える）
　・ファイル名には拡張子を必ずつける
　・ファイル名、フォルダ名に使うのは半角数字のみ
　・アルファベットは小文字に統一
　・使う記号は-(ハイフン)と_(アンダースコア)だけ

・Webページ開発ツール：TeraPadとChrome
　使っている人が多いので何かあっても検索したら解決することが多い
・Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）
Nが無い方だと目には見えない何文字分かのいらないデータがついてきてしまう

・ファイルのパス指定について、別々のパーツを紐づけるためにルールがある。
　・相対パス（自分のファイルの場所を基準として記述する）
　　・同じフォルダ内のファイルならファイル名のみ
　　・同じフォルダ内の小フォルダなら「フォルダ名/ファイル名」
　　・自分のフォルダの外のファイルなら「../ファイル名」
　　・同じ階層の別のフォルダ内のファイルなら「../フォルダ名/ファイル名」
　・絶対パス（外部サイト用）（自分が元々知ってた方）
　　<a href=”リンク先のURL”>表示の文字</a>

▼タグについて

・タグの一番簡単な構造は<要素名＆開始タグ>要素の内容
必ず全て半角英数で書く（大文字でもいいけど昔の規格は小文字と決まっていたし将来どうなるかもわからないので小文字で書いておいた方がいい）
・例外として以下は空要素なので終了タグがいらない
　　<br>：改行
　　<img>：画像埋め込み
　　<source>：メディアまたは画像のソース
　　<embed>：埋め込み外部コンテンツ
　　<hr>：主題区切り(水平線)
　　<input>：入力欄(フォーム入力)
　　<link>：CSSやアイコンなどの外部リソースを読み込ませる(head内で使用)
　　<meta>：検索キーワードなどサイトの情報を検索エンジンに知らせるメタ情報を指定する。
　　　　　　　(head内で使用)
・もし今後「<br />」といった記述を見つけた場合、これは昔のXHTMLで書かれたものなので削除するとエラーになってしまう。なので見かけたらそのままにする
　

▼HTMLの基本タグ

・<!doctype html>
HTMLタグよりも前、ファイルの先頭に記述する。
DOCTYPE宣言(文書型宣言)といってバージョンに基づいた文書なのかをブラウザに伝えるためのもの。

・<html lang=”ja”>∼</html>
2番目に書かれるもので、これはHTMLの文書ですよ、ということを表している。
文書全体の最初(DOCTYPE宣言の直後)と最後に置かれて、この中にとが1つずつ必要となる。
「lang=”ja”」はこのhtml要素内で使われている言語は日本語です、ということ。

・<head>∼</head>
タグのあと、タグの前に書くもの。
タグ、タグ、<link>タグなど、HTMLファイルのさまざまな情報が指定されるが、<head>タグの中の内容は、ブラウザの画面上には表示されない。
(<title>タグの内容だけはブラウザ上部のタイトルバーに表示される)

・<body>∼</body>
<head>タグの後に書かれる。また、<body>要素は文書中に1つしか配置できない。
この中身が実際にブラウザに表示される内容になる。

▼<head>タグ内で使うタグたち
・<link>タグ(空要素)はリンクするHTMLファイルやCSSファイルをを指定するときに使う。
　href属性とrel属性が必須。順不同。
　書くときは<link rel=””>とlinkの後に半角スペース、複数要素があるなら””で記述して半角スペースを空ける。
・href=”…”(href属性)*必須←外部ファイルのURLを指定する。
・rel=”…”(rel属性)*必須←↑で指定したファイルの用途を指定する。
　（stylesheet…CSS、icon…など。）
・type=”…”(type属性)←参照するファイルの種類を指定する
・media=”…”(media属性)*必須←href属性で指定したファイルの用途を指定する。
　・all…全てのデバイス
　・screen…PC、スマホ含め一般的なWEBブラウザ全てが対象
　・print…印刷や印刷プレビュー
　・tv…テレビなど解像度や色数に制限があるデバイスが対象
・size=”…”(size属性)←rel属性の値が”icon”のときにアイコンのサイズを指定する。

・バックアップの取り方（HTML、CSSごとにやる）
今日の作業が終わった時点で、以下のどちらかをやる。次の日以降も同じことをする。
出来れば数時間単位でとっておくといい。
　①ファイル自体をコピーして昨日の日付をつけて保存。
　　画像をコピーしないので容量を節約できるが、
　　コピー漏れが起こり得るのと一旦昔のに戻りたいって時に紐づけごと直さなきゃいけなくなる。
　②フォルダ自体をコピーして昨日の日付をつけてやる。
　　昨日の時点のHTMLとCSSが紐づいてるし、
　　操作も簡単だが画像含めコピーしていくことになるので容量を食う。

・「.com」や「.jp」が末尾のページにアクセスした時に、自動的に「index.html」というページを表示する仕組みになってる。
なので必ずトップページは「index.html」になるため、↑のバックアップの時に最新の編集をするのは元ファイルとなる。

・4か月目の成績考査はデザインを作るまで、5か月目のはそれを元にコーディングする＝今までと比べると圧倒的に作品数が減る。
・できれば在学中に決めておきたいので、今のうちから活動しましょう。
・Web面接のときは照明にも気を付ける。