Summary Instructor Course content Review
Sign in Sign up
Top Design 未経験からプロのWebデザイナーに！ 450レッスン完全マスターコース
PRO COURSE

未経験からプロのWebデザイナーに！ 450レッスン完全マスターコース

Webデザイナーを目指す方の為の、Photoshop、Webデザイン、HTML、CSS、コーディングの5講座が全てセットになったコースです。全ての講座に実際に使用するデータ付き。
139
Instructor: NESTonline
NESTonline

合計40時間以上のレッスンで必要な知識を全て網羅
超実践的Webデザイナー養成講座

最近よく耳にする、WebデザイナーやWeb制作、コーディングといった仕事。

これからの時代、まだまだWeb関連の仕事は耐えることはなく、スキルと経験を積めばフリーランスで活躍することも可能です。

興味はあるけれど、プログラミングやWebの知識が全くない。
未経験からでも始められるのかな？

このコースは、そんな方々へ向けてWeb制作に必要なこと全てを基礎からレクチャー。そして段階ごとに課題をこなしていただき、最終的には１つのWebサイトを一緒に作っていただきます。
「学びながら作れる」ので、受講が終わった頃にはすぐに実践で使えるスキルが身に付きます！

Web制作に必要な全てを、“初めの一歩”から始められます

このコースでは、デザインに使用するソフトであるPhotoshop、そして実際のWebデザインの仕方、技術面であるHTML、CSS、コーディングの5つが全てセットになっています。

もちろん全て基礎知識やインストール方法の説明から入り、徐々に操作方法の解説、作り方へ進めていくので、全く初心者の方でも無理なく続けていただけます。

動画内で使う素材は全て付属、短い動画で無理せず学べる！

各セクションごとに使用する素材データが付いているので、ダウンロードしてお使いいただけます。

ただ見て聞くだけではなく、実際に画像加工やデザイン、Webページ等の制作を行いながら学んでいただけるので、楽しみながら学べます。

全ての動画は10分前後に収めていますので、初心者の方にも無理なく、ご自身のペースで少しずつ進められます。
分からなくなったりつまずいたところはすぐに戻って復習可能。自分のレベルや進捗が確実に分かるので、確実にスキルアップできます！

「Webデザイナーを目指したいので、デザインもコーディングも必要な技術は全部身に付けたい！」

「Web制作の勉強をしたいけど、何から学んだら良いのか分からない」

「どれも少しは触れるけれど、ちゃんと勉強し直してスキルを上げたい」

など、全くの初心者の方から一定の知識をお持ちの方まで、Web業界を目指す方・携わる方にぜひ受講していただきたいコースです。

このコースで学べること

未経験からプロレベルを目指そう! 実践Photoshop講座

まずはPhotoshopの基本を全体的に学び、その後は各機能ごとに詳しい応用方法を紹介していきます。

単なる機能や操作の説明だけにとどまらず、写真加工、バナー作成、フライヤー制作、Webページなど、実際の制作を行なっていくので、初心者の方でも一気に中級までスキルアップすることができます。

  • Photoshop基礎知識、基本操作全般
  • 選択範囲の操作や画像の加工
  • レイヤーの扱い方
  • ブラシ・シェイプ・グラデーション等のペイント操作
  • 文字の入力・編集・変形など
  • マスクの機能と使い方
  • 色調補正とレタッチで画像を修正する

など


Photoshopでの実践Webデザイン講座

Photoshopを使用したWebデザインの方法をレクチャーします。

Webデザインの準備段階となるワイヤーフレームの制作から始めて、デザインテクニックの基礎を習得した後は、仮のWebサイトを初級・中級・上級の３段階に分けて初めから制作していきます。

基礎から学び、最終的には実際のWebサイトのデザインまで行えるようになるのが目標です。

  • ワイヤーフレームの作り方とWebサイトのパーツの名称
  • Web制作のためのヒアリングのコツ
  • 初心者のためのウェブデザインテクニック(パンくずリスト、ボタン、バナー、メインビジュアル、ナビゲーション、デザインベース制作)
  • 【初級】クリニックのWebサイトのトップページをデザインする
  • 【中級】美容院のWebサイトをデザインする
  • 【上級】Webマガジンサイトをデザインする
  • 【チャレンジ】実際のWebサイトをデザインする

など


基礎から学べる！HTML5完全マスター講座

Webページを作成するために開発された言語、HTML。Web制作技術として必要不可欠な、そのHTMLの正しい記述方法を学んでいきます。

