今日からコーディングの授業が始まった。
まずはHTMLの基礎から。HTML4日間、CSS６日間授業を行なっていく。
同時にポートフォリオを進めていき、就活に備える。
Webサイト作成の流れ
①作成依頼
②企画書、サイトマップ、見積もり
デザインに必要な素材の作成。ロゴ、ピクトグラム、写真加工、原稿、その他SNS、JQuery
③デザインラフの作成
PCだけでなくスマホ、タブレットなどデバイスに対応できるよう素材も準備。
④コーディング
HTMLは検索エンジンのため文法をしっかり理解する。
例）<title>タイトル</title>
CSSは見た目のデザイン。
コーディングについて
覚えるコツは整理整頓。Webページ作成時の文字コードはUTF-8 BOM無し
・コーディングの手順 html
※事前にロゴやイラスト、写真画像、原稿は準備しておく。
①骨組み
<!doctype html>、<html></html>、<head></head>、<meta charset=”UTF-8″>、<title></title>、<meta name=”description”content=”~”>、<body></body>、<head></head>
②h1〜h6、p、ul
③header nav main section
④デザインに合わせてdiv、span、追加してid=”~”、class=”~”
⑤最後に検証ツールで正しくできているか確認。
・コーディングの手順 css
①reset.cssの設定
②style.cssの設定 セレクタの記述を先にする。
③後はひたすらプロパティを書いていく。コツはデザインの上の部分から作成していく。
④スマホ対応にするにはMedia Queriesを足していく。
⑤SNSやJQueryの埋め込みは最後に行う。サーバーにアップしないと動かないものもあるので最後に取っておく。
※まめにバックアップは取っておくこと！
⑥サーバーにテストアップし、リンク切れや画像の確認を行う。
⑦納品。
・ファイルのパス指定
⑴ 絶対パス 世界中どこからでもアクセスできる。外のサイトに飛ぶ時に使用。
⑵ 相対パス トップページからグローバルナビゲーションで分類されたページ。
