Bootstrap3+Dreamweaver(CC2018)+HTML5+CSS3 レスポンシブWEBデザイン実践コース
4.1 (212 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,163 students enrolled

Bootstrap3+Dreamweaver(CC2018)+HTML5+CSS3 レスポンシブWEBデザイン実践コース

Bootstrap、Dreamweaver、HTML5、CSS3を駆使してレスポンシブWEBサイトを超効率的に作ろう。手を動かして楽しみながら身につく実践的WEBサイト作成力。
Bestseller
4.1 (212 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,163 students enrolled
Created by 村守 康
Last updated 6/2018
Japanese
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • WEBデザイン会社に入社して、すぐにアシスタント業務を行えるレベルのスキルが身につきます。
  • ウエブサイトを開発し、公開できる力が身につきます。
  • WEBページデザイナーとして独立できる基礎が身につきます。
  • htmlとCSSのコーディングでBootstrap3搭載のレスポンシブなWEBページが作成できます。
Course content
Expand all 69 lectures 07:35:46
+ はじめに
7 lectures 38:13

コースをはじめる前に練習素材をダウンロードしてパソコンに保存しておいてください。練習素材は「Sozai.zip」の名前でこのページ左上の「リソース」からダウンロードできます。zipファイルに圧縮されているので解凍してお使いください。

「レスポンシブWEBデザイン」とは何か、レスポンシブWEBデザインでページを制作するとどんなメリットがあるのかを説明しています。

Preview 03:10
Section1-2  WEBページのしくみ
05:47

サイトを見る人とWEBサーバー、サイト制作者の関係を説明します。WEBページがどんなしくみでいつでも見られるのか、制作者はサイトをどう管理するのかを説明しています。

Section1-3 サイトとWEBサーバー
04:14

実際にDreamWeaverを使ってサンプルのhtml文書を編集してみて、html文書を制作する方法の概要を学びます。

Section1-4  html文書の編集方法
06:39

html文書がどんな構造で書かれているのかを実際のソースコードを見ながら説明します。html文書がタグを基本にして書かれていることを学びます。

Section1-5 htmlとCSSの実際
06:22

同じようにCSSについて解説します。CSSがどんな働きをしているのか、htmlとどんな関係があるのかを実際に「実験」してみて学びます。

Section1-6  CSSについて
04:23

CSSスタイルシートのファイルをエディターで開いて、その内容と構造を見ます。CSSのルールの概要を理解します。

Section1-7  CSSの中身
07:38
+ 文字列の入力
8 lectures 47:56

ページを作る前準備の作業として、まずサイトを設定します。DreamWeaverを使って、ローカルサイトを設定します。サーバー用のリモートサイトは今回は設定しません。

Section2-1  サイトの設定
05:50

つぎは新規ドキュメントの作成です。ここからいよいよページの制作です。 DreamWeaver上で新規ドキュメントを作成し、ローカルサイト内に保存します。CSSスタイルシートも準備し、新しく作ったドキュメントにリンクさせて保存します。

Section2-2  新規ドキュメントの作成
06:38

それではいよいよDreamweaverを使って実際の制作の作業をはじめましょう。まず練習のために簡単な記事から作ってみます。最初は見だし(タイトル)をひとつページの中に作ってみます。

Section2-3  見だしの挿入
05:19

次は本文です。段落要素を使って、本文をページの中に挿入します。挿入ができたらこれをhtmlソースコードで確認します。

Section2-4  本文の挿入
05:45

ソースコードで内容を確認し、簡単なhtmlの文法を説明します。タグと要素について学びます。

Section2-5  要素とタグ
05:32

複数の要素をグループ化する方法を学びます。最初にDreamWeaverでやってみて、同じことをソースコード上でもういちどやります。ソースコードで簡単にできることを体験します。

Section2-6  グループ化
06:49

ソースコードでhtmlの構造について学びます。特にページには表示されないが、html文書には必須の内容について詳しく説明しています。

Section2-7  HTMLの構造
06:38

HTMLソースコードを書くうえで必須となるhead要素について説明します。head要素内のタイトル要素、meta要素、リンク要素の書き方、順番などについて説明しています。

Section2-8  HEAD要素
05:25
+ ページのデザイン(CSSの学習)
10 lectures 01:04:54

CSSの基本について解説しています。スタイルシートがどんな仕組みで出来ているか、htmlのタグとどんな関係があるかなど基礎についての学習です。

Preview 06:54

このレクチャーではサンプルのうち見出しに使ったh1タグを例にして、CSSデザイナーパネルで文字の大きさを変える練習をします。セレクター、プロパティ、値をデザイナーパネルから編集することで、パネルの使い方を学びます。

Section3-2  見だし文字の編集
07:42

同じようにして今度は同じh1要素の文字フォントを設定します。さらに設定後のスタイルシートの内容を確認して、セレクター、プロパティ、値がどのようにスタイルシートに書き込まれているかという文法についても学びます。

Section3-3  文字フォントの設定
04:55

このレクチャーではCSSの文法について詳しく学びます。スタイルシートを見ながら、セレクター、プロパティ、値を記述するルールについての学習です。

Section3-4  CSSの文法
06:49

次は同じh1要素で、文字だけでなく背景色を変更します。さらに見出しの文字を見出しの枠から離すpaddingや上下の他の要素との間を開けるmarginを使ってh1要素の外観を変える学習をします。

その後、結果をスタイルシートのコードを確認して解説し、スタイルシート記述の文法を学習します。

Section3-5  レイアウトの編集
06:37

このレクチャーでは画像を挿入する練習をします。Bootstrapを使って画面サイズにレスポンシブに対応する画像挿入の方法を学びます。

画像の挿入を通して、サイト内に素材を保存する理由を学びます。

Section3-6  画像の挿入
08:37

記事の文章をサンプルのものに変更します。つづいて、写真と記事の文章をひとまとめにしたグループを作ります。さらにグループになったひとつの記事をコピーペーストして、もうひとつ同じ記事を加えます。これはDreamWeaverのDOMパネルを使って行います。

Section3-7  記事の複製
06:51

つぎに複製した記事の内容を変更します。今度は画像と文章の内容の両方をソースコードを編集して行います。DreamWeaverをつかわずにソースコードを使った方がはるかに簡単にできることを実感します。

Section3-8  記事の編集
06:36

2本の記事のそれぞれの見出しの背景色を変えます。このとき同じh1のセレクタでは片方を特定できないので、まずそれぞれの記事にクラスで名前をつけます。

Section3-9  クラスの設定(1)
05:31

つづいて先のレクチャーでそれぞれの記事に付けられたクラス名を使って、見出しの背景をそれぞれちがった色に設定します。この作業を通じて、クラスが何故必要なのかを理解します。

これでこのセクションは終了です。

Section3-10  クラスの設定(2)
04:22
+ 新規ページの制作
7 lectures 38:05

ボックスモデルはhtmlとCSSでページを制作する基本になる考え方です。今後CSSの設定を行う上で理解しておかなければならないページの構造です。説明だけで作業をしないのでつい集中力を落としがちですが、しっかり聞いて理解しておきましょう。

Section04-1: ボックスモデル
06:44

グリッドシステムはレスポンシブWEBデザインでページを作るときの基礎です。とくにBootstrapでのページの制作には理解しておかなければいけない仕組みです。

Section04-2: グリッドシステム
05:28

これから制作するページの完成したサンプルを見て、各部分の検討をします。デバイスによって画面サイズが変化したときに各要素がどう変化するかなどをきちんと理解しておきます。

Preview 05:18

つづいて実際にDreamWeaverを起動し、新しいサイトを定義します。

Section04-4: サイトの設定
07:39

つづいて新規ドキュメントを作成しします。新規ドキュメントの作成ではBootstrapのページタイプを選び、段組の設定を行います。今回のサンプルではデフォルトの値でページを設定します。その上でindex.htmlの名前でサイト内に保存します。

Section04-5: 新規ドキュメントの作成
06:05

さらに新しく空白のスタイルシートを作成し、さきほどつくったindex.htmlのページにリンクさせます。

Section04-6: スタイルシートのリンク
03:20

つづいて制作するページの順番について検討します。このコースでは難易度から考えて、ヘッダー、フッターの順に制作し、最後にコンテンツの部分を作ることにします。

Section04-7: ヘッダー、コンテンツ、フッター
03:31
+ ヘッダーとフッターの制作
9 lectures 58:40

このレクチャーではナビゲーションバーをページに挿入します。挿入後ソースコードで正しいクラス名が入力されているか確認します。

Section05-1: ナビゲーションバーの挿入
06:22

挿入したナビゲーションバーから今回のページでは使用しないパーツを削除して必要な部分だけを残します。

Section05-2: ナビゲーションバーの調整
08:01

挿入したナビゲーションバーのソースコードを確認し、DOMパネルで要素とソースコードを参照してbootstrapのナビゲーションバーの構造を見ます。

Section05-3: ナビゲーションバーのソースコードを見る
07:03

つづいてナビ-ションバーの下にメインイメージ画像を挿入します。Bootstrapのレスポンシブイメージとして配置し、画面幅に応じて大きさが可変になるようにします。

Preview 05:53

ソースコードを見て、Bootstrapのコンポーネントに自動的に付けられるクラス名について説明します。Bootstrapではクラス名で段組の調整などをコントロールしているので、クラス名を知っていればDreamWeaverなしにソースコードで入力してページをつくることも可能です。

Section05-5: Bootstrapコンポーネントのクラス名
05:25

ページ下のフッター部分を制作します。背景がページ一杯に広がるようにBootstrapコンポーネントと通常のdiv要素を組み合わせて設定します。

Section05-6: フッターの挿入
07:51

挿入したdiv要素にクラス名を付け、そのクラス名を使ってフッター部分の横幅いっぱいに広がった背景にスタイルシートで背景色を設定します。

Section05-7: フッターの外枠を作る
05:31

最後にフッターをもう一行追加し、コピーライトを書きます。スタイルシートで背景色を黒に変え、テキストをセンタリングし、文字色を白にするなどの設定をします。これでこのセクションの演習は終わりです。

Section05-8: コピーライト
05:46

ここではCSSスタイルシートで書くセレクタについて説明します。セレクタはCSSで設定を加えたい要素を正確に指定するためのものです。ここではその書き方を説明しています。

Section05-9: セレクタ
06:48
+ コンテンツ部分の制作
6 lectures 45:25

このレクチャーではサンプルを見ながら制作部分を確認します。

つぎにコンテンツ部分の最初のパーツであるグローバルナビゲーションの部分を制作します。ただグローバルナビの部分はBootstrapではなくCSSを多用してつくるので仕上げは後周りにして、このレクチャーではスペースだけを確定させるためにdiv要素のみを挿入し、テキストだけを入れておきます。

Preview 05:34

次はナビゲーションバーの下の記事部分です。この行は中画面以上では右側に縦長のナビゲーションがあり、左側の記事の部分と合わせて2段組になっています。そして記事の部分もさらに内部で左に写真、右に文章の2段組に分けられています。この段組のシステムを可能にするBootstrapコンポーネントを挿入します。

Section06-2: 記事部分の制作
06:25

段組を挿入したら、つぎにそれぞれの段の幅を変更します。挿入時は等分の大きさで分割されているので、それをサンプルと同じ大きさに変更します。bootstrapコンポーネントの再設定の方法をDreamWeaverを使う場合と、ソースコードで行う方法の2つを解説します。

Section06-3: 各段の横幅を変更する
05:07

見だしの編集をします。文字の大きさを変え、文字の下にパディングで空きを取り、罫線を引いて、さらにその下にマージンを取ります。CSSで行うタイトルの装飾では使用頻度の多い設定ですが、スタイルシートで直接行います。

Section06-4: 見出しh2の編集
09:27
Section06-5: 二段組みの記事
09:20

見出しと写真、文章でつくられた1本の記事をひとつのグループにします。グループ化したらそのグループをコピーペーストして、記事の数を3本にします。

グループ化した記事のセットにクラス名をつけ、スタイルシートで編集をします。他の記事との間に間隔を取り、罫線を引いてデザインします。

これでこのセクションは終了です。

Section06-6: 記事を増やす
09:32
+ SNSリンク部分の制作
8 lectures 01:08:22

このレクチャーではSNSリンク部分のうち4つの画像の配置を行います。画像を4つ横並びに配置する方法です。

Section07-1: SNSリンクの作成
09:39

つぎは2行目以降のliです。この部分は左に小さな画像と右に文字列というレイアウトでliを構成し、そのliを4行並べて新にulを作ります。このレクチャーではそのうちのhtml部分を制作します。

Section07-2: li部分の作成
12:26

このレクチャーではSNSリンクメニューのCSSを設定します。画像とテキストを横並びにレイアウトする方法と、メニュー部分全体にCSS3で角丸のボーダーを引く方法を学びます。

Preview 07:12

角丸のボーダーができたら次にこのメニュー部分の横幅が無制限に大きくならないように、最大幅を設定します。CSSスタイルシートでmax-widthというプロパティを使い、要素の幅が設定した値以上に大きくならないように制限する方法を学びます。

Section07-4: SNSリンクの幅
07:51

つぎに下のNEWS部分を挿入します。このときNEWS部分の挿入位置には2つの選択肢があり、それによって画面が小さくなったときのページのレイアウトが変わることに注意します。このサンプルではNEWS部分が小画面でも最下部に来るようにします。

Section07-5: NEWSの挿入位置
04:29

このレクチャーではNEWS部分のhtmlを書きます。これまで練習してきたことを使えば簡単にできますが、量が多いので要注意です。

Section07-6: NEWSのhtmlコード
12:12

最後にNEWS部分のCSSを設定します。グループ化や見出しの文字の設定、罫線を引くことなどこれまでの作業の復習です。

このレクチャーが終わればこのセクションでの作業は終わりです。

Section07-7: NEWSのCSS設定
08:54

このレクチャーでは息抜きのつもりでSection08-4 DreamWeaver、Bootstrap、HTML、CSSの関係について話します。なぜDreamWeaverを使うのか、Bootstrapを使うメリットは、などこれまでの学習を整理するつもりで説明しました。コーヒーブレイクのつもりで手を止めて聞いてください。

Section07-8: DreamWeaver、Bootstrap、HTML、CSS
05:39
+ 仕上げ
14 lectures 01:34:11

まず最初はメディアクエリです。このレクチャーではメディアクエリの説明をします。メディアクエリとはどんな仕組みなのか、なぜメディアクエリが必要なのかについての解説です。説明だけで手を動かす作業はありませんが、これが分からないと先には進めません。

Section08-1: メディアクエリ
02:23

つづいてスタイルシートにメディアクエリを書く準備をします。極小画面のメディアクエリを例にスタイルシートに注釈を入れる方法を学び、注釈とメディアクエリのブレークポイントを書いたスタイルシートの書式をつくります。メディアクエリでレスポンシブWEBデザインがどう実現されるかを学習します。

Section08-2: 極小画面のメディアクエリ
08:15

つづいて小画面、中画面、大画面のメディアクエリを書き、スタイルシートにすべてのデバイスのCSS設定をコーディングする場所を書いて書式を完成させます。

Section08-3: 小画面のメディアクエリ
05:28

これまでスタイルシートに書いてきた設定を、メディアクエリを加えたスタイルシートに整理してコーディングします。メディアクエリではCSSの設定を書く位置は明確に決まっているので、そのルールに従って整理して書き込みます。

Preview 06:23

ここからページの制作をつづけます。まずヘッダー部分の調整です。ヘッダーの部分ではまずロゴの部分をテキストから画像に変えます。画像に変えると余計な空白が発生したりしますが、この原因とそれを取る方法を学びます。

Section08-5: ヘッダーの仕上げ
08:30

ページの内容を横幅1200pxまでに設定し、画面サイズが1200px以上になった場合も内容の拡大表示をせず、左右に余白を取って内容を中央配置するようにCSSのメディアクエリで設定します。

Section08-6: 横幅を1200pxに固定する方法
05:53

モバイルファーストの考え方について解説しています。メディアクエリはなぜ小さな画面から大画面へと設定するのかなど、作業の内容にも関係する大切な考え方です。

Section08-7: モバイルファーストとは
02:59

つぎはグローバルナビの部分です。この部分はBootstrapを使わずすべてCSSで制作するのでCSSの高い技術が必要になるため、ここまで制作を先送りしてきましたがここで完成させます。段組をレスポンシブに変化させるなどの技術をCSSで行う方法を学びます。このレクチャーではこのうちhtmlの部分を完成させます。

Section08-8: グローバルナビのhtml
06:51

つづいてグローバルナビのCSSの設定です。画面幅によって段組をCSSで変化させる方法を学びます。

Section08-9: グローバルナビのCSS(1)
09:15

グローバルナビのCSSの設定をつづけます。マウスオンで文字色をCSSの設定で変化させます。

Section08-10: グローバルナビのCSS (2)
06:13

コンテンツのうちの記事の部分を仕上げます。段組の設定はBootstrapでできているので、細かい装飾が中心です。写真に角丸のついたボーダーをつけ、右側のテキストとの間隔を調整します。

Section08-11: 記事部分の仕上げ
08:39

コンテンツ右側のSNSリンクを完成させます。このレクチャーでは上のsnsのロゴマークの間隔と中央配置をCSSで調整し、下線を引きます。

Section08-12: SNSリンクの仕上げ (1)
06:06

SNSリンク部分の下の写真とテキストの隣り合ったliの部分を調整します。ここではカラム落ちで崩れたレイアウトを修正する技術を学びます。各liの下線を引いてこの部分は完成です。

Section08-13: SNSリンクの仕上げ (2)
06:56

最後に全体の仕上げをします。マージンの設定や画面幅を変えたときに起きる不自然なレイアウトの変化、また見落としていた細かい点を修正してページを完成させます。

Section08-14: 全体の仕上げ
10:20
Requirements
  • 初歩的なパソコンの知識
  • Dreamweaverをパソコンにインストールしておいてください。
  • それ以外は必要ありません。
Description

 このコースはHTML、CSS、Bootstrap、DreamWeaverを駆使してひとつのレスポンシブWEBデザインのページを制作する講座です。

 HTML、CSS、Bootstrap、DreamWeaverの機能のうち、最も効率的に作業できる機能を使って必要なパートを制作して、実践的なページ制作を学びます。どれかひとつの機能を徹底してマスターしたい方には適しません。実践的で現場で通用する力を学ぶ講座です。

 HTML、CSS、Bootstrap、DreamWeaverそれぞれについて身に付けられる力は基礎のレベルを十分達成しています。スキルとしてWEB制作会社でアシスタント業務をすぐにこなせる程度のレベルは完全に得られます。特に、CSS、Bootstrapについては詳しく解説しています。

 全編を手を動かして作品を制作しながら解説しているので、理論や機能を単独で学ぶ講座に比べ、飽きることがありません。

HTML、CSS、Bootstrap、DreamWeaveを駆使して現場の制作力を身に付けよう

・HTML、CSS、Bootstrap、DreamWeaveについて必要な知識はすべて基本からていねいに分かりやすく説明しているので、この講座だけで初めての方でも基礎力は十分身につきます。
・「実際に手を動かしてコードを書き」、実践的な指導で即戦力がつきます。 
・解説はすべて動画で行い、現役のデザイナーがページを制作する過程をマウスの動きひとつまで収録しています。
・ナレーション付きでわかりやすく解説しています。
・必要な画像素材など作業に必要な素材はすべて添付されています。
・CSSとBootstrapについては、特に丁寧に解説しています。



WEB業界で活躍できる現場の力を確実に身につけます

このコースを終了するとWEBデザイン制作会社でアシスタントとしてすぐに業務につけるレベルのスキルが身につきます。    



学習内容

8つのセクション、69本のビデオ、合計8.5時間の講座で集中して学べます。

Who this course is for:
  • DreamWeaver、bootstrap3、html、CSSを学びたい方
  • WEBデザイナーを目指す方
  • デザイン会社に勤務したい方
  • 自分でサイトページを制作したい事業者の方
  • htmlとCSS、Bootstrapをソースコードで学びたい方
  • フリーのWEBデザイナーとして独立したい方