Copy Link
PRO COURSE
HTML5+CSS3 フロントエンド開発マスター講座
最新のHTML5とCSS3を基礎から完全にマスターすることを目的に作られたコースです。
HTML5、CSS3を駆使して
グリッドレイアウト & レスポンシブなページを作ろう
最新のHTML5とCSS3について学び、グリッドレイアウトとレスポンシブデザインを適用させたページを作れるようになるプログラミング講座です。実際にいくつものページを制作し、実践的なコーディングスキルを習得できます。
コーディングは初めてという方でも、確実にHTML5とCSS3の技術を身につけ、Webサイトを公開することができます。
このコースで学べること
- CSS Gridのスキルが確実に身につきます
- レスポンシブデザインであらゆるデバイスに対応したページを作る力が身につきます
こんな方にオススメ
- HTMLとCSSを基礎から確実に学びたい方
- Webサイト開発を我流ではなく正しく体系的に学び直したい方
- 最新のCSS Gridを理解しWebサイト制作に活かしたい方
- 手を動かして実践的な制作演習で達成感と自信を持てるコース学習をしたい方
この講座で、HTML5とCSS3の最新技術を確実に身につけましょう！
Course content
Total
17 hours 36 minutes
| Section 1：WEBサイトのしくみ | ||||
| 1 | ダウンロード資料01 | 1分00秒 | ||
| 2 | 準備と基礎知識 | 8分01秒 | ||
| 3 | サイトとWEBサーバー | 3分57秒 | ||
| 4 | HTMLの編集 | 8分20秒 | ||
| 5 | CSSファイルの役割 | 4分05秒 | ||
| 6 | CSSの中身 | 6分18秒 | ||
| 7 | HTMLとCSSの関係 | 4分12秒 | ||
| Section 2：HTMLとCSSの基礎 | ||||
| 8 | ダウンロード資料02 | 1分00秒 | ||
| 9 | エディターの準備 | 6分09秒 | ||
| 10 | タグと要素 | 8分17秒 | ||
| 11 | HTMLの書き方（１） | 5分30秒 | ||
| 12 | HTMLの書き方（２） | 7分18秒 | ||
| 13 | CSSの書き方 | 8分45秒 | ||
| 14 | HTMLとCSSの関連付け | 6分26秒 | ||
| 15 | その他のCSSプロパティ | 7分36秒 | ||
| 16 | ボックスモデル | 7分58秒 | ||
| Section 3：HTMLとCSSの文法 | ||||
| 17 | ダウンロード資料03 | 1分00秒 | ||
| 18 | 制作の準備 | 3分09秒 | ||
| 19 | HTMLの定型 | 9分28秒 | ||
| 20 | HTMLコードの記述 | 6分59秒 | ||
| 21 | id属性とclass属性 | 8分09秒 | ||
| 22 | 新しいタグ | 10分39秒 | ||
| 23 | containerのCSS設定 | 6分34秒 | ||
| 24 | 仕上げと完成 | 10分13秒 | ||
| 25 | セレクターの書き方 | 8分58秒 | ||
| Section 4：CSS Grid Layoutの基本 | ||||
| 26 | ダウンロード資料04 | 1分00秒 | ||
| 27 | 学習の準備 | 6分36秒 | ||
| 28 | HTMLのコード | 10分27秒 | ||
| 29 | CSSの設定 (1) | 6分41秒 | ||
| 30 | CSSの設定 (2) | 9分57秒 | ||
| 31 | HTMLのコード | 8分48秒 | ||
| 32 | CSSのコード (1) | 8分03秒 | ||
| 33 | CSSのコード (2) | 7分25秒 | ||
| 34 | 少し進んだグリッドレイアウト | 5分45秒 | ||
| 35 | HTMLのコード | 8分02秒 | ||
| 36 | レイアウトの簡略化 | 3分36秒 | ||
| Section 5：iPadPro サイズページの制作 | ||||
| 37 | ダウンロード資料05 | 1分00秒 | ||
| 38 | 概要 | 5分48秒 | ||
| 39 | ページレイアウト | 5分58秒 | ||
| 40 | HTMLのコード(1) | 7分37秒 | ||
| 41 | HTMLのコード(2) | 8分15秒 | ||
| 42 | containerのCSS | 7分51秒 | ||
| 43 | headerのGrid Layout | 7分29秒 | ||
| 44 | mainのCSS設定 | 9分14秒 | ||
| 45 | SNSとfooterのCSS設定 | 13分46秒 | ||
| 46 | headerの詳細設定(1) | 10分36秒 | ||
| 47 | headerの詳細設定(2) | 7分08秒 | ||
| 48 | メインビジュアルのCSS | 4分25秒 | ||
| 49 | 写真の均等配置 | 9分28秒 | ||
| 50 | 記事本文のCSS | 14分41秒 | ||
| 51 | SNSのCSS | 6分19秒 | ||
| 52 | footerのCSS | 13分14秒 | ||
| 53 | リンクの設定(1) | 11分01秒 | ||
| 54 | リンクの設定(2) | 7分48秒 | ||
| 55 | WEBフォントの準備 | 10分09秒 | ||
| 56 | WEBフォントの適用 | 9分50秒 | ||
| Section 6：iPhoneサイズページの制作 | ||||
| 57 | ダウンロード資料06 | 1分00秒 | ||
| 58 | 概要 | 5分19秒 | ||
| 59 | Wireframeの準備 | 5分55秒 | ||
| 60 | サイトの全体像 | 4分50秒 | ||
| 61 | containerの設定 | 10分30秒 | ||
| 62 | 各要素の設定(1) | 7分03秒 | ||
| 63 | 各要素の設定(2) | 10分00秒 | ||
| 64 | 仕上げ | 11分24秒 | ||
| Section 7：レスポンシブWEBデザインの概要 | ||||
| 65 | ダウンロード資料07 | 1分00秒 | ||
| 66 | レスポンシブWEBデザインの概要 | 4分51秒 | ||
| 67 | レスポンシブの理論 | 7分37秒 | ||
| 68 | メディアクエリの役割 | 5分43秒 | ||
| 69 | HTMLの記述 | 9分25秒 | ||
| 70 | iPhoneサイズのCSS | 10分04秒 | ||
| 71 | iPadのCSS | 10分38秒 | ||
| 72 | PCサイズのCSS | 9分27秒 | ||
| 73 | Fluid Grid(1) HTML | 13分49秒 | ||
| 74 | Fluid Grid(2) CSS | 9分54秒 | ||
| 75 | Fluid Grid(3) CSS | 9分46秒 | ||
| 76 | Fluid Image(1) HTML | 8分33秒 | ||
| 77 | Fluid Image(2) CSS | 12分16秒 | ||
| 78 | Fluid Image(3) CSS | 7分37秒 | ||
| Section 8：Mejiroサイトのレスポンシブ化 | ||||
| 79 | ダウンロード資料08 | 1分00秒 | ||
| 80 | このセクションでやること | 6分25秒 | ||
| 81 | iPhoneサイズのCSS設定(1) | 5分28秒 | ||
| 82 | iPhoneサイズのCSS設定(2) | 8分41秒 | ||
| 83 | iPhoneサイズの完成 | 11分32秒 | ||
| 84 | iPadサイズのCSS設定(1) | 8分28秒 | ||
| 85 | iPadサイズのCSS設定(2) | 9分12秒 | ||
| 86 | iPadサイズのCSS設定(3) | 10分19秒 | ||
| 87 | iPadサイズのCSS設定(4) | 7分07秒 | ||
| 88 | iPadサイズの仕上げ | 8分25秒 | ||
| 89 | PCサイズの仕上げ | 10分46秒 | ||
| Section 9：indexページの制作(1) | ||||
| 90 | ダウンロード資料09 | 1分00秒 | ||
| 91 | サイトの構成 | 7分20秒 | ||
| 92 | indexページの内容 | 6分07秒 | ||
| 93 | html, CSSファイルの準備 | 8分05秒 | ||
| 94 | XDを使った画像の書きだし(1) | 7分56秒 | ||
| 95 | XDを使った画像の書きだし(2) | 6分00秒 | ||
| 96 | HTMLへの原稿入力 | 6分48秒 | ||
| 97 | navのHTMLとCSSコード | 11分09秒 | ||
| 98 | nav ulとliのCSS設定 | 9分41秒 | ||
| 99 | 「最新の目撃情報」のHTML | 10分35秒 | ||
| 100 | 最新の目撃情報のCSS(1) | 8分57秒 | ||
| 101 | 最新の目撃情報のCSS(2) | 8分41秒 | ||
| 102 | 「野鳥観察会」のHTML | 12分22秒 | ||
| 103 | 「野鳥観察会のお知らせ」CSS(1) | 7分14秒 | ||
| 104 | 「観察会のお知らせ」CSS(2) | 6分10秒 | ||
| 105 | iPadサイズの設定(1) | 6分49秒 | ||
| 106 | iPadサイズの設定(2) | 10分23秒 | ||
| 107 | iPadサイズの設定(3) | 11分59秒 | ||
| 108 | 「観察記録」html入力 | 11分50秒 | ||
| 109 | 「観察記録」CSS設定(1) | 8分04秒 | ||
| 110 | 「観察記録」CSS設定(2) | 6分31秒 | ||
| Section 10：indexページの制作(2) | ||||
| 111 | ダウンロード資料10 | 1分00秒 | ||
| 112 | HTMLソースの準備(1) | 12分12秒 | ||
| 113 | HTMLソースの準備(2) | 7分08秒 | ||
| 114 | CSS Stylesheet (1) | 6分53秒 | ||
| 115 | CSS Stylesheet (2) | 9分46秒 | ||
| 116 | CSS Stylesheet (3) | 10分36秒 | ||
| 117 | チェックと修正 | 10分25秒 | ||
| Section 11：contactページの制作 | ||||
| 118 | ダウンロード資料11 | 1分00秒 | ||
| 119 | 送信機能 | 3分36秒 | ||
| 120 | サイトの準備 | 9分55秒 | ||
| 121 | htmlのコーディング | 7分46秒 | ||
| 122 | CSS stylesheet | 10分45秒 | ||
| 123 | 送信のための部品 | 4分55秒 | ||
| 124 | 送信用部品の配置 | 7分51秒 | ||
| 125 | formタグの属性設定 | 5分57秒 | ||
| 126 | inputタグの属性設定 | 6分36秒 | ||
| 127 | textareaの設定 | 12分14秒 | ||
| 128 | iPadサイズの設定 | 8分24秒 | ||
| Section 12：野鳥観察会ページの制作 | ||||
| 129 | ダウンロード資料12 | 1分00秒 | ||
| 130 | ページ内容の確認 | 8分09秒 | ||
| 131 | htmlのコーディング(1) | 7分48秒 | ||
| 132 | htmlのコーディング(2) | 9分54秒 | ||
| 133 | iPhoneのCSS (1) | 7分34秒 | ||
| 134 | iPhoneのCSS (2) | 10分17秒 | ||
| 135 | iPadのCSS | 11分08秒 | ||
| 136 | リンクの設定 (1) | 9分36秒 | ||
| 137 | リンクの設定 (2) | 7分59秒 | ||
Price (Tax included)
$250.99
30-day money-back guarantee
17h 36m video lectures included in this course.
Full lifetime access. Pay once, get access forever.
Share and Earn
