学科 HTML基礎①OnLine
講師：湊 有加里先生
✎ܚ湊先生自己紹介
・訓練校2回経験
・大学時代に触れたHTMLに興味を持ち、独学の後仕事に レベルアップの為に受講
・インハウスデザイナー、カード会社、ドコモ、ネット占いとeコマースの会社など経歴は多岐に渡る
・出産を経て現在は講師3年目
「皆さん検索力をどんどん身に付けて下さい」→聞く前に1度検索するクセを！
「職歴多めの人は職務経歴書をキャリア形式で作ってみて下さい」→応募先に合うスキルをピックアップ！
「PFでスキルを示すのに3段階でシビアに付けるのは勿体ない」→自己判断なのでちょい盛りでOK！
→10段階にする、文章表示のみにするなど色々できます
「エクセルはどんな仕事でも結構使うのでおさえておくと良いです」→MSブラウザ版なども活用しましょう
1限 Webサイト制作に入っていきます
✎ܚこれまでよりもより一層『勉強』モードに入っていきます→疑問点はどんどん質問しましょう！
*理数系・文系関係ないです→楽しめる人に向いています
2・3限 Webサイト制作の流れ
✎ܚ動画「Webサイト制作の流れ」
・00 依頼をいただいた
・01 ご提案→企画書、サイトマップ、見積もり
*『会社概要のページは要りますか？』
*『店舗一覧のページもいりますね、会社概要にまとめますか？別ページにしますか？』など
*依頼者はWebサイトを初めて依頼する人やWebページの知識があまりない人が多い
*具体的な提案が喜ばれる→契約に繋がりやすい面も
*ワイヤーフレームが必要な場合も→基本は無彩色で作っていく→大体の骨組みを見える化
・02 デザインに必要な素材→ロゴ、ピクトグラム、アクセスマップ、写真、原稿、SNSやJQuery
*『ロゴはありますか？データご用意ください』
*『(なければ)お作りしますか？ご予算別にはなりますが承る事も可能です』など
・03 デザインラフの作成→ワイヤーフレーム→見た目・完成予想図をお客様に提示
*この段階で契約決定
*WFに画像などを入れて実際に出来上がる見た目を作る→この通りにコーディング出来る事！
*第4回成績考査でWFを提出(デザインラフまで行けると尚良き)
・04 コーディング *こまめにバックアップを‼
*整理して覚えるのがポイント！→スタンダードなタグだけを使用したメモ書きサイトあります
→HTML/CSSの基礎
STEP1. 素材の準備
*必要な素材→授業ですぐに使えるように準備！
STEP2. マークアップ・HTML作成
①骨組み
②原稿と画像
➂セクション
④idやclass付け
⑤検証ツールを活用しよう！！
*デザインラフのパーツひとつひとつを作って組み直していく作業HTML編
STEP3. CSS作成手順
①リセットCSS設定
②セレクタの記述を先にしてしまう←Point‼→例：#header h1 {} など
➂あとはひたすらプロパティを書く‼コツ→デザインの上から順にやっていく
④メディアクエリを追加する
⑤SNSやJQueryの埋め込みは最後に→サーバー上でないと確認できない物もあるため
*デザインラフのパーツひとつひとつを作って組み直していく作業CSS編
*第5回成績考査でコーディングが完成している状態(JQueryは入れなくてもOK)
*レスポンシブデザインもちゃんと出来ている事！
STEP4. サーバーテスト
STEP5. 納品(お疲れ様でした～！)
*齋藤先生「面接で聞かれる質問『3年後にはどんなヴィジョンを思い描いていますか？』→その前段階の人材が欲しい」
4・5限 Webサイト制作の注意点やポイント
✎ܚファイル管理とバックアップをしっかりと‼‼‼
→フォルダごとコピーして前日の日付足してBUにする(画像なども含む為容量が増えてしまう)
→ファイルをコピーして前日の日付足してBUにする(リンクするファイル名の変更も必要になる事があって手間)
→好きな方法で良いからとにかくしっかり管理&BU‼‼‼
✎ܚファイル構造要注意‼‼→相対パスと絶対パス
・ファイル名は半角小文字、記号は-_のみ
・タグは見やすくインデント！
・terapadの文字コード設定は『UTF-8N』に→8だと見えない文字列が入ってしまっている為
・今は無きxhtmlの、<br />などを見かけたら→さわらないこと
✎ܚPFの整理を
・しばらくはこれまでのような作品作りのフェーズじゃなくなります
→この機会にポートフォリオを整理し、採用担当者に見やすくしましょう！
*クイック編集で親ページ設定が出来るので参考に
✎ܚ各自作業
・PFの整理をしたいと思っていたので早速メニューの整理
・成績考査一覧ページを作成
今日は久しぶりに初めましての先生でした
湊先生 お綺麗で話し方がしっかりしていらっしゃって素敵な女性
経歴の職種の多さが自分と似ていて親近感が湧いてしまいました🥰
職務経歴書のキャリアごとに書くという書き方を
早速参考にさせていただこうと思いました🌟
そしてデスクトップ壁紙が気になりました
もしかして趣味が近い方…？
11212223ARIAKEｲｯﾃﾏｼﾀｶ? ｯﾃｷｲﾃﾐﾀｲ♡
HTML/CSSについては基本はわかっているものの
常に進化し続けている分野なので気を引き締めて
初めて触れた時のようにしっかり自身に叩き込もうと思います(๑•̀ㅂ•́)و
楽しみです♪
