スマホでもタブレットでもPCでも自由自在にデザインできる「レスポンシブWEBデザイン」を基礎からマスターする講座
3.7 (3 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.
103 students enrolled
Wishlisted Wishlist

Please confirm that you want to add スマホでもタブレットでもPCでも自由自在にデザインできる「レスポンシブWEBデザイン」を基礎からマスターする講座 to your Wishlist.

Add to Wishlist

スマホでもタブレットでもPCでも自由自在にデザインできる「レスポンシブWEBデザイン」を基礎からマスターする講座

レスポンシブWEBデザインの理論と技術を基礎から分かりやすく解説しています。実際に手を動かして演習をこなしながらレスポンシブWEBデザインのページ制作技術のほぼすべてを身につけることがでます。
3.7 (3 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.
103 students enrolled
Created by 村守 康
Last updated 4/2017
Japanese
Current price: $12 Original price: $90 Discount: 87% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 9 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • スマートフォン、タブレット機器、PCでレスポンシブに表示できるデザインスキルが身につきます。
  • CSS3のメディアクエリが使いこなせるようになります
  • html5とCSS3のプログラミング力がワンランクアップします
View Curriculum
Requirements
  • 初心者でも可能ですが、HTMLとCSSの基礎的な知識があればなお学びやすくなります。
  • コースをはじめる前に用意されている練習素材をダウンロードしておいてください。他には必要なものはありません。すぐにスタートできます。
Description

このコースはレスポンシブWEBデザインの理論と技術を基礎から完全に学ぶための講座です。レスポンシブWEBデザインの技法でWEBページを制作するためのほぼすべての技術を分かりやすく、詳しく説明しています。全編を演習形式で実際に操作しながらスキルを身につけるように作られており、理論中心で飽きることはありません。


レスポンシブWEBデザインのすべてを身につけよう

・すべてのセクションに演習のために必要な練習素材が用意されています ・メディアクエリによるレイアウトテクニック

・フルードグリッド、フルードイメージ ・HTML5とCSS3の上級テクニック

・実践的で即戦力となるスキル

・簡単なページの制作からはじめてレスポンシブWEBデザインの理論と技術をマスターします


レスポンシブWEBデザインを基本からすべてを学ぶコース

WEBデザイナーにとってスマートフォン、タブレット、PCとすべてのデバイスのページをひとつのHTMLファイルで実現するレスポンシブWEBデザインの技術は、今WEBページ制作の現場で最も必要とされるスキルです。今までのWEBページ制作の技術に加え、ワンランク上のレベルを目指しましょう。

このコースでは豊富な作品を実際に一緒に作りながら、レスポンシブWEBデザインの理論と技術を基本から学べます。このコースが終了すればどんなデザインのWEBページも思い通りに制作できるスキルが身につきます。

学習内容

8つのセクション、78本のレクチャーを合計10時間のビデオで解説しています すべての制作例を最初に制作の方法を順を追って解説しています

最初は簡単なテクニックから徐々に高度なテクニックを使えるようにステップを踏んで進めます

高度なページを制作するために必須のメディアクエリについて特に詳しく説明しています

レスポンシブWEBデザインに必須のCSS3とHTML5についても分かりやすく解説しています

単に理論を学ぶだけでなく実際にWEBページが制作できる技術を学べます

Who is the target audience?
  • スマホ、タブレットにも対応したレスポンシブなWEBページを作成するスキルを身に付けたい方
  • スマートフォンのページデザインを学びたい方
  • html5、CSS3のメディアクエリをきちんと理解したい方
  • 最先端のウエブサイト制作を学びたい方ならどなたでも
Compare to Other Responsive Design Courses
Curriculum For This Course
78 Lectures
09:09:28
+
レスポンシブWEBデザイン
8 Lectures 49:15

コースを始める前に練習素材をダウンロードしておきましょう。練習素材はこのページ左上の「リソースが利用可能です」という青い文字をクリックうると自動的にダウンロードされます。練習素材は「sozai.zip」というzipファイルに圧縮されています。ダブルクリックして解凍し、デスクトップに置いておくと便利です。

このレクチャーではレスポンシブWEBデザインとはどんなものかを実際にレスポンシブWEBデザインで作られたページとそうでないページを見比べて説明します。

Preview 06:04

レスポンシブWEBデザインではHTML5とCSS3の規格でコードを書きます。そのためこの2つの規格について知っていることが必要です。まずHTML5について前の規格との違いを見てみます。

HTML5について
05:35

まずHTML4.1で書かれたページを例にとってその構成を使われているタグを中心に検討します。

HTML4.1サンプルページの検討
06:37

HTML4.1で書かれていたページのタグをHTML5のタグに書き換えてそのちがいを見ます。このレクチャーではheader部分のタグを書き換えます。

HTML4.1からHTML5への書き換え(1)
07:47

次はナビゲーションの部分です。HTML4.1ではdivで書かれていたナビゲーションの要素がHTML5ではnavという要素に置き換えられます。この書き換えを行います。

HTML4.1からHTML5への書き換え(2)
07:08

このレクチャーではメインコンテンツのブロックをhTML5から登場したarticle要素を使ってコーディングします。

HTML4.1からHTML5への書き換え(3)
06:06

同じようにメインコンテンツのブロックを今度はsection要素を使ってコーディングします。

HTML4.1からHTML5への書き換え(4)
04:41

残りのメインコンテンツのブロック部分もsection要素を使ってコーディングして、HTML5へのこのページの書き換えを完成させます。

HTML4.1からHTML5への書き換え(5)
05:17
+
メディアクエリ
15 Lectures 01:59:31

このレクチャーではメディアクエリについて概要を説明します。

Preview 09:32

実際にメディアクエリを使ってページレイアウトを変化させるページを制作します。まずワイヤーフレームをみてこれから制作するページの構造とタグを確認しておきます。

メディアクエリのhtml(1)
12:00

制作するページの空白のhtmlファイルを新作成し、定型部分(bodyタグの前まで)を完成させます。

メディアクエリのhtml(2)
10:42

このレクチャーから実際のページの内容です。まず最初にheaderのブロックとnav(ナビゲーション)のブロックを完成させます。

メディアクエリのhtml(3)
04:31

つづいてmainのブロックのうち写真の部分(aside)をコーディングします。

メディアクエリのhtml(4)
06:01

htmlの最後の部分、記事のブロックをarticleとsection要素を使ってマークアップします。このレクチャーでhtmlのページは完成です。

メディアクエリのhtml(5)
05:55

つづいてこのページのCSSの設定を行います。このレクチャーではbodyとheader部分の設定をします。

メディアクエリのCSS設定(1)
09:44

つぎはナビゲーション部分のnavタグの設定を行います。

メディアクエリのCSS設定(2)
05:36

つづいてこのページの写真2枚を入れたaside部分のCSS設定をします。

メディアクエリのCSS設定(3)
11:54

このレクチャーでは記事部分のarticleとfooterの設定をします。この2ブロックの設定が終わるとこのページのスマートフォン用の設定が完成します。

メディアクエリのCSS設定(4)
04:50

このレクチャーではメディアクエリを使って、画面サイズがタブレットのときのCSS設定を行います。まずスマートフォンとタブレットで大きくレイアウトが変化するナビゲーションのブロックからです。

メディアクエリのCSS設定(5)
08:47

同じように画面サイズがタブレットのときのCSS設定を行います。このレクチャーでは写真の部分と記事の部分です。

メディアクエリのCSS設定(6)
08:05

このレクチャーでは画面サイズがPCのときのCSS設定をします。この設定が終わるとこのページのコーディングは一応完成します。

メディアクエリのCSS設定(7)
09:21

前のレックチャーまででコーディイングは一応終わりましたが、プレビューすると思いもかけないような不具合が起きました。このレクチャーではこの不具合を解決する方法としてclear fix(クリアフィックス)という設定をCSSコードに書き入れます。

clear fix(1)
05:36

実際にhtmlとCSSスタイルシートにクリアフィックスを書き入れてその使い方を学びます。

clear fix(2)
06:57
+
フルードグリッド
12 Lectures 01:16:22

このレクチャーではフルードグリッドの概要を説明します。

フルードグリッドの概要
06:06

このレクチャーからは実際にソースコードを書きながらフルードグリッドを学びます。最初にサンプルページのhtmlコードを書きます。

フルードグリッドの実践 html(1)
06:38

このレクチャーでこのサンプルページのhtmlコードを完成させます。

Preview 06:05

このレクチャーからこのページのCSSスタイルシートを書きます。最初はbotyとheader部分です。

フルードグリッドの実践 CSS(1)
05:14

つぎはmainの部分のCSSを設定します。

フルードグリッドの実践 CSS(2)
08:05

footerの部分までを設定して制作を完成させ、プレビューしてみますが固定値で設定しているため画面の左右に表示されない部分があることを確認します。

フルードグリッドの実践 CSS(3)
07:28

CSSの設定で固定値でサイズを設定していた部分の値をパーセントなどの相対値で指定し、画面サイズに応じて要素の幅が可変になるように設定します。これでフルードグリッドの学習は終了です。

フルードグリッドの実践 CSS(4)
05:51

ここからレスポンシブWEBデザインに必須の技術の3番目。フルードイメージについて学びます。このレクチャーではまずフルードイメージの概要を説明します。

フルードイメージの概要
05:55

フルードイメージの学習をするためのhtmlファイルを作ります。

フルードイメージの実践 html
06:56

前のレクチャーで制作したhtmlファイルに対応するCSSスタイルシートを書きます。まずheaderの部分までです。

フルードイメージの実践 CSS(1)
06:45

つづいて画像の部分のCSS設定です。この画像が画面サイズに応じて変化するように設定することでフルードイメージの技術を学びます。

フルードイメージの実践 CSS(2)
07:43

ひきつづき画像のCSS設定です。画像の幅と高さを相対値にします。このレクチャーを終了するとフルードイメージの学習も終わりです。これでこのセクションは終了です。

フルードイメージの実践 CSS(3)
03:36
+
CSS3
7 Lectures 39:46

このレクチャーではドロップシャドウをCSSだけでつくる技術を学びます。まずサンプルとなる長方形をページ上に描きます。

Preview 06:54

前のレクチャーで描いた長方形にCSS3の設定でドロップシャドウを作ります。

ドロップシャドウの基本(2)
07:32

ドロップシャドウの応用です。ボックスの内側にシャドウをかけたり、テキストにドロップシャドウを適用する技術を学びます。

ドロップシャドウの応用
02:42

CSS3の注目の機能として次は角丸長方形の描き方です。まず単純な角丸長方形を描きます。

角丸長方形の基本
08:14

つづいて4角の楕円の半径を様々に変えて、複雑な角丸長方形を描きます。

角丸長方形の応用
05:18

3つ目の機能はグラデーションです。先ほど描いた角丸長方形を色で塗りつぶし、さらにグラデーションをかける練習をします。

グラデーションの基本
05:40

さらに複数の中間色を加えたグラデーションや円形のグラデーションについても学びます。

グラデーションの応用
03:26
+
サイトページの制作練習
7 Lectures 42:45

サンプルのページをブラウザで開いて、3つのデバイスサイズでそれぞれレイアウトがどう変化するかを確認します。ここでしっかりデバイスごとの変化を確認しておくことで後の作業効率が大きくちがってきます。しっかり見ておきましょう。

Preview 06:16

これからページを制作する工程を確認しておきます。レスポンシブWEBデザインでは通常のページよりもデバイスによってデザインレイアウトが変化することで多くのケースが出てきます。それらを最初に整理しておくことで作用途中で自分がどこにいるかが分からなくなることがないようにします。

制作の手順
05:59

ページ制作のために必要なファイルとフォルダーを準備します。空白のhtmlファイルとCSSファイルを準備し、練習用に使用する新規のサイトフォルダーを作ってその中に保存します。このファイルがこれから演習を行うためのファイルになります。

ファイルとフォルダーの準備
06:22

htmlファイルのテンプレートをつくります。このレクチャーではどのページでも書かれるhtmlの定型部分を用意したindex.htmlファイルの先頭に書き込みます。

テンプレートの制作(1)
04:56

htmlファイルテンプレートのつづきです。このレクチャーではこのサイトページのブロックごとにタイトルを注釈で記入し、htmlコードを記入する場所を指定しておきます。こうすることで後で作業が混乱しないように整理しておきます。

テンプレートの制作(2)
07:45

つぎはCSSスタイルシートのテンプレートをつくります。このレクチャーではそのうちメディアクエリを使ったテンプレートの整理をしておきます。

テンプレートの制作(3)
07:05

CSSスタイルシートにブロックごとの分割を行います。ここまででテンプレートの制作は完成です。

テンプレートの制作(4)
04:22
+
スマートフォン向けモックアップページの制作
13 Lectures 01:40:40

モックアップページの完成したサンプルを見て確認しておきます。どこまで作りこめばいいのかなどをモックアップページと完成したページを見比べて検討しておきます。

モックアップページの検討
04:50

モックアップページの制作をはじめます。このレクチャーではhtmlのheaderの部分だけをつくります。頭を整理しながら進めましょう。

Preview 07:47

つづいてheader部分のCSSです。このレクチャーではh1を設定します。

header部分のCSS設定(1)
08:38

つづいてulとimgの部分を設定します。これでheader部分のモックアップが完成しますが、」これはスマートフォンと各デバイス共通のみの設定です。この他にさらにタブレットとPC用の設定を後で行うことになります。

header部分のCSS設定(2)
09:51

つぎはmainブロックのhtmlです。mainの終了タグの位置に注意して慎重に作業をしましょう。

main部分のhtmlページ
09:44

mainブロックのCSSの設定をします。このレクチャーではmainとarticleの2つを設定します。ここはスマートフォン向けなので特に難しいところはありません。スペルミスに気を付けて書きます。

main部分のCSS設定(1)
05:30

mainブロックのCSSの設定をつづけます。このレクチャーではh2とimg、pの3つを設定します。これが終わるとmainのブロックのCSSも完成です。

main部分のCSS設定(2)
10:13

mainブロックの次はasideブロックです。この部分は少し複雑なので注意しましょう。このレクチャーではまずhtmlだけを完成させます。

aside部分のhtmlページ
09:16

つぎはasideのCSS設定です。このブロックはinformationとtopicsという2つのsectionで構成されています。この2つはデバイスのサイズによってレイアウトが大きく変化しますが、ここではスマートフォンの設定だけを行います。このレクチャーではasideのうちinformation部分の上のul#snsの設定までを行います。

aside部分のCSS設定(1)
10:35

つぎはul#snsの次のul#guideのCSSです。先のレクチャーのつづきです。

aside部分のCSS設定(2)
04:56

このレクチャーではasideの最後のtopicsのCSS設定です。このレクチャーでasideブロックは完成します。

aside部分のCSS設定(3)
05:04

つぎは最後のnewsブロックとfooterブロックです。この部分は簡単です。このレクチャーではnewsブロックとfooterブロックのhtmlコードを完成させます。

news部分のhtmlページ
04:30

このセクションの最後はnewsブロックとfooterブロックのCSS設定です。この部分はCSSも特に難しいところはありません。これが終わるとスマートフォン向けのモックアップは完成です。

news部分のCSS設定
09:46
+
タブレット端末向けモックアップページの制作
5 Lectures 38:31

このレクチャーではheader部分の設定をします。h1とulの部分を設定してheader部分を完成させます。

header部分のCSS設定
11:14

つぎはコンテンツのブロックに入ります。このレクチャーではcontentsのうちmain部分を完成させます。

contents main部分のCSS設定
06:16

このレクチャーではasideのinformation部分からはじめて、タブレット向けのモックアップを完成させます。

Preview 05:41

ここから最後のPC画面向けのモックアップページの制作に入ります。まずはheader部分からです。

PC向けモックアップ(1)
07:54

aside内のtopicsからはじめて、PC向けのモックアップを完成させます。これでこのセクションは終了です。

PC向けモックアップ(2)
07:26
+
完成版サイトページの制作
11 Lectures 01:22:38

まずは最初のheaderの部分を調整します。このレクチャーではスマートフォン向けのCSS設定だけです。

header部分の調整
04:54

つぎにheader内のナビゲーション部分を完成させます。項目を増やして小さな画像を挿入し、タブレット、PCにも対応するようCSSを完成させます。

header部分の完成
09:27

スマートフォンとタブレット/PCで大きくデザインが変化するグローバルナビゲーションの部分です。この部分はCSSの設定で有用なTipsを多く使います。

グローバルナビの調整(1)
05:11

まずスマートフォン向けのグローバルナビを完成させます。liの設定で項目の並び方を大きく変えるので注意して学習しましょう。

Preview 07:29

つづいてタブレット用、PC用にグローバルナビを調整します。これでグローバルナビの部分は完成です。

グローバルナビの完成
08:52

つぎにmain部分を編集します。ここからコンテンツブロックの編集になります。まず最初にmain部分のhtmlを完成させます。項目を増やし、写真とテキストも挿入します。

main部分のhtml完成
08:46

つづいてmainの部分のCSSを設定します。この部分はモックアップの制作でレイアウトの変更など大きな部分はできているので細かい調整だけで済みます。

main部分のCSS
06:45

mainのつぎはaside部分のhtmlの設定です。この部分はスマートフォンとタブレット用、PC用でそれぞれレイアウトが異なりますが、モックアップでこのしくみはできているので細かい調整が主な作業になります。ただこの部分は小さい写真や画像が多く入るので間違えないように注意して作業しましょう。

aside部分のhtml完成
07:46

同じくaside部分でつぎはCSSの設定です。この部分は画像や写真の点数が多いのと、細かい調整が多くあるのでこのレクチャーではスマートフォン向けのCSSだけを完成させます。

aside部分のCSS(1)
09:52

aside部分のタブレット用、PC用のCSSを完成させます。これで複雑だったaside部分は完成です。

aside部分のCSS(2)
06:13

最後にnews部分のhtmlとCSSを設定します。これで完成です、全体をプレビューして細かい直しをしてサイトを完成させます。

news部分の仕上げとサイトの完成
07:23
About the Instructor
村守 康
4.4 Average rating
351 Reviews
2,874 Students
14 Courses
デザイナー

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