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制作の実践的スキルを身につけましょう！
Course content
Total
7 hours 44 minutes
Preview
You can preview lectures with this label
| Section 1：はじめに | ||||
| 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 | ||
| Section 2：文字列の入力 | ||||
| 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 | ||
| Section 3：ページのデザイン - 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 | ||
| Section 4：新規ページの制作 | ||||
| 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 | ||
| Section 5：ヘッダーとフッターの制作 | ||||
| 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 | ||
| Section 6：コンテンツ部分の制作 | ||||
| 47 | ダウンロード資料 | 1:00 | ||
| 48 | 画面幅の設定 | 5:35 | ||
| 49 | 記事部分の制作 | 6:25 | ||
| 50 | 格段の横幅を変更する | 5:08 | ||
| 51 | 見出しh2の編集 | 9:28 | ||
| 52 | 二段組の記事 | 9:21 | ||
| 53 | 記事を増やす | 9:32 | ||
| Section 7：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 | ||
| Section 8：仕上げ | ||||
| 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
じっくり作り込まれていて、非常にわかりやすかったです
See more
Price (Tax included)
$107.99
30-day money-back guarantee
7h 44m video lectures included in this course.
Full lifetime access. Pay once, get access forever.
Share and Earn
