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

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

≫ 現在7054人が受講中 ≪

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)

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

受講生 7054

Picture?width=40
Picture?width=40
Picture?width=40
Picture?width=40
Picture?width=40
Picture?width=40
Picture?width=40
Picture?width=40
Picture?width=40
Picture?width=40
Picture?width=40
Picture?width=40
Picture?width=40
Picture?width=40

人気講座TOP5

  • Css3
    HTMLを装飾するためにはCSSという言語を学びます。CSSも非常に単純なのでその気になれば1...
  • Html kouza
    学びたいけれどもHTMLって難しそうなんて思っている人のための講座です。HTMLはすごく簡単で...
  • Webkoutiku1
    イラストレーターの画像を起こして、CSS/HTMLでコーディングしていく作業の 全体を習得し...
  • Photoshop kouza
    Webデザインに必要なIllustratorの機能を覚えながら、Webページ作りに必要な理論を...
  • Deploy
    WebサーバーのデファクトスタンダードであるApacheに関する事やドメインに関する事などを学...