初めてHTMLを学ぶ方へ向けて、まずは基本の書き方・ツールの使い方・構造を解説します。
その後はレイアウト組みやボタン作成、ソフトの起動、動画の貼り付けなど実践的な内容に進み、実際に簡単なWebサイトを制作していきます。

  • HTML基本知識、構造、記述方法
  • フォーム形成に必要な書き方
  • テーブルタグで表組みを作成する
  • 様々な文字に関するHTML
  • リンクを貼る、画像・動画・オーディオを表示させる
  • メールソフト起動、ファイルダウンロード等のHTMLテクニック
  • 要素のセクショニング

など


基礎から学べる！CSS/CSS3マスター講座

CSSの基本的な書き方から実際のWebサイトのレイアウト、上級者向けセレクタの記述まで、初心者の方でも実際にマークアップできるまでのスキルを身に付けます。

  • CSS基本記述方法
  • テキストのスタイルを設定する
  • 幅や余白を調整する、ボックスのスタイル
  • 背景に色や画像を適応させたり影をつける
  • リストのアイコンを画像にする
  • レイアウトを組むための記述
  • セレクタの書き方
  • セレクタを応用する

など


サイトを作りながら学ぼう! 実践Webサイトコーディング講座

HTMLとCSSの基礎を習得したら、最後は実践的なWebサイトコーディングを学びます。

３つの種類のWebサイトを初級・中級・上級と段階を踏んで制作していくので、実際の制作への自信やスキルへつなげることができます。

  • 【初心者向け】クリニックサイトのマークアップ

    • シンプルなデザインながらも、画像タグを利用してメイン画像を表示させる、floatを駆使してボックスを横並びにするなど、幅広くHTMLとCSSを利用していきます。

  • 【中級者向け】美容院のWebサイトのマークアップ

    • マウスホバーでリンクに下線をつける、トップページのファイルを複製して下層ページをマークアップする、inputタグを利用した、お問い合わせフォームを作成する等、少し複雑なスタイルや操作性を意識したマークアップ方法・覚えておくと便利なマークアップ方法などを利用して、中級レベルのスキルを身に付けます。

  • 【上級者向け】Webマガジンサイトのマークアップ

    • デザインをそのまま反映させるようなマークアップ方法、なるべくページの読み込み速度が早くなるようなマークアップ方法、ページネーションやフッターの作成など、コンテンツ量の多いサイトをマークアップしていきます。

  • 【チャレンジ】実際のWebサイトのマークアップ

    • 理解度チェックとして、講師運営スクールである、NESTschoolのWebサイトを実際にマークアップしていきます。

時間もペースも自由なのに、1本ですべてのスキルが身に付けれられる！

デザイン面・技術面と学ぶことは多いけれど、本で勉強するのは分かりにくい。
だけど学校に通う時間も取れない、取れたとしても自宅で課題をこなす時間がないかもしれない。それに全部のスキルを教えてもらうには授業料だってかなりかかる...。

そんな悩みや心配も、動画で学べるこの講座ですべて解決できます！

実際にスクールを運営している、実績多数の講師がお教えします

講師はテクノロジーとクリエイティヴのプロを目指すためのスクールを運営しており、卒業生は1000名以上。
未経験からWebデザイナーとして働けるレベルになることをゴールとした、Webデザインコースを提供しています。

450レッスンオンラインコースの講師について


最初から最後まで全て同じ講師がみっちりレクチャーします！

About the Instructor

NESTonline
NESTonline

Course content

