HTML5+CSS3  手を動かしてマスターする WEBデザイン/プログラミング動画講座
4.5 (38 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
316 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML5+CSS3  手を動かしてマスターする WEBデザイン/プログラミング動画講座 to your Wishlist.

Add to Wishlist

HTML5+CSS3  手を動かしてマスターする WEBデザイン/プログラミング動画講座

最新のHTML5とCSS3を駆使してWEB業界で活躍するスキルを身につけよう
4.5 (38 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
316 students enrolled
Created by 村守 康
Last updated 10/2016
Japanese
Current price: $10 Original price: $85 Discount: 88% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 10.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 最新のhtml5とCSS3に準拠したWEBページを、ソースコードを書いて制作することができるようになります。
  • すぐにWEB業界で活躍できるスキルが身につきます。
View Curriculum
Requirements
  • コースを始める前に添付の「練習素材」をダウンロードしてください。
  • 講座を受講するために特別な知識は必要ありません。練習素材も添付されているのですぐに学習をスタートできます。
Description

 この講座はhtml5とCSS3を使ってWEBサイトページを制作するために必要なことを学ぶことに特化した講座です。 全編を手を動かして作品を制作しながら解説しているので、理論や機能を単独で学ぶ講座のように、途中で集中力を切らして飽きることがありません。

最新のHTML5とCSS3でホームページサイトを作る力を身につけよう

・WEBページ制作に必要な知識はすべて基本からていねいに分かりやすく説明しているので、これだけでサイト作成のスキルを身につけられます。

・ 将来役立つかもしれないけれど今は必要はないという知識は含んでいません。実践を重視した講座です。

・「実際に手を動かしてコードを書き」、ひとつのサイトを制作することを通して身につけます。 

・解説はすべて動画で行い、現役のデザイナーがページを制作する工程をマウスの動きひとつまで収録しています。

 ・ナレーション付きでわかりやすく解説しています。

・必要な画像素材など作業に必要な素材はすべて添付されています。

・仕事で必要なことだけをOJTで集中的に学ぶ講座です。


WEB業界で活躍できるスキルを確実に身につけるコース

 この講座を修了すると。 最新のhtml5とCSS3に準拠したWEBページを、ソースコードを書いて制作することができるようになり、WEBデザイナーとして仕事をするのに必要なスキルが確実に身につきます。

 ホームページ編集ソフトなど準備するものは何もありません。インターネットにつながったパソコンがあればそれだけで大丈夫です。 事前にパソコンの専門的な知識も必要ではありません。この講座をインターネットで購入するだけの知識があれば十分です。

学習内容

10のセクション、84本のビデオ、合計10.5時間の講座で集中して学べます。

Who is the target audience?
  • WEB業界で活躍することを目指す人にお奨めします。
  • 自分で最新のホームページサイトを制作したい方にも最適です。
Students Who Viewed This Course Also Viewed
Curriculum For This Course
85 Lectures
10:21:03
+
Section1:WEBサイトのしくみ
6 Lectures 32:05

このレクチャーではこのコースをはじめるにあたって準備しておくことと、必要な基礎知識についてお話しします。

準備しておいてもらいたいことはこのコースに添付されている練習素材のダウンロードです。これは今後このコースで制作を進めていく上で必要となるファイルなので必ずダウンロードしておいてください。


ダウンロードは画面左上の「リソースが利用可能です」という青い文字の表示をクリックするとダウンロードされます。練習素材はzipファイルで圧縮されているので、解凍してデスクトップ上に置いておくと作業しやすくなります。コース内でもデスクトップに置いて解説しています。


つぎに必要な基礎知識とはhtml文書がウエブサイトの中でどんな働きをし、どんなしくみでページが表示されるかというしくみについての説明です。これについては大抵の方はすでにご存じのことかと思いますが、講座を進めるために必要な知識ですので、念のため解説しています。

Preview 06:20

このレクチャーではみなさんがつくったウエブページをどうやってインターネット上に公開するか、そのしくみについて説明しています。インターネットでサイトを開き運営していくうえで必ず知っておかないといけない知識です。

サイトとウエブサーバー
02:52

このレクチャーではhtmlのソースコードを書くために必要なソフトについてです。html文書を書くためには特別なソフトは不要です。Windowsならパソコンについているメモ帳でも書くことはできます。ここでは実際にメモ帳を使ってhtml文書を書き替える実験をして、html文書が単純なテキスト文書だということを説明します。

またそのテキスト文書のhtmlファイルがどうやってきれいにデザインされたページとして表示されるのかについても説明しています。

html文書の編集方法
08:14

このレクチャーではCSSファイルの役割について説明します。CSSがページをつくるうえでどんな働きをしているのか、CSSファイルがなくなれば表示はどうなるのかを簡単な実験をしながら説明しています。

CSSについて
03:38

このレクチャーでは実際にCSSファイルの中身を開いて見て、どんな内容になっているかを検討します。CSSがテキスト文書で書かれ、どんなことが書かれているか、html文書とどんな関係になっているかを説明します。

CSSの中身
06:33

このレクチャーでは、htmlファイルとCSSファイルが具体的にどのように関連づけられているか、html文書の記述から見ていきます。htmlファイルの記述を少し変えるだけでこの関連がなくなることを実験して、示してみます。

htmlとcssの関係
04:28
+
htmlとCSSの基礎知識
6 Lectures 37:20

このレクチャーではプログラミングのソースコードを書くうえで必須となるエディタについて説明し、つぎに制作を効率的に行うための画面配置など制作環境について説明します。つかいやすい環境を整えることは上達の第1歩です。自分にあった制作意欲がわく環境を整えておきましょう。

エディターの準備
05:25

ここからは実際のhtmlとCSSの文法のお話しです。このレクチャーではhtml言語の基本についてタグを例にとって説明します。タグはhtmlのソースコードを書くうえで最も基本的な事項です。

htmlとCSSの実際
05:39

ここでは実際に簡単な文章を使って、この文章にタグを書き込んで見ます。タグがどんな成り立ちと役目を持っているかがよく理解できると思います。

タグの書き方(1)
07:02

つぎにタグを書き入れた文章をブラウザで表示してみて、タグがどのように働いたかを見てみます。この作業でタグの基本的な使い方が分かります。

このレクチャーではまたタグを書くときの規則についても説明しています。タグを書くときに守らなければいけないこと、見やすくするための書き方なども説明しています。

タグの書き方(2)
07:23

このレクチャーではCSSの記述方法についての解説を行います。文法的で少し硬い話ですが、ごく基本的なことなのでこの程度は覚えておくようにしましょう。

Preview 05:26

このレクチャーでは先のレクチャーで書いたCSS文書を例のhtmlファイルに適用させてデザインがどう変わるかを見てみます。

さらにCSSスタイルシートの内容を変更して、それがブラウザで再び開いたときにどう変化するかを見て、CSSファイルがhtmlファイルに与える効果を確認します。

CSSの効果が実際によくわかる例ですから是非やってみてください。

CSSをhtmlに適用する
06:25
+
Test_Siteの制作
3 Lectures 20:11

ここから実際のページづくりに入ります。このレクチャーではHTMLのソースコードを書くうえで最初に構造的に書くことが決められている事項について説明します。

同時にこれから練習用に制作するホームページのサイトを新しく準備します。

HTMLの構造
07:05

HTMLソースコードを書くうえで必須となるhead要素について説明します。この例ではtitle要素、meta要素、リンク要素をhead要素に書き込みます。

head要素
06:27

ここからは実際にホームページ上で見える部分の制作です。まずページの中で最も大きい部分であるbody要素についての説明です。

body要素のCSSの設定を少し変えて見て、ブラウザで確認することでbody要素が画面上でどのように見えるかを学びます。

body要素
06:39
+
トップページの制作
6 Lectures 41:07

最初に完成した見本とワイヤーフレームを見ながらindex.htmlの大まかな構造を検討します。最初に全体の構成をつかんでおくことで自分が今どの段階の作業をしているかが分かりやすくなります。

index.htmlの構造
05:13

body要素のおおまかな設定を行います。body要素はあとで画像を入れて細かい設定を行いますが、このレクチャーでは次のcontainerを配置するために事前に簡単な設定を行っておきます。

bodyの設定
05:53

初めて自分で設定するボックス、container要素をhtmlページ内に配置します。タグを書いてボックス要素をページ内に配置する方法を学びます。

containerの配置
07:51

次に配置したcontainer要素の大きさや位置などを細かく設定するためにCSSスタイルシートに設定を書き込みます。ここでスタイルシートの書き方を学びます。

Preview 05:34

container要素をページの中央にCSSで配置する方法を学びます。floatとmarginプロパティを設定してボックスをページ中央に配置するテクニックです。

containerの中央配置
09:49

要素に名前をつけて作る際につかうidとclassの違いについて学びます。どんなときにidを使い、どんなときはclassを使うかを説明しています。

class(クラス)とid
06:47
+
コンテンツの制作
15 Lectures 01:52:45

このレクチャーではbody要素の上部に画像を使って罫線を引く方法を説明しています。

bodyの仕上げ(1)
05:46

このレクチャーで実際にbody内に線を引くコードを書きます。CSSの設定で小さな画像を貼り付け、その画像を水平方向にリピートさせて横に1本の長い線を描きます。

bodyの仕上げ(2)
07:23

ここではページで使うフォントの設定をCSSで行います。WEBページで使うフォントを指定し、見えにくいフォントは使わないように設定する方法を学びます。

フォントの設定
05:22

ここではcontainer要素の中にheader, main, footerの3つのボックスを置きます。html5からはこの3つの要素はデフォルトで設定されるようになりました。これらをhtmlテキスト内に書き込み配置します。

header, main, footerの配置
06:55

header, main, footerをCSSスタイルシートで設定します。大きさ、位置、余白の設定などを行い内容をすぐに書き込めるように設定しておきます。

header, main, footerのCSS設定
05:19

header部分の細かい仕上げをします。用意されたワイヤーフレームを見て内容を検討し、Logo_areaとNavi_areaの2つの大きなボックスを配置します。

headerの仕上げ
06:22

Logo_areaのCSS設定
04:19

Logo_areaに画像を挿入し、その位置をCSSで設定する方法を学びます。

Preview 06:32

配置された画像にhtml内でリンクを設定する方法を学びます。

Logo_areaのリンク設定
07:38

Navi_areaに画像を配置して位置をCSSで設定し、さらにその画像にリンクを設定します。

バナー画像の配置
11:26

Global_Navi部分の設定を始めます。ワーヤーフレームで構造を確認しておき、リスト項目のul要素とli要素を配置して、文字を入力します。

Global_Naviの設定(1)
07:07

ul要素をCSSで設定して、文字の位置を調整する方法を学びます。

Global_Naviの設定(2)
07:20

li要素のCSS設定を行ってそれぞれの文字が間隔を空けて配置されるよう細かく調整します。

Global_Naviの設定(3)
07:46

文字にロールオーバーのリンクを設定します。CSSだけでロールオーバーを設定するのは少し技術的には高いハードルですが、この方法を学びます。

Global_Naviの設定(4)
12:13

WEBの規格で使用されるパスの指定方法を学びます。相対指定と絶対指定の方法を学び、画像やページのurl指定の規則を理解します。

パスの指定方法
11:17
+
Side_naviの制作
10 Lectures 01:17:02

このレクチャーではmain要素内の最上部に画像を配置し、さらにその下にSide_navi, Main_box, Banner_boxの3つの要素を配置します。

画像と要素の配置
08:08

Side_navi, Main_box, Banner_boxのCSSを設定し、この3つのボックスが横に一列に並ぶように配置させる方法を学びます。

Side_navi, Main_box, Banner_boxのCSS設定
10:23

3つのボックスがうまく横に一列に配置されない場合の原因と対処法を学びます。これは初心者の方によく起きるミスなので特に説明します。このときブロック要素とインライン要素という要素の違いについても学びます。

なぜ横一列に配置されない?
08:07

ここからSide_navi部分の設定に入ります。最初はulとliのリスト項目を配置します。

Side_navi ul, liの配置
07:30

ulとli要素のCSSを設定します。大きさや位置を設定し、li要素には背景で画像を挿入します。

Preview 05:31

liのhtml要素に画像を配置し、マウスオフのときに見えるようにします。

ロールオーバーのhtml設定
07:00

リンク部分にマウスがオンのときに画像が切り替わるようにCSSで設定します。CSSを使ったロールオーバー設定が完成します。

ロールオーバーのCSS設定
09:37

リンクボタンのうち、トップページの画像のみが初期設定でマウスオンの画像になり、他のリンクボタンの画像がマウスオフになるようにhtmlで設定します。

トップ以外のボタンのhtml設定
06:52

トップ以外のリンクボタンがマウスオンで画像が変化するようにCSSを設定します。これですべてのボタンのロールオーバーが完成します。

トップ以外のボタンのCSS設定
06:03

main要素の最上部に置いた画像とheader部分の間に少し隙間があるのでこれを修正します。隙間の原因と対処方法を学ぶことでボックスの幅の計算方法を知ります。

スキマはどこから?
07:51
+
Main_boxの制作
10 Lectures 01:20:55

このセクションで行う作業を、ワイヤーフレームとサンプルを見ながら構造を確認して検討します。

内容の検討
03:26

Main_box要素にあらかじめ入力されているテキストを流し込みます。

テキストの挿入
08:01

流し込んだテキストをマークアップします。このときIDとCLASSについて実際に使い分けて要素をつくります。

テキストのマークアップ
07:09

マークアップした部分の要素のCSSを設定します。特にこのレクチャーではタイトル部分の細かい設定を行います。

MainBox_itemのCSS設定
10:50

イメージを挿入し、イメージとテキストの間に間隔を空けてレイアウトする方法を学びます。

Preview 09:07

ここまででできたタイトル部分の要素やボックスの要素を使って新着情報のテキストをマークアップします。このレクチャーでは本文の部分をマークアップします。

新着情報の設定(1)
08:37

ひきつづき新着情報部分のマークアップをします。ここでは小タイトルのMainBox_newsを主に設定します。

新着情報の設定(2)
07:42

新着情報の設定(3)
09:04

Banner_boxの制作をします。Banner_boxは写真のみの配置なので難しいところはありませんが、写真を同じ要素を使って間隔を空けて配置する方法を学びます。

Banner_boxの制作
12:59

トップページの最後のfooter要素を設定し、テキストを入力してこのページを完成させます。

footerの制作
04:00
+
corporate.htmlの制作
8 Lectures 01:00:18

完成済みのサンプルページとワイヤーフレームを見て、ページ全体の構造を把握します。

ページの概要
04:15

トップページをベースにして新しく会社概要ページのファイルを作り、不要な要素を削除してMainBox_sub要素の配置とCSS設定を行います。

MainBox_subの配置とCSS設定
09:29

Subpage_TitleのCSS設定を行い、デザインを整えます。

Subpage_Titleの設定
07:37

同じようにしてCorporate_titleのCSS設定を行い、デザインを整えます。

Corporate_titleの設定
11:52

table要素の概要を説明し、html内にtableで使用するテキストを挿入します。

tableの設定(1)
05:38

挿入したテキストにtableのマークアップを行い、tableの行のデザインを整えます。

tableの設定(2)
06:49

table要素のCSS設定を行います。このときhtml内にCSSプロパティの設定を書き込む方法も学びます。

tableの設定(3)
09:15

このページはトップページとサイドナビの部分が共通ですが、マウスオンのときに動作するボタンがトップページと異なります。これを再設定します。

Side_naviの設定
05:23
+
modelhouse.htmlの制作
6 Lectures 35:58

完成済みのサンプルページとワイヤーフレームを見て、ページ全体の構造を把握します。

ページの概要
05:13

会社概要ページをベースにして新しくモデルハウスページのファイルを作り、不要な要素を削除してMainBox_sub要素の配置とCSS設定を行います。

さらにこのページで使うテキストを用意された素材からコピーし、挿入します。

ページの準備
05:04

テキストをマークアップし、MainBox_item要素のCSS設定をします。

MainBox_itemの設定
06:51

Item_title要素を配置し、CSSを設定してタイトルを完成させます。

Item_titleの設定
10:14

さらにタイトル下の、Item_box,とItem_text要素を配置し、CSSを設定してMainBox_subのボックスを完成させます。

Item_box, Item_textの設定
06:42

サイドナビの部分を再設定しこのページを完成させます。

Side_naviの設定
01:54
+
お問合せformページの制作
15 Lectures 02:03:22

モデルハウスのページをベースにして新しくお問合せformページのファイルを作り、不要な要素を削除してMainBox_sub要素の配置とCSS設定を行います。

ページの準備
08:22

完成済みのサンプルページを見てform機能の概要を学びます。

ページ内容の検討
05:38

完成済みのサンプルページとワイヤーフレームを見て、ページ全体の構造を把握します。

ワーヤーフレームの検討
05:15

htmlにformタグとpタグを書き込みます。p要素は最初の「お名前」の入力を求める行です。まずこの行をしっかり作ります。

p要素の設定
04:41

p要素にCSS3でグラデーションを設定します。CSS3から登場したグラデーションの機能の学習です。

Preview 12:55

送信機能の重要な部分であるlabel要素とinput要素をhtmlページ上に配置し、その機能を説明します。

labelとinput要素の配置
08:59

input要素のCSSを設定します。input要素には角丸のデザインを行います。これもCSS3でできるようになったデザインです。併せてベンダープレフィックスの記述方法についても学びます。

input要素のCSS設定
08:03

さらにinput要素にドロップシャドウを加えます。これもCSS3を使った設定です。

CSS3によるシャドウの設定
05:31

メールアドレスの入力を受け付ける機能をinput要素に加えます。あらかじめ見本の文字を入力しておくプレースホルダーの機能についても学びます。

メールアドレス入力部品の設定
08:19

郵便番号とご住所などの入力部品はテキストの入力と同じなので最初のお名前と同じ方法で設定します。

郵便番号入力部品の設定
10:22

性別の入力を受け付けるラジオボタンを設定します。ラジオボタンは二者択一形式のボタンです。どちらかが選ばれるともう一方が解除される仕組みです。

ラジオボタンの設定
08:52

チェックボックスはラジオボタンとちがって複数選択が可能なボックスを設置します。

チェックボックスの設定
06:52

プルダウンメニューの設定
10:47

送信機能の最後に送信ボタンとリセットボタンを設定します。リセットボタンではボタンをクリックするとそれまで入力した項目すべてが空白に戻る設定のボタンです。

送信とリセットボタンの設定
10:13

最後にすべてのページのリンク先urlを設定して、リンクがうまく働くかを確認してサイトの完成です。

リンク先urlの設定
08:33
About the Instructor
村守 康
4.5 Average rating
322 Reviews
2,596 Students
14 Courses
デザイナー

大手半導体メーカー販促部門でデザイナーとして勤務後、デザイン会社を設立。現在は現場でのデザインとともに新人教育を多く行う。Adobe Photoshop, Illustratorなどデザイン系のアプリケーションと、HTML, CSS, Java, phpなどコーディングとプログラミングの解説がメインで、即戦力のスキルを伝えることに力を入れています。これまでに特に動画を使った指導カリキュラムを多く開発しており、わかりやすいと好評を得ています。