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秒 |