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にコンテンツを入れてみる〜フッター

最後にフッター部分のコンテンツを入れていきます。