Total 42 hours 17 minutes
Preview You can preview lectures with this label
Section 1：これからはじめるPhotoshop基礎(1)
1 これからはじめるPhotoshop基礎(1) 1:00
2 Photoshopでできるコト Preview 4:56
3 Photoshopの画面構成について 6:42
4 Photoshopファイルの新規作成方法 7:05
5 まずはじめに覚えたい、基本ツールの使い方 6:20
6 Photoshopで画像を貼り付ける方法 5:06
7 フィルター機能を使って写真をイラスト風に 4:02
8 画像の一部分にのみ編集を加える方法 4:35
9 ブラシツールの使い方 6:12
10 Photoshopファイルをjpg形式に変換する方法 4:26
Section 2：これからはじめるPhotoshop基礎(2)
11 これからはじめるPhotoshop基礎(2) 1:00
12 画面の基本操作 Preview 4:05
13 画像の明るさやコントラストを調整する 4:25
14 画像の一部分をモノクロに変える方法 5:45
15 画像の一部分の色を置き換える方法 4:52
16 写真をミニチュア風に加工する方法 8:01
17 ［実践］画像をトイカメラ風に加工しよう 4:22
18 Photoshopのレイヤー機能について 4:29
19 複雑な形の写真を切り抜く方法 3:17
20 ［実践］曇り空の写真を晴れに合成しよう 1:44
21 ［チャレンジ］人物を切り抜いて合成しよう 8:33
Section 3：これからはじめるPhotoshop基礎(3)
22 これからはじめるPhotoshop基礎(3) 1:00
23 テキストツールを使って文字を入力する方法 Preview 7:15
24 テキストボックスの作り方 5:05
25 文字に変形を加える方法 5:19
26 図形やイラストを追加する方法 4:57
27 レイヤースタイルの基本のかけ方 6:10
28 ［実践］思わず押したくなるボタンを作ろう 6:40
29 レイヤーを好きな形に切り抜く方法 3:48
30 ［実践］Facebookのカバー写真を作ろう 3:15
31 作った画像をWeb用に書き出す方法 5:05
32 ［チャレンジ］サイトのメイン画像を作ろう 9:31
Section 4：選択範囲と画像の操作
33 選択範囲と画像の操作 1:00
34 画像を指定のサイズに切り抜く方法 4:31
35 2つの画像を合成する方法(1) 5:05
36 2つの画像を合成する方法(２) 7:21
37 [実践]画像を違和感なく合成しよう 6:24
38 画像の輪郭に沿った選択範囲を作る方法 4:13
39 選択範囲を微調整する方法 4:25
40 同じ色の部分を選択する方法 4:28
41 ［実践］ネットショップの商品画像を作ろう 11:04
42 髪の毛を綺麗に切り抜く方法 4:10
43 ［チャレンジ］コラージュ作品を作ろう 5:27
Section 5：レイヤー
44 レイヤー 1:00
45 レイヤーの仕組みとパネルの基本操作 6:16
46 レイヤーの不透明度を調整する方法 5:57
47 複数のレイヤーを効率よく操作する方法 7:38
48 ［実践］アイキャッチ画像を作ろう 7:27
49 レイヤーに影をつける方法 9:01
50 レイヤーをネオン風に光らせる方法 6:15
51 レイヤーにざらざらした質感を加える方法 4:39
52 ［実践］お申し込みリンクのバナーを作ろう 9:54
53 オリジナルパターンを作る方法 8:18
54 ［チャレンジ］プロ並のポスターを作ろう 14:35
Section 6：ブラシ・シェイプ・グラデーション
55 ブラシ・シェイプ・グラデーション 1:00
56 徐々に透明になるグラデーションを作る方法 3:20
57 ブラシツールで自由に絵を描く方法 8:34
58 無料のカスタムブラシを使う方法 7:46
59 [実践]女性の顔に化粧を施す方法 7:16
60 グラデーションのボタンを作成する方法 8:24
61 自由な線を描く方法 7:46
62 アンカーポイントとパスを編集する方法 7:09
63 カスタムシェイプでボタンを作成する方法 6:54
64 [実践]アラートダイアログを作ろう 4:46
65 [チャレンジ]ポストカードを作ろう 11:41
Section 7：テキストツール
66 テキストツール 1:00
67 文字の入力とスタイルの変更方法 5:30
68 テキストボックスとスタイルの変更方法 4:34
69 [実践]雑誌のページデザインをしよう 6:13
70 シェイプに沿って文字を入力する方法 4:12
71 線に沿って文字を入力する方法 3:52
72 ワープテキストで文字を変形させる方法 2:52
73 フォルムに合わせて文字を入力する方法 1:53
74 [実践]ロゴのデザインをしよう 5:35
75 [チャレンジ]ボトルラベルを作ろう 8:02
Section 8：マスク
76 マスク 1:00
77 レイヤーマスクを使って画像を切り抜く方法 5:17
78 グラデーションのマスクを作成する方法 3:34
79 細かい部分までマスクを調整する方法 4:28
80 ［実践]カリグラフィポスターを作ろう 5:45
81 マスクを使って曇り空を晴れに変える方法 3:24
82 マスクを使って髪の毛の色を変える方法 6:02
83 画像を劣化させずに切り抜く方法 5:44
84 本のカバー柄を変える方法 6:33
85 ［実践］シェイプの形でマスクをかけよう 8:10
86 [チャレンジ]商品のメイン画像を作ろう 10:13
Section 9：色調補正とレタッチ
87 色調補正とレタッチ 1:00
88 ボタン1つで画像をレトロ風にする方法 5:45
89 食べ物を美味しそうに補正する方法 8:31
90 重厚感のある写真に補正する方法 2:28
91 写真をアーティスティックに加工する方法 7:03
92 写真をHDR風に加工する方法 4:19
93 人物の目をはっきりさせる方法 2:42
94 ニキビやシワを消す方法 5:22
95 歯を白くしたり目の充血を取る方法 6:33
Section 10：ワイヤーフレーム制作
96 ワイヤーフレームについて 5:31
97 ワイヤーフレーム作成手順・ツール 5:48
98 Webサイト制作のヒアリングのコツ 4:37
99 ワイヤーフレーム作成のためのヒアリング 5:06
100 レイアウトパーツの役割と名称 5:59
101 ワイヤーフレームの作り方 3:37
102 ワイヤーフレーム作成時の注意点 5:46
Section 11：初心者のためのWebデザインテクニック
103 初心者のためのWebデザインテクニック 1:00
104 初心者のためのWebデザインの方法・勉強法 Preview 5:00
105 パンくずリストの作り方 18:10
106 押したくなるボタンの作り方 25:00
107 バナーの作り方 14:33
108 Webサイトのメインビジュアルの作り方 11:06
109 ナビゲーションの作り方 9:58
110 ガイドでWebデザインのベースを作成する 18:47
111 役立つ参考サイトの探し方 3:20
112 Web制作でよく使用するツール 7:37
Section 12：【初心者向け】PhotoshopでWebデザインをしてみよう：クリニックのWebサイト制作
113 【初心者向け】クリニックのWebサイト制作 1:00
114 デザイン前の環境設定をしよう 5:43
115 Webサイトのベースを作成してみよう 16:16
116 ロゴを配置してみよう 9:28
117 グローバルナビゲーションを作ろう 10:05
118 メイン画像を作ってみよう 7:42
119 サイドバーを作ってみよう 15:48
120 記事一覧を作ってみよう 13:48
121 フッターを作ってみよう 6:58
122 ページトップへのボタンを作ってみよう 5:12
123 画像をスライスして書き出してみよう 10:41
Section 13：【中級者向け】実践Webデザイン：美容院のサイト制作
124 【中級者向け】美容院サイト 1:00
125 Webサイト用のファイルを新規作成する方法 2:07
126 ガイドを使ってレイアウトを作る方法-1 8:24
127 ガイドを使ってレイアウトを作る方法-2 6:26
128 Webサイトに背景画像を設定する方法 5:30
129 アイコンを利用したロゴを作成する方法-1 6:17
130 アイコンを利用したロゴを作成する方法-2 4:59
131 お問い合わせバナーを作成する方法-1 4:52
132 お問い合わせバナーを作成する方法-2 3:57
133 テキストツールでナビゲーションを作る-1 4:14
134 テキストツールでナビゲーションを作る-2 5:38
135 レイヤースタイルを使ったメイン画像を作る 6:38
136 テキストボックスで新着情報一覧を作る-1 8:44
137 テキストボックスで新着情報を作る-2 10:03
138 写真を使ったバナーを作成する方法-1 4:29
139 写真を使ったバナーを作成する方法-2 5:54
140 写真を使ったバナーを作成する方法-3 4:19
141 コピーライト付きフッターを作成する方法 2:38
142 記事ページ用のファイルの複製と修正 4:16
143 メインビジュアルを見出しに変える方法 7:55
144 レイヤーを再利用したメュー一覧を作る-1 5:12
145 レイヤーを再利用したメニュー一覧を作る-2 5:56
146 レイヤーを再利用したメニュー一覧を作る-3 6:09
147 レイヤーを再利用したメニュー一覧を作る-4 4:58
148 フッターを調整する方法 3:02
149 ご予約ページ用のファイルの複製と修正 4:02
150 ナビゲーションの修正と小見出しの修正 3:20
151 ご予約フォームの注意文を作成する方法-1 7:13
152 ご予約フォームの注意文を作成する方法-2 6:39
153 ご予約フォームを作成する方法-1 5:06
154 ご予約フォームを作成する方法-2 4:58
155 ご予約フォームを作成する方法-3 4:05
156 ご予約フォームを作成する方法-4 6:38
157 ご予約フォームを作成する方法-5 12:10
158 ご予約フォームを作成する方法-6 6:19
Section 14：【上級者向け】実践webデザイン：Webマガジンサイト制作
159 【上級者向け】Webマガジンサイト制作 1:00
160 新規ファイルの作成と横幅ガイドの作成 4:22
161 サイト全体のレイアウト組みをしよう-1 4:42
162 サイト全体のレイアウト組みをしよう-2 3:02
163 ヘッダーのデザイン①　背景の作成 5:20
164 ヘッダーのデザイン①　ロゴとナビの作成-1 4:58
165 ヘッダーのデザイン①　ロゴとナビの作成-2 5:44
166 特集記事のデザイン①　メイン記事の作成-1 3:18
167 特集記事のデザイン①　メイン記事の作成-2 4:43
168 特集記事のデザイン①　メイン記事の作成-3 3:51
169 人気記事ランキングを作成しよう① 4:17
170 人気記事ランキングを作成しよう② 6:23
171 人気記事ランキングを作成しよう③ 4:07
172 人気記事ランキングを作成しよう④ 3:39
173 人気記事ランキングを作成しよう⑤ 4:42
174 人気記事ランキングを作成しよう⑥ 3:08
175 サイドバーを作成しよう① 5:10
176 サイドバーを作成しよう② 4:19
177 サイドバーを作成しよう③ 4:42
178 新着記事一覧のデザイン①　見出しの作成 4:03
179 新着記事一覧のデザイン②　記事一覧-1 2:39
180 新着記事一覧のデザイン③　記事一覧-2 5:38
181 新着記事一覧のデザイン④　記事一覧-3 5:28
182 新着記事一覧のデザイン⑤　記事一覧-4 4:58
183 新着記事一覧のデザイン⑥ 記事一覧-5 4:18
184 ページネーションの作成 7:29
185 フッターを作成しよう①　ロゴの作成 4:19
186 フッターを作成しよう②-1　お問い合わせ 3:48
187 フッターを作成しよう②-2　お問い合わせ 5:14
188 記事ページを作成するための準備をしよう 3:00
189 パンくずリストの作成 4:35
190 サイドバーの作成：人気記事ランキング① 5:34
191 サイドバーの作成：人気記事ランキング② 5:39
192 記事本文のデザイン①　タイトルのデザイン 6:20
193 記事本文のデザイン②　本文のデザイン 4:55
194 記事本文のデザイン③　見出しのデザイン 7:11
195 本文下のデザイン①　関連記事一覧 4:45
196 本文下のデザイン①　見出しのデザイン 6:10
197 本文下のデザイン①　記事一覧のデザイン 7:09
Section 15：【チャレンジ】実際のWebサイトのデザインをしてみよう
198 実際のWebサイトのデザインをしてみよう 1:00
199 NESTschool公式サイトのデザイン(1) 21:50
200 NESTschool公式サイトのデザイン(2) 16:59
Section 16： HTML入門　第一回
201 HTML入門　第一回 1:00
202 Webページを設計する方法 6:35
203 Webサイト制作の言語、HTMLとは 5:03
204 Webページが表示される仕組みを理解する 5:31
205 必要なアプリケーションをインストールする 2:32
206 Webページの土台を作る方法 7:15
207 ゼロから学ぶHTMLタグの基本文法 4:06
208 簡単なテキストのマークアップ 7:00
209 HTMLファイルをブラウザで確認する方法 4:17
210 ブラウザの種類を知ろう 4:44
Section 17：HTML入門　第二回
211 HTML入門　第二回 1:00
212 バージョンを指定するDOCTYPE宣言の書き方 5:07
213 HTMLの基本構造を記述する方法 4:22
214 文字エンコードの種類と選択 4:14
215 Webページにタイトルを付ける方法 4:55
216 説明文、キーワード、作成者を設定する 6:02
217 見出しを表示する方法 4:02
218 文章を表示する方法 4:01
219 画像を表示する方法 4:13
220 属性の書き方 4:43
Section 18：HTML入門　第三回
221 HTML入門　第三回 1:00
222 スタイル属性によるスタイルの適用方法 4:57
223 レイアウトのためのHTMLを記述する方法 4:56
224 リストタグでナビゲーションを作成する方法 8:05
225 【実践】メイン画像を表示させてみよう 6:56
226 【実践】コンテンツを作成してみよう 6:56
227 フッターを作成する方法 4:34
228 外部CSSを読み込む方法 5:16
229 コメントアウトの書き方 3:19
230 [実践]アバウトページを作ってみよう 8:34
Section 19：フォーム
231 フォーム 1:00
232 基本的なフォームの書き方 2:54
233 テキストを入力するボックスを作成する方法 4:35
234 長文を入力するためのエリアを作成する方法 5:05
235 送信・リセットボタンを作成する方法 3:03
236 フォームにラベルを付ける方法 6:17
237 フォームをグループ化する方法 4:37
238 セレクトメニューを作成する方法 8:38
239 ラジオボタンを作成する方法 5:46
240 チェックボックスを作成する方法 4:00
241 ［チャレンジ］ログインページを作ろう 9:35
Section 20：テーブル
242 テーブル 1:00
243 基本的なテーブルの作り方 5:14
244 テーブルに項目名を設定する方法 5:53
245 テーブルの説明を加える方法 4:36
246 テーブルの行をグループ化する方法 6:30
247 隣り合う複数のセルを結合させる方法 5:38
248 ［チャレンジ］企業概要ページを作ろう 8:17
Section 21：テキストとリスト
249 テキストとリスト 1:00
250 文章に対して見出しを付ける方法 7:15
251 段落タグと改行の記述方法 5:40
252 語句を強調、ハイライト表示させる方法 3:40
253 引用の記述方法 6:07
254 改行や余白をそのまま表示させる方法 4:28
255 連絡先・省略文字・改行位置などを示す 4:22
256 リスト情報でわかりやすく整理する方法 5:09
257 定義型リストを作成する方法 4:16
258 ［実践］文章構造を意識したマークアップ 6:22
259 ［チャレンジ］カフェのページをつくる 5:39
Section 22：リンクと画像・動画・オーディオ
260 リンクと画像・動画・オーディオ 1:00
261 指定のページへリンクさせる方法 6:13
262 他の文書へリンクさせる方法 6:02
263 文書の特定の場所へリンクさせる方法 5:25
264 画像を表示する方法 7:40
265 横罫線を表示する方法 4:02
266 YouTube動画をサイトに埋め込む方法 4:07
267 ページの中に別のページを表示させる方法 5:41
268 Google Mapを表示させる方法 4:25
269 ［チャレンジ］動画を使ったサイトを作る 4:18
Section 23：HTMLテクニック
270 HTMLテクニック 1:00
271 クリックでメールソフトを起動させる方法 4:30
272 入力状態でメールソフトを起動させる方法 5:06
273 ［実践］親切なお問い合わせメールをつくる 8:37
274 ファビコンを設定する方法 4:04
275 PDFファイルをダウンロードさせる方法 5:19
276 自動的に特定のページへジャンプさせる方法 4:05
277 ［チャレンジ］素材サイトをつくる 5:40
Section 24：要素のセクショニング
278 要素のセクショニング 1:00
279 Webページレイアウトの基礎 3:18
280 ヘッダーとナビゲーションを作成する方法 4:44
281 メイン、サイドバー、フッターの作成方法 4:32
282 サイトを真ん中寄せにするための記述方法 3:51
283 SECTIONタグとARTICLEタグの違い 5:44
284 ［チャレンジ］正しいグルーピングをしよう 5:16
Section 25：CSS入門　第一回
285 CSS入門　第一回 1:00
286 スタイルシート、CSSとは？ 4:41
287 CSSの基本文法 4:46
288 簡単なCSSを記述してみよう 4:04
289 インラインCSSを書いてみよう(1) 5:41
290 インラインCSSを書いてみよう(2) 4:05
291 外部CSSファイルの作成と読み込み 7:24
292 importタグを使ってCSSを読み込む 4:22
293 リセットCSSを使う方法 2:34
Section 26：CSS入門　第二回
294 CSS入門　第二回 1:00
295 すべての要素にスタイルを適用する方法 2:28
296 要素を指定してスタイルをかける方法 5:59
297 スタイルの継承について 6:48
298 ID名を使ったスタイルの指定 6:06
299 CLASS名を使ったスタイルの指定 5:25
300 CSSにコメントアウトを書く方法 2:22
301 ［実践］複雑な構造にスタイルを適応(1) 5:30
302 ［実践］複雑な構造にスタイルを適応(2) 4:07
Section 27：テキストのスタイル
303 テキストのスタイル 1:00
304 フォントの種類を指定するCSS 6:56
305 Google Web Fontを利用する方法 5:55
306 フォントの大きさを指定する方法 1:39
307 大きさの指定について 4:07
308 ［実践］頭文字のみ文字を大きくする 6:30
309 文字の太さを変更する方法 4:22
310 下線・上線・打ち消し線をつける方法 4:49
311 文章の行間を指定する方法 5:19
312 フォントの設定を一括で行う方法 3:05
313 ［チャレンジ］プロパティを使いこなそう 9:49
Section 28：ボックスのスタイル
314 ボックスのスタイル 1:00
315 ブロックタイプとインラインについて 4:58
316 ボックスモデルを理解する 3:16
317 横幅と縦幅の指定方法 10:18
318 外側の余白の付け方 6:45
319 内側の余白の付け方 7:27
320 境界線の付け方 8:05
321 ［実践］スタイル付きの見出しを作る 5:21
322 アンカーテキストをブロック化する方法 4:43
323 ボックスの角を丸くする方法 4:02
324 ［チャレンジ］カフェのメニューページ 7:03
Section 29：背景・シャドウ・リスト
325 背景・シャドウ・リスト 1:00
326 背景の色を変更する方法 5:22
327 背景画像を表示する方法 7:51
328 ［実践］スクロール固定の背景画像に設定 4:42
329 テキストに影をつける方法 5:30
330 ボックスに影をつける方法 4:45
331 背景をグラデーションにする方法 8:24
332 リストのスタイルを変更する方法 5:07
333 リストマーカーを画像に変更する方法 3:34
334 位置調整の出来るリストアイコンの作成方法 3:56
Section 30：レイアウト
335 レイアウト 1:00
336 横幅と縦幅の指定方法 6:19
337 ページ全体をセンタリングする方法 3:31
338 ボックスを横並びにするFLOATの使い方 9:32
339 ［実践］横並びの商品一覧を作ろう 8:02
340 要素を好きな位置に固定させる方法 7:46
341 スクロール追従ナビゲーションを作る 4:28
342 範囲内に収まらない要素の表示方法 5:48
343 ［実践］画像の切り出しをしよう 2:40
344 ［チャレンジ］レイアウトを作ろう 5:17
Section 31：セレクタ
345 セレクタ 1:00
346 セレクタの基礎 7:46
347 IDセレクタの使い方 5:03
348 CLASSセレクタの使い方 4:37
349 セレクタ(IDとCLASS)を組み合わせる方法 4:27
350 ［実践］セレクタを使いこなそう 8:59
Section 32：セレクタ応用
351 セレクタ応用 1:00
352 擬似クラスの使い方 5:18
353 子孫コンビネータの使い方 4:47
354 セレクタをグループ化する方法 3:24
355 「first-child」「last-child」の使い方 4:07
356 ［実践］横並びのナビゲーション作成 6:34
357 子の順番を指定する「nth-child」の使い方 6:13
358 「nth-child」と「nth-of-type」について 5:57
359 ［実践］見やすいテーブルを作ってみよう 9:52
360 最初の文字・行にスタイルを適応させる 5:39
361 空要素のみにスタイルを適応させる 3:53
362 直後に隣接している要素にスタイルを適応 4:50
363 ［実践］チェックボックスにスタイルを適応 4:36
Section 33：【初心者向け】簡単なWebサイトのマークアップ クリニックサイト
364 【初心者向け】クリニックサイト 1:00
365 サイト情報を設定するmetaタグを入力する 7:19
366 レイアウトのためのタグを追加してみよう 7:25
367 コメントアウトでわかりやすいHTMLを書こう 2:37
368 横幅と縦幅を設定しよう(1) 4:45
369 横幅と縦幅を設定しよう(2) 4:18
370 floatで2カラムレイアウトを組んでみよう 3:37
371 marginでサイト全体を中央に寄せてみよう 6:22
372 ロゴを配置してみよう 5:37
373 ナビゲーションをマークアップしてみよう 3:27
374 floatを使ってロゴとナビを横並びにしよう 7:06
375 メイン画像を表示させてみよう 1:55
376 リストタグを使ってバナーを作ってみよう 2:34
377 背景画像を利用したバナーを作ろう(1) 7:34
378 背景画像を利用したバナーを作ろう(2) 6:24
379 背景画像を利用したバナーを作ろう(3) 6:50
380 見出しと一覧をマークアップしよう 5:35
381 floatを使ってdtとddを横並びにしよう 3:20
382 擬似クラスで背景の色を適応させよう 5:35
383 フッターに必要なタグを記述してみよう 6:29
384 フッターに必要なCSSを記述してみよう 13:48
Section 34：【中級者向け】美容院サイトのマークアップ
385 【中級者向け】美容院サイト 1:00
386 ファイルを新規作成、タイトルを設定しよう 5:25
387 CSSファイルを新規作成、読みませよう 3:41
388 ヘッダーのレイアウトを作ってみよう 6:48
389 リセットCSSを読み込んでみよう 2:45
390 コンテンツのレイアウトを組もう 6:09
391 横幅100%のフッターを作成しよう 5:04
392 marginでサイト全体の余白を調節しよう 6:20
393 見出しタグでロゴをマークアップしよう 6:28
394 背景画像でロゴのアイコンを表示させよう 4:56
395 余白を調整してロゴを完成させよう 5:02
396 ナビゲーションをマークアップしよう 4:42
397 下線がつくリンクを作ろう(1) 5:45
398 下線がつくリンクを作ろう(2) 4:42
399 横並びのナビゲーションを作ろう 4:49
400 ナビゲーションの位置を調整しよう 2:50
401 positionで右上にバナーを配置しよう 6:16
402 背景に画像を設定しよう 3:24
403 影のついたメイン画像を作成してみよう 5:48
404 新着情報一覧の背景を作成してみよう 5:37
405 文字をデザインしてみよう 7:01
406 overflowを使ってスクロール窓を作ろう 4:14
407 背景画像を利用したバナーを作ろう 5:03
408 class名でボックスに影をつけよう 5:59
409 バナーの文字の位置や大きさを調整しよう 4:54
410 フッターを作成しよう 3:51
411 下層ページ用にファイルを複製しよう 4:34
412 メニュー一覧ページの見出しを作ろう 6:18
413 リストタグでメニュー一覧を記述しよう 5:18
414 メニュー一覧のデザインを調整しよう 6:39
415 ファイルの複製と見出しの修正を行おう 5:16
416 注意文のデザインを調整しよう 4:42
417 テーブルタグでフォームを作成しよう 4:47
418 フォームを複製して完成させよう 3:57
419 チェックボックスを作成してみよう 4:43
420 フォームのラベルをデザインしよう 4:37
421 入力欄に関するCSSをかけてみよう(1) 5:06
422 入力欄に関するCSSをかけてみよう(2) 4:29
423 送信ボタンにCSSをかけてみよう 5:16
Section 35：【上級者向け】Webマガジンサイトのマークアップ
424 【上級者向け】Webマガジンサイト 1:00
425 必要なHTMLとCSSファイルを新規作成しよう 5:44
426 スタイルシートを読み込んでみよう 4:42
427 ヘッダーのレイアウトを組もう(1) 5:18
428 ヘッダーのレイアウトを組もう(2) 4:40
429 ロゴとナビゲーションをマークアップしよう 5:20
430 横並びのロゴとナビゲーションを作成しよう 8:22
431 ピックアップ記事のレイアウトを組もう 7:47
432 ピックアップ記事のHTMLを書いてみよう 2:49
433 ピックアップ記事のCSSを書いてみよう(1) 5:49
434 ピックアップ記事のCSSを書いてみよう(2) 2:43
435 背景画像を利用した見出しを作ろう 4:56
436 ランキング一覧のHTMLを記述しよう 4:01
437 ランキング一覧のCSSを記述しよう(1) 4:58
438 ランキング一覧のCSSを記述しよう(2) 6:35
439 ランキング一覧のCSSを記述しよう(3) 6:10
440 floatでコンテンツのレイアウトを組もう(1) 4:27
441 floatでコンテンツのレイアウトを組もう(2) 3:38
442 サイドバーを作成しよう(1) 4:12
443 サイドバーを作成しよう(2) 4:15
444 サイドバーを作成しよう(3) 4:18
445 背景画像を利用した見出しを作ろう② 3:25
446 定義型リストを利用してマークアップしよう 5:12
447 記事一覧に対してCSSを記述しよう(1) 6:35
448 記事一覧に対してCSSを記述しよう(2) 3:02
449 記事一覧に対してCSSを記述しよう(3) 4:37
450 記事一覧に対してCSSを記述しよう(4) 3:48
451 ページネーションをマークアップしよう(1) 6:22
452 ページネーションをマークアップしよう(2) 5:37
453 ページネーションをマークアップしよう(3) 3:03
454 フッターをマークアップしよう(1) 7:33
455 フッターをマークアップしよう(2) 4:35
456 フッターをマークアップしよう(3) 4:52
Section 36：【チャレンジ】実際のWebサイトのマークアップ
457 【チャレンジ】実際のサイトのマークアップ 1:00
458 ボックスを作成しよう 2:41
459 横幅と縦幅をCSSで設定しよう 2:28
460 ヘッダーを作成しよう 4:27
461 ヘッダーにロゴとテキストを配置しよう 7:01
462 メインビジュアルを作成しよう 10:50
463 『授業内容』を作成しよう 8:46
464 『講師紹介』を作成しよう 8:19
465 コース一覧のマークアップをしよう 5:58
466 『料金体制』を作成しよう 5:01
467 複雑なテキストを入力しよう 12:56
468 フッターを作ろう 1:48

Ratings and reviews

4.5
139 reviews
5 stars
51%
4 stars
48%
3 stars
1%
2 stars
0%
1 stars
0%
とてもわかりやすく、テンポの良い動画でスキルがグングン身に付きます。レッスン時間は長いですが本気でWebデザイナーを目指すならばこのボリュームは必要です。当社での研修訓練にもこのコースを利用させて頂きます。
See more

Related Courses