Webサイト制作実践講座（前編）
イラストレーターの画像を起こして、CSS/HTMLでコーディングしていく作業の 全体を習得します。 Web デザイン、HTMLやCSSのスキル、イラストレーターを 統合的に組み合わせた実践講座になります。
レベル
むずかしい期間
1日約1時間で 7日間
レッスン
設計図からWebサイトを作るフロー
イラストレーターで作った設計図から画像を切り出して、それを見ながら
HTML/CSSを書いていく作業の全体のフローを習得します。
このビデオは、画像を切り出していく部分にフォーカスします
設計図から画像を切り出していくデモ
イラストレーターで作成した設計図からから画像を切り出していくデモを見ます。
切りたい箇所を囲みながら、切り出したイメージを保存していく作業です
IDとCLASSを設計する
IDとCLASSを使い分けて、Webサイトの設計作りを学んでいきます。
設計図からHTMLを大まかに組んでいく
イラストレーターで作った設計図をみながら、bodyの中におおまかなHTMLを組んでいきます。ブラウザーで確認しながら作業を進めていきます。
HTMLの細かい設計を行う
おおまかに設計をしたHTMLに対する詳細な設計をやり方を習得します
HTMLにコンテンツを入れてみる〜ヘッダー
設計したHTMLに対して、その中身を入れていきます。
まずはヘッダー部分から入れてみましょう
HTMLにコンテンツを入れてみる〜メインパーツ
ヘッダーに続いてメインフィーチャー、メインフィーチャーズ、ブログ
の部分のコンテンツを入れていきます。
HTMLにコンテンツを入れてみる〜フッター
最後にフッター部分のコンテンツを入れていきます。
