訓練日誌-2024/1/11、12（HTML・CSSについて）
目次
- 依頼を受けた時の流れ
- HTMLについて
- CSSについて
- JavaScript/jQueryについて
依頼を受けた時の流れ
１．打ち合わせ・提案
必要なもの
・企画書
・サイトマップ（フォルダの整理）
・見積り
・ワイヤーフレーム（白黒のレイアウト） なくても良い場合もある
２．制作開始
流れ
①デザインに必要な素材の作成（ロゴ、ピクトグラム、Map、写真、原稿、jQueryの動き素材など）
②デザインラフの作成（使用ソフト：photoshop、イラレ、XD）
③コーディング作業（HTML、CSS、JavaScript/jQuery）
１素材の確認
２マークアップ
３CSSでデザイン
４サーバーにテストアップ
３．クライアントに提出
４．本番アップ 納品
５．運営、サポート
HTML
検索エンジンのための言語 サイトの基盤 Webページ内の各要素の意味や文章構成を作る
バックアップをこまめに取ること
方法：保存→タイトル名にその日の日付を追記→更新するのはベースのファイル
基礎構造
<!DOCTYPE html>
<html lang=”ja”>
<head>文章</head>
<body>文章</body>
</html>
head内に入れる内容（サイト上には出てこない文章）
文字コード：テラパッドでは「UTF-8N」※他のものでもBOMなしにすること
タイトル：グーグルなどで検索かけた時に出てくる文
meta：discription（タイトルの下の文章）、keywords
link：reset.css（初期のCSSをリセットする）、CSS（自分の作成したCSS）、favicon（ロゴ設定）
body（サイト上に出る文章）
クリックしたら別サイトに飛ぶ方法
相対パス
・同じフォルダ内のもの→ファイル名のみでOK 例：<a href=”ファイル名”＞
・同じフォルダ内で別フォルダのもの→そのフォルダ名/ファイル名 例：<a href=フォルダ名/”ファイル名”＞
・別フォルダのもの→「../」 例：<a href=../”ファイル名”＞
絶対パス
・外部のサイトに飛ばす（購入ボタン押したら楽天のサイトに飛ぶなど）→サイトのURL
一番大きい見出し→h1 例：<h1>見出し</h1>
改行→<br>
画像入れる→<img>
CSSやアイコンなどの外部ソースを読み込ませる（HEAD内で使用）→<link>
検索キーワードなどサイトの情報を検索エンジンに知らせるメタ情報を指定すえう→<meta>、<meta charset=”UTA-8″>
流れ
全てのテキスト文章を先に打ち込んでおく
コードを入れていく
CSS
サイト内のレイアウトデザインや各要素を装飾する言語
検証で変更できる
JavaScript/jQuery
動きをつけたり計算などの処理をする
