Webサイト制作実践講座(前編)

すぐに受講して学習を始めてみる(無料)

≫ 現在3人が受講中 ≪

Webkoutiku1
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88 2014 04 30 21.59.16

1
設計図からWebサイトを作るフロー (14:19)

イラストレーターで作った設計図から画像を切り出して、それを見ながら HTML/CSSを書いていく作業の全体のフローを習得します。 このビデオは、画像を切り出していく部分にフォーカスします

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88 2014 05 01 10.08.08

2
設計図から画像を切り出していくデモ (14:19)

イラストレーターで作成した設計図からから画像を切り出していくデモを見ます。 切りたい箇所を囲みながら、切り出したイメージを保存していく作業です

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88 2014 04 30 22.17.23

3
IDとCLASSを設計する (06:20)

IDとCLASSを使い分けて、Webサイトの設計作りを学んでいきます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88 2014 04 30 22.19.37

4
設計図からHTMLを大まかに組んでいく (12:17)

イラストレーターで作った設計図をみながら、bodyの中におおまかなHTMLを組んでいきます。ブラウザーで確認しながら作業を進めていきます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88 2014 04 30 22.27.50

5
HTMLの細かい設計を行う (12:17)

おおまかに設計をしたHTMLに対する詳細な設計をやり方を習得します

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88 2014 05 01 11.18.10

6
HTMLにコンテンツを入れてみる〜ヘッダー (11:32)

設計したHTMLに対して、その中身を入れていきます。 まずはヘッダー部分から入れてみましょう

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88 2014 05 01 11.21.28

7
HTMLにコンテンツを入れてみる〜メインパーツ (11:32)

ヘッダーに続いてメインフィーチャー、メインフィーチャーズ、ブログ の部分のコンテンツを入れていきます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88 2014 05 01 11.25.37

8
HTMLにコンテンツを入れてみる〜フッター (11:32)

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

受講生 3

Mitsu
Yagi %281%29
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88 2016 03 28 9.28.50 am

人気講座TOP5

  • Biz manner
    社会人としてのマナーを学びます。
  • Webkoutiku1
    イラストレーターの画像を起こして、CSS/HTMLでコーディングしていく作業の 全体を習得し...
  • Mitsu2
    Web制作会社が作るサイトのように、きれいで、使いやすいサイトを作れるようにするための初心者か...
  • Pic robotics01
    ロボティクス開発の基礎を学び、本格的な商業用のロボットを開発できるスキル習得を目指します。
  • Ch1
    Javaの基礎を理解する講座