Top Programming BootstrapとDreamweaverで作る - はじめてのレスポンシブWebサイト開発講座
PRO COURSE

BootstrapとDreamweaverで作る - はじめてのレスポンシブWebサイト開発講座

PC、スマホ、タブレット、端末の幅に応じてレイアウトが自動的に変化するレスポンシブなWebサイトを開発します。DreamweaverとBootstrapによるサイト構築が学べます。

DreamweaverとBootstrapで作る
はじめてのレスポンシブサイト

スマホ、タブレットの登場により、Webサイトを制作する際は、PCだけではなくあらゆる端末で正しく表示されるレイアウトが求められるようになりました。

このコースではページ幅に応じて自動的にレイアウトが変わるレスポンシブなWebサイトをDreamweaverとBootstrapを使って制作するWeb制作入門者向けの講座です。

Webデザイン制作会社でアシスタントとして働くための実践的スキルが身につきます。


このコースの特徴

  • CSSとBootstrapについて重点的に解説した初心者向けのWeb制作講座です。
  • 現役のデザイナーがページを制作していく過程をマウスの動き1つまで丁寧に解説しています。
  • 各章にダウンロード資料があり、実際にコードを書きながら学ぶことができます。

開発環境について

Windows, MacなどOSを問わず開発できます。
Dreamweaverが使える環境が必要です。動画内ではDreamweaver CC 2018を使っています。


このコースを受講して、HTML、CSS、Bootstrap、Dreamweaverを駆使したWeb制作の実践的スキルを身につけましょう!

About the Instructor

ムラモリ コウ
株式会社テクセル 代表

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

See more

Course content

Total 7 hours 44 minutes
Preview You can preview lectures with this label
はじめに
1 ダウンロード資料 1分00秒
2 はじめに Preview 3分11秒
3 Webページのしくみ 5分48秒
4 サイトとWebサーバー 4分15秒
5 HTML文書の編集方法 6分39秒
6 HTMLとCSSの実際 6分22秒
7 CSSについて 4分23秒
8 CSSの中身 7分38秒
文字列の入力
9 ダウンロード資料 1分00秒
10 サイトの設定 5分51秒
11 新規ドキュメントの作成 6分39秒
12 見出しの挿入 5分19秒
13 本文の挿入 5分46秒
14 要素とタグ 5分33秒
15 グループ化 6分50秒
16 HTMLの構造 6分39秒
17 HEADの要素 5分26秒
ページのデザイン - CSSについて学ぶ
18 ダウンロード資料 1分00秒
19 スタイルシートの書き方 Preview 6分54秒
20 見出し文字の編集 7分43秒
21 文字フォントの設定 4分55秒
22 CSSの文法 6分50秒
23 レイアウトの編集 6分37秒
24 画像の挿入 8分38秒
25 記事の複製 6分52秒
26 記事の編集 6分36秒
27 クラスの設定 (1) 5分31秒
28 クラスの設定 (2) 4分23秒
新規ページの制作
29 ダウンロード資料 1分00秒
30 ボックスモデル 6分45秒
31 グリッドシステム 5分29秒
32 完成したサンプルを見る Preview 5分18秒
33 サイトの設定 7分39秒
34 新規ドキュメントの作成 6分06秒
35 スタイルシートのリンク 3分21秒
36 ヘッダー、コンテンツ、フッター 3分32秒
ヘッダーとフッターの制作
37 ダウンロード資料 1分00秒
38 ナビゲーションバーの挿入 6分22秒
39 ナビゲーションバーの調整 8分02秒
40 ナビゲーションバーのソースコードを見る 7分04秒
41 メインイメージ画像の配置 5分54秒
42 Bootstrapコンポーネントのクラス名 5分25秒
43 フッターの挿入 7分51秒
44 フッターの外枠を作る 5分32秒
45 コピーライト 5分47秒
46 セレクタ 6分48秒
コンテンツ部分の制作
47 ダウンロード資料 1分00秒
48 画面幅の設定 5分35秒
49 記事部分の制作 6分25秒
50 格段の横幅を変更する 5分08秒
51 見出しh2の編集 9分28秒
52 二段組の記事 9分21秒
53 記事を増やす 9分32秒
SNSリンク部分の制作
54 ダウンロード資料 1分00秒
55 SNSリンクの作成 9分40秒
56 liタグ部分の作成 12分27秒
57 メニュー部分のCSS設定 7分13秒
58 SNSリンクの幅 7分52秒
59 NEWSの挿入位置 4分30秒
60 NEWSのHTMLコード 12分13秒
61 NEWSのCSS設定 8分54秒
62 Dreamweaver, Bootstrap 5分40秒
仕上げ
63 ダウンロード資料 1分00秒
64 メディアクエリ 2分23秒
65 極小画面のメディアクエリ 8分16秒
66 小画面のメディアクエリ 5分29秒
67 スタイルシートの整理 6分24秒
68 ヘッダーの仕上げ 8分31秒
69 横幅を1200pxに固定する方法 5分53秒
70 モバイルファーストとは 2分59秒
71 グローバルナビのHTML 6分51秒
72 グローバルナビのCSS (1) 9分15秒
73 グローバルナビのCSS (2) 6分14秒
74 記事部分の仕上げ 8分39秒
75 SNSリンクの仕上げ (1) 6分06秒
76 SNSリンクの仕上げ (2) 6分57秒
77 全体の仕上げ 10分20秒

Ratings and reviews

4.4
5 reviews
5 stars
60%
4 stars
20%
3 stars
20%
2 stars
0%
1 stars
0%
じっくり作り込まれていて、非常にわかりやすかったです
See more

Related Courses