20240307　ウェブ制作の流れ

ウェブの制作は

とか

• ☆ご提案を考えらえる人は大切
• ☆企画書・デザインマップ
  ➡どんな情報を載せたいのかの聞き取り
  ➡１００万円の仕事としたら　追加は別途お金がかかりますと宣言する　あれもこれもといわれないためにきっちりお話をする
• ☆ワイヤーフレーム
  ➡画像がない状態のウェブサイトの設計図を作成
• ☆制作始める➡デザインラフを作成する２パターン位作（PS,AI,DX）
• ➡デザイン決定！！！
• ☆コーディングに入る

☆デザインカンプなども大切

☆HTMLの自分のメモ書きサイトを作るといい

できる事の整理整頓をする

やること

ロゴ・ピクトグラム・バナー・地図・写真・撮影？収集？
テキストの事は自分が書くのかもらえるのか
動きのパターン・など聞く

HTML➡その文字の役割を持たせるもの➡マークアップしていく
タグ付➡１番大切なもの・２番大切なもの・３番大切なもの・一つの塊・役割・などを記述前にしっかり区別する必要があります

HTMLの記述
！！！！！まず情報の整理整頓！！！！！

覚える・なれるためには　

書いてみる⇒何を書いたら何ができるかということをわかるといい！！
その時は➡グーグルクロムのデベロッパーツールの利用をしてみる

何の綴りは何をするのかを考えていくことが大切！！

HTMLの骨組みを考える（ヘッダー・ボディー）
マークアップ・HTMLファイルの作成…原稿と画像のマークアップ（斎藤先生のDVDの説明の中の２番目のマークアップが大切）
マークアップ　HTMLファイルの制作⑤　検証ツール　を使用➡HTMLの文法が整っているかどうかの検証をする

CSSの記述
ブラウザーが勝手に余白を決めている余白をいったんリセットする働きがリセットCSS・リセットCSSはいろいろある

人それぞれ使っているリセットCSSを育ってていく
自分で育てていくもの・・・なんだーーー
リセットCSSを育てていく
リセットCSSの設定をする➡作業するときに邪魔
CSSを書き終わったら携帯版のサイトの制作に入る
セレクタを書く➡作業が楽
♯header headr

？？？
CSSの記述　プロパティを書く
デザインの上から作成とは

メディアクエリを足す⇒スマフォ対応　⇒デベロッパーの趣味レーターの実機検証とは

CSSの記述　SNS　JQUERY　の埋め込みを最後にする

ファイル名は・・

運用➡見られてないページをどうにかする・・とか
　　　うまく映らないをどうにかする・・とか

修正のスキルがないと突然の修正依頼に対応できない

➡まず一つサイトを作成する事
➡ツールがなくても
➡あんちょこサイトを作る

➡検索力を上げる
➡コピペでもいい

➡　バリデーターにかける　
とてもいいサイトがある　HTMLバリデーションと検索するといい
アドレス入れると不備を教えてくれる

➡メディアクエリー　⇒スマホサイト

まめにバックアップを取っていこう！！

コーディングの手順

コーディング　文字宣言・UTN-8N

１。すべての要素にタグ付けをしていく
➡ページを作るにあたり、盛り込むもの一つ一つにそれぞれ役割を与える