ウェブサイト作成マスター講座セット

Udemyが誇る人気Webコースを今ならセット価格でご提案。
この講座より、ウェブ開発、ウェブデザイン、ワードプレスをマスターし、
個人のウェブサイト作成、キャリアアップのスキルへと今すぐ活用!
3 Full Courses
$535 value
Only $54
Courses: 3
Content: 64.5 hours
Students: 10,000
Average Rating:

Includes these 3 top-rated courses

    【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
    $200
    未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
    $200
    【プログラミング不要!】2日でできるWordPress超入門
    $135

Course Details

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
167 lectures
17.5 hours
All Levels

**2017年2月26日更新**

このコースは、世界でシリーズ累計30万人もの受講生が学んでいるウェブエンジニア養成コースの最新版「Complete Web Developer 2.0」の日本語版です。イギリス人のUdemyトップ講師(Rob Percival・ロブパーシバル)によるコースを日本の状況に合わせて日本語で全編収録し直しました。

プログラミングやウェブデザインが全くはじめての方でも、丁寧なチュートリアル動画や課題に取り組むことによって、ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどをマスターできます。

また、このコースはテクニカルな面だけではなく、ウェブエンジニアとして独立・起業するためのヒントが、豊富に盛り込まれています。

プログラミングだけではなく、WordPressを使ってポートフォリオサイトを作ったり、ショッピングサイトをクライアントのために構築したり、HTML5アプリをスマホアプリ化してアプリストアで公開する方法まで解説されています。

【カリキュラム構成】

セクション1:イントロ

セクション2:HTML5

セクション3:CSS(スタイルシート)

セクション4:JavaScript

セクション5:jQuery

セクション6:Bootstrap 4

セクション7:WordPress

セクション8:PHP7

セクション9:MySQL 5

セクション10:API

セクション11:モバイルアプリ

セクション12: HTML5(応用編)(追加中)

セクション13: Python

セクション14:Twitterクローンを作ってみよう

【このコースの特徴】

あなたはこのコースで学ぶことで、およそ6週間で最先端のウェブエンジニアの技術とトレンドをマスターできます。

ぜひ、このチャンスにウェブエンジニアとして実力を磨いて、FacebookやUberのようなイノベーションを起こすウェブサービスやプロダクト開発にチャレンジしましょう。


また、ウェブプログラミングだけではなく、このコースにはPythonやHTML5ベースのモバイルアプリ開発など、IoT(Internet of Things:モノのインターネット)や、モバイルウェブに対応するためのベースとなるレクチャーも豊富に含まれています。Pythonを学ぶことで、Ruby on RailsやSwiftなどモダンな言語にチャレンジするベースをマスターできます。JavaScriptの基礎をとことん学ぶことで、Node.jsやAngular 2, ReactJSなどの学習も加速できます。

それでは、コースで一緒に学んでいきましょう!

【講座特典】

  • 有料(300ドル相当)のBootStrapテーマを3つ入手できます。(英語サイトでの登録が必要)
  • ウェブホスティングを利用できます(ただし、英語メニューのみ提供)
    (日本語版ではローカルにApache/PHP/MySQLをインストールするMAMPパッケージで学べるようにカスタマイズしています)


【更新情報】

2017/2/26 モバイルアプリにローカルストレージ解説、チャレンジ課題を掲載しました。

2017/2/24 モバイルアプリにApp.jsの解説を追加しました。

      レクチャー11に「ソースコードを表示するショートカット」を追加しました。

2017/2/22 モバイルアプリのイントロ・最初のレクチャーを追加しました。

2017/2/12 CSSセクションの最終課題のサンプルコードを追加しました。

2017/2/8 APIセクションにGeocoding APIのレクチャー、ミニチャレンジを追加しました。(6:52, 7:02, 15:16)

2017/2/6 最終セクションの課題と、動作サンプルへのリンク、サンプルコードを掲載しました。

2017/2/5 APIセクションに「Google Maps API」のレクチャー(18:25)を追加しました。

2017/2/1 APIセクションに6本のレクチャーを追加しました。

2017/1/31 MySQLの残りのレクチャーを追加しました。

2017/1/9 Bootstrap(Scrollspy)のサンプルコードを収録しました。

2017/1/5 MySQLのレクチャーを6本追加しました。

2017/1/4 CSSセクションの課題を追加しました。

2016/12/30 MySQLのセクションを追加しました。

2016/12/14 Bootstrapのセクションに、アプリランディングページ制作課題のサンプルへのリンクを掲載しました。


井上 博樹 (Hiroki Inoue), ITエンジニア、Udemy講師(プログラミング, STEAM)

Hiroki Inoue is a software engineer since 1992. Hiroki Inoue has been taught Web programming at Dokkyo University in Japan, and also on Udemy since November 2014 and now offering 17 courses for 20,000 students. Hiroki Inoue started a consultancy in 2007 to support institutions and corporations to leverage technology in education. Also Hiroki provides 17 courses on Udemy; Deep Learning/TensorFlow, Neural Network with Numpy, Ethical Hacking with Kali Linux, Complete Web Developer 2.0 (Localized Rob Percival's best seller course), iOS 10 App Dev, Linux, Linux/Docker, Java, Ruby on Rails, WordPress, Android App Dev, PHP7/Laravel, Moodle He loves to play tennis in weekend.

東京大工学部卒業後、富士総合研究所[現・みずほ情報総研]解析技術第1部にてデータ解析・デジタル信号処理の研究開発)・大学講師を経て、ワシントンD.C.の教育系スタートアップ(Blackboard)に参加、オンライン教育プラットフォーム開発や多言語化、アジア展開などを担当。NASDAQ IPOを経験した後、起業。

世界最大のオンライン学習サイト・Udemyでのべ20,000名以上にプログラミング講座を17コース提供中。対面でもプログラミングワークショップ(Hour of Code, スマホアプリ開発、Raspberry Pi による電子工作)を地域の中高で定期的に開催している。

2016年11月にはUdemyのベストセラーコース "Complete Web Developer 2.0" をローカライズ。2017年1月にTensorFlow入門コース, 3月にセキュリティ入門, 4月にニューラルネットワークコースをリリース。

大学・企業、塾・予備校などへの教育研究支援、オンライン教育プラットフォーム(LMS/Moodle/Canvas/Blackboard)導入、反転授業・ブレンデッドラーニング・パーソナライズドラーニング(個別学習)の導入支援、映像授業制作、教育アプリ開発などを提供している。著書に「Moodle入門(2007年)」「Moodle2ガイドブック(2013年)」「反転授業マニュアル(2014年)」「動画xスマホで稼ぐ(2014)」「エンジニアのためのオンライン講座制作ガイド(2016年12月刊)」などがある。

また、2014年よりネパールにおける教育支援プロジェクト、"Lights For Everyone" プロジェクトを立ち上げ、ソーラーライトの提供や、SLC(高卒認定試験)対策を含むオンライン学習サイト構築などを企画・構築・運用している。

Rob Percival, Web Developer And Teacher

Hi! I'm Rob. I have a degree in Mathematics from Cambridge University and you might call me a bit of coding geek.

After building websites for friends and family for fun, I soon learned that web development was a very lucrative career choice. I gave up my successful (and sometimes stressful) job as a teacher to work part time and today, couldn't be happier.

I'm passionate about teaching kids to code, so every summer I run Code School in the beautiful city of Cambridge. I also run the popular web hosting and design service, Eco Web Hosting which leaves me free to share my secrets with people like you.

You wouldn't believe the freedom that being a web developer offers. Sign up and find out for yourself why so many people are taking and recommending this course. I genuinely believe it's the best on the market and if you don't agree, I'll happily refund your money.

Sign up to my courses and join me in this amazing adventure today.

Sections
7 lectures 40 mins
19 lectures 2 hours
  • Lecture 8. セクション2(HTML5)のイントロ 00:48
  • Lecture 9. はじめてのウェブページを作成しよう 05:52
  • Lecture 10. 練習課題:はじめてのウェブページの作成 00:03
  • Lecture 11. 日本語が文字化けする場合の対応方法 00:02
  • Lecture 12. HTMLファイルの基本構造

    *注意*

    Google ChromeブラウザでHTMLソースを表示するには、

    Windowsなら、Ctrl + U

    Macなら、Option + Command + U

    を同時に押します。

    こうしたキーボードによる操作を「キーボードショートカット」と言います。

    13:08
  • Lecture 13. HTMLタグを使って、ウェブページを作成してみよう 07:44
  • Lecture 14. 練習課題:HTMLページの作成(解答例) 00:00
  • Lecture 15. ヘッダー(見出し)タグ 06:15
  • Lecture 16. パラグラフタグ 04:14
  • Lecture 17. テキストのフォーマット 09:43
  • Lecture 18. 番号なしリスト 04:48
  • Lecture 19. 番号つきリスト 05:56
  • Lecture 20. イメージ 08:16
  • Lecture 21. フォーム 13:38
  • Lecture 22. テーブル 06:04
  • Lecture 23. リンク 10:24
  • Lecture 24. HTMLエンティティ(実体参照)

    特別な意味を持つ記号を処理せずに表示。スペース、カッコなど。

    06:39
  • Lecture 25. iFrame(インラインフレーム) 06:15
  • Lecture 26. HTMLセクションの最終課題 00:01
25 lectures 1.5 hours
  • Lecture 27. CSS 3のイントロダクション 00:59
  • Lecture 28. CSSとは? Free Preview 04:08
  • Lecture 29. インラインCSS 09:26
  • Lecture 30. インラインCSS サンプルコード 00:00
  • Lecture 31. 内部CSS 07:56
  • Lecture 32. 内部CSS サンプルコード 00:00
  • Lecture 33. Class・id・span 09:41
  • Lecture 34. Class・idサンプルコード 00:00
  • Lecture 35. Div要素 06:01
  • Lecture 36. divサンプルコード 00:00
  • Lecture 37. Color属性 07:17
  • Lecture 38. color: サンプルコード 00:00
  • Lecture 39. Floatレイアウト 08:47
  • Lecture 40. Floatレイアウト:サンプルコード 00:00
  • Lecture 41. Position属性 13:51
  • Lecture 42. position: サンプルコード 00:00
  • Lecture 43. マージン(margin) 06:29
  • Lecture 44. マージン: サンプルコード 00:00
  • Lecture 45. パディング(padding) 05:02
  • Lecture 46. パディング: サンプルコード 00:00
  • Lecture 47. ボーダー(border) 13:49
  • Lecture 48. ボーダー(サンプルコード) 00:00
  • Lecture 49. フォント(Fonts) 08:17
  • Lecture 50. CSSセクションの課題 00:01
  • Lecture 51. CSSセクション課題: サンプルコード 00:03
17 lectures 2 hours
  • Lecture 52. Introduction To Javascript Section 00:38
  • Lecture 53. はじめてのJavascriptを使ってみよう 06:56
  • Lecture 54. inline JS サンプルコード 00:00
  • Lecture 55. Internal Javascript 06:05
  • Lecture 56. 要素にアクセスする 06:33
  • Lecture 57. クリックでスクリプトを実行する 06:45
  • Lecture 58. クリックで文字列を追記してみよう 07:12
  • Lecture 59. スタイルを操作してみよう 08:16
  • Lecture 60. ミニチャレンジ(円を消す) 09:10
  • Lecture 61. ミニチャレンジのサンプルコード 00:00
  • Lecture 62. 変数 10:22
  • Lecture 63. 配列

    *レクチャーの誤植(再収録して差し替え予定です)

    tweets.push = "文字列";

    ではなく、

    tweets.push("文字列")

    で配列にデータをプッシュします。

    13:15
  • Lecture 64. If文 11:20
  • Lecture 65. 繰り返し(forループ) 11:49
  • Lecture 66. While文による繰り返し 02:51
  • Lecture 67. 関数 04:10
  • Lecture 68. 外部 Javascript 03:02
15 lectures 2.5 hours
  • Lecture 69. jQueryセクションのイントロダクション 00:28
  • Lecture 70. What Is jQuery? 05:04
  • Lecture 71. jQueryを使ってみよう 10:59
  • Lecture 72. Clickイベントを検知する 10:48
  • Lecture 73. ウェブページのコンテンツを書き換えてみよう 08:46
  • Lecture 74. ウェブページのスタイル属性を変更してみよう 15:06
  • Lecture 75. フェードイン・フェードアウト 12:48
  • Lecture 76. アニメーション 06:42
  • Lecture 77. AJAXで非同期通信 15:15
  • Lecture 78. Regular Expressions 06:33
  • Lecture 79. jQuery UIを使ってみよう! 12:52
  • Lecture 80. Draggablesを使ってみよう 10:57
  • Lecture 81. Resizableを使ってみよう 07:50
  • Lecture 82. Droppables 10:31
  • Lecture 83. Accordian 10:47
12 lectures 1.5 hours
  • Lecture 84. Bootstrap 4セクションのイントロダクション 00:50
  • Lecture 85. Bootstrapとは? 05:29
  • Lecture 86. Bootstrapを使ってみよう 08:12
  • Lecture 87. グリッドシステム 07:11
  • Lecture 88. ナビゲーションバー 10:51
  • Lecture 89. フォーム 10:36
  • Lecture 90. Bootstrap4のコンポーネント 14:33
  • Lecture 91. ModalとJavaScriptによる処理の連携 19:56
  • Lecture 92. ScrollSpy 01:05
  • Lecture 93. ScrollSpy - Files 00:01
  • Lecture 94. Project - App Landing Page 02:58
  • Lecture 95. アプリのランディングページ課題の解答例 00:01
8 lectures 1.5 hours
  • Lecture 96. WordPressのセクションの概要 00:58
  • Lecture 97. WordPressのセットアップ 10:48
  • Lecture 98. Wordpressのダッシュボード 19:13
  • Lecture 99. Wordpressのテーマ 09:31
  • Lecture 100. レクチャーで使うテーマの入手サイト 00:01
  • Lecture 101. Xテーマでサイトを作ろう

    高機能なXテーマをインストールしよう

    17:26
  • Lecture 102. ショッピングサイトを作る

    WooCommerceでショッピングサイトを作ろう

    12:13
  • Lecture 103. ウェブサイトを作るチャレンジ 04:23
12 lectures 1.5 hours
  • Lecture 104. Introduction To PHP Section 00:34
  • Lecture 105. Introduction To PHP 02:59
  • Lecture 106. Hello World With PHP 11:16
  • Lecture 107. Variables 09:40
  • Lecture 108. Arrays 10:10
  • Lecture 109. If Statements 07:11
  • Lecture 110. For And For Each Loops 12:21
  • Lecture 111. While Loops 04:51
  • Lecture 112. GET Variables 09:06
  • Lecture 113. POST Variables 02:29
  • Lecture 114. Sending An Email With PHP 04:56
  • Lecture 115. コンタクトフォームを作ろう Free Preview 00:03
21 lectures 2 hours
  • Lecture 116. MySQL 5 セクションのイントロ 01:20
  • Lecture 117. MySQLのデータベースを追加しよう 08:24
  • Lecture 118. データベースに接続してみよう 09:52
  • Lecture 119. データベースに接続してみよう(サンプルコード) 00:03
  • Lecture 120. データベースから値を取得する 15:18
  • Lecture 121. データベースから値を取得する(サンプルコード) 00:02
  • Lecture 122. データの挿入と削除 12:10
  • Lecture 123. データの挿入と削除(サンプルコード) 00:03
  • Lecture 124. データのループ処理(1/3) 11:10
  • Lecture 125. データのループ処理 (1/3)サンプルコード 00:00
  • Lecture 126. データのループ処理(2/3) 06:28
  • Lecture 127. データのループ処理(2/3・サンプルコード)

    動作イメージ

    サンプルコード



    00:02
  • Lecture 128. データのループ処理(3/3)

    ユーザー登録フォームを作ります。

    30:30
  • Lecture 129. データのループ処理(3/3・サンプルコード)

    登録フォームの作成

    00:00
  • Lecture 130. セッション変数 12:00
  • Lecture 131. セッション変数: ファイル 00:02
  • Lecture 132. クッキー 07:33
  • Lecture 133. クッキー:ファイル 00:02
  • Lecture 134. パスワードを安全に保存する 07:55
  • Lecture 135. パスワードを安全に保存する:ファイル 00:02
  • Lecture 136. プロジェクト課題とサンプルコード 00:03
11 lectures 1.5 hours
  • Lecture 137. Introduction To APIs Section 01:05
  • Lecture 138. APIの仕組み 01:07
  • Lecture 139. 天気情報APIを使ってみよう!(1/2) 14:15
  • Lecture 140. 天気情報API テンプレートファイル 00:01
  • Lecture 141. 天気情報APIを使ってみよう!(2/2) 15:10
  • Lecture 142. Weather API サンプルコード 00:00
  • Lecture 143. Google Maps API 18:25
  • Lecture 144. Google Maps Geolocation API 06:52
  • Lecture 145. Google Maps Geocoding API (1/2) 07:02
  • Lecture 146. Google Maps Geocoding API (2/2) 15:16
  • Lecture 147. ミニチャレンジ課題:郵便番号ファインダー 00:00
7 lectures 42 mins
  • Lecture 148. モバイルアプリセクションのイントロ 00:47
  • Lecture 149. HTML5ベースのアプリ開発ツール 03:50
  • Lecture 150. App.jsを使ってみよう 24:01
  • Lecture 151. App.js - サンプルページ(ソースを参照) 00:01
  • Lecture 152. ローカルストレージを使ってみよう 13:42
  • Lecture 153. ローカルストレージを使ってみよう (サンプルコード) 00:05
  • Lecture 154. チャレンジ課題 Eメールクライアントアプリを作ってみよう! 00:02
2 lectures 2 mins
  • Lecture 155. Introduction To HTML 5/CSS 3 Features Section 00:25
  • Lecture 156. What Is HTML5? 02:02
9 lectures 1 hour
  • Lecture 157. このセクションの概要 01:06
  • Lecture 158. Pythonを学ぶ理由 03:06
  • Lecture 159. Hello Python! プログラムを書いてみよう

    Mac x MAMP でPythonを動かします。

    15:13
  • Lecture 160. Hello Pythonのソースコード 00:00
  • Lecture 161. 変数とリスト 16:18
  • Lecture 162. 変数とリスト(練習課題のソースコード) 00:00
  • Lecture 163. ループ(繰り返し処理) 14:06
  • Lecture 164. ループのサンプルコード 00:00
  • Lecture 165. If文 06:45
2 lectures 0 mins
  • Lecture 166. 最終課題: Twitterクローンを作ってみよう 00:00
  • Lecture 167. Twitterクローン: サンプルコード 00:03
未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
422 lectures
41.5 hours
Beginner Level

★未経験からプロのWebデザイナーとして働けることがゴールの完全マスターコース

こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。

WordやインターネットくらいしかPCを使ったことがないという方でもわかりやすいように作られています。


★全422レッスン & 42時間! 通学スクール80万円相当の内容

全部で467レッスンがありとても多いですが、1レッスン5分程度なので、空き時間に少しずつ、気軽に進めることが可能です。

Webに関する知識、Photoshop、Webのグラフィックデザイン、HTMLとCSS、実践的なコーディングなど、Webデザイナーとして働いたり、自分1人でサイトを作り上げるのに必要な全てが含まれています


★授業×チャレンジ課題で実践的なスキルが身につく!

スキルを身につける上で、実際作りながら学ぶことはとても大切です。
オンライン学習では、動画を見るだけで終わってしまい、実践的なスキルがつかないことが多いです。

こちらのコースでは全てのレッスンが、バナーや実際のカフェのWebサイトなど実践的なものを作ります。そして、各章の終わりにはチャレンジ課題として、その章で学んだことの理解を確認する課題があります。


過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

コースを提供しているNEST Schoolは過去3年間で1100名以上のスクール卒業生を輩出し、その間プログラムの改善を絶えず行ってきました。運営会社である株式会社Campusは、 多数の自社Webサービスの運営やWeb制作事業を行っており、 それらの活動で得たノウハウをこちらのコースで提供しています。
また、主に大学生を中心に年間50名近くのWebデザイナーを育成し、自社の高度なWebサービスのデザインを手掛けるまでに成長させています。 実際にWebサービスやWeb制作を実施している企業とプロのデザイナーによるプログラムと、「どうすれば効率よくスキルアップできるか」を 考え続けているプログラムの提供が、他にない価値です


無駄なく、必要なものだけを、必要な順番で学ぶことの大切さ

ネット上や書店にはたくさんの記事や本がありますが、すべてを見ることはできませんし、特に重要でない知識もたくさんあります。
まずは必要な知識だけを必要な順番で学ばないと、そうでない場合と比べて数十倍の非効率な学習になります。こちらのコースでは最も効率的な学習を目指しました


★内容

【Photoshop】
グラフィックツール定番のPhotoshop ! 基礎の基礎から中級までレベルアップを目指します。1つの動画につき1つの作品を作りながら、難なく楽しく学ぶ事が出来ます。

  1. これからはじめるPhotoshop基礎⑴
  2. これからはじめるPhotoshop基礎⑵
  3. これからはじめるPhotoshop基礎⑶
  4. 選択範囲と画像の操作
  5. レイヤー
  6. ブラシ・シェイプ・グラデーション
  7. テキストツール
  8. マスク
  9. 色調補正とレタッチ


【実践Webデザイン】

Webサイトをデザインする方法をレクチャーします。「ワイヤーフレーム」の制作方法から、実際に仮のWebサイトをまるまるデザインしてみる所まで、Webサイトデザインの全てをお話ししますので、初心者の方でも、どのようにサイト制作を行うのかを実践していただけます。

  1. ワイヤーフレーム制作
  2. 初心者のためのウェブデザインテクニック
  3. 【初級】クリニックのWebサイト〜トップページ編〜
  4. 【中級】美容院のWebサイト制作〜トップページ編1〜
  5. 【中級者向け】美容院のWebサイト制作〜トップページ編2〜
  6. 【中級者向け】美容院のWebサイト制作〜下層ページ編1〜
  7. 【中級者向け】美容院のWebサイト制作〜下層ページ編2〜
  8. 【上級者向け】Webメディア〜トップページ編1〜
  9. 【上級者向け】Webメディア〜トップページ編2〜
  10. 【上級者向け】Webメディア〜トップページ編3〜
  11. 【上級者向け】Webメディア〜記事ページ編1〜


【HTML】

初めてHTMLを学ぶ方向けに、HTMLの基本文法から、レイアウトするためのHTMLタグの記述方法など、Webサイトをマークアップする上でかかせないスキルをご紹介します。

  1. HTML入門 第1回
  2. HTML入門 第2章
  3. HTML入門 第3回
  4. フォーム
  5. テーブル
  6. テキストとリスト
  7. リンクと画像・動画・オーディオ
  8. HTMLテクニック
  9. 要素のセクショニング


【CSS】

初めてCSSを学ぶ方向けに、CSSの基本文法からCSS3などの応用まで学びます。実際にレイアウトを組んだり、実践しながら学びます。

  1. CSS入門 第一回
  2. CSS入門 第二回
  3. テキストのスタイル
  4. ボックスのスタイル
  5. 背景・シャドウ・リスト
  6. レイアウト
  7. セレクタ
  8. セレクタ応用


【実践コーディング

実際にHTMLとCSSを利用して、様々なタイプのWebサイトをいちからマークアップする方法をレクチャーしていきます。量をこなして、一人でWebサイトをマークアップ出来るようになりましょう!

  1. 【初心者向け】クリニックサイトのマークアップ(1)
  2. 【初心者向け】クリニックサイトのマークアップ(2)
  3. 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜
  4. 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜
  5. 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜
  6. 【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜
  7. 【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜
  8. 【上級者向け】Webマガジンサイトのマークアップ(1)
  9. 【上級者向け】Webマガジンサイトのマークアップ(2)
  10. 【上級者向け】Webマガジンサイトのマークアップ(3)
  11. 【上級者向け】Webマガジンサイトのマークアップ(4)


※NESTonlineの他の講座を受講されている方は、一部内容が重複いたしますので、ご注意下さい


NEST online, ウェブデザイン / プログラミング

テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。

卒業生は1000名以上です。


★提供しているサービス

2ヶ月のWebデザインコース

2ヶ月未経験からWebデザイナーへ。
未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースです


Webデザインキャンプ

【2日間で全てを学ぶ!】Webデザイン集中講座


Railsキャンプ

RailsCamp -2日間集中プログラミング入門講座-


など


Sections
9 lectures 1 hour
  • Lecture 1. Photoshopでできること Free Preview

    グラフィックツール定番のPhotoshop ! 基礎の基礎から中級までレベルアップを目指します。
    1つの動画につき1つの作品を作りながら、難なく楽しく学ぶ事が出来ます。

    04:55
  • Lecture 2. 画面構成を理解し、パネルやツールバーの基本操作を知ろう Free Preview
    まず初めに覚えるべき、Photoshopの画面構成について学びます。
    06:42
  • Lecture 3. ファイルを新規作成する方法を学ぼう

    ファイルを新規作成する方法を学ぼう

    07:05
  • Lecture 4. まずはじめに覚えたい、基本ツールの使い方
    まずはじめに覚えるべき、Photoshopの基本のツールの使い方を学びます。
    06:20
  • Lecture 5. 画像の貼り付けや拡大・縮小する方法
    Photoshopファイル上に、画像を貼り付ける方法と、その画像を拡大縮小、回転させる方法について学びます。
    05:06
  • Lecture 6. フィルター機能で写真をイラスト風に変えよう
    フィルター機能を使って、写真をイラスト風に変える方法について学びます。
    04:02
  • Lecture 7. 長方形選択ツールで画像の一部分にのみ編集を加える方法

    長方形選択ツールを使って、画像の一部分のみにエフェクトを加える方法について学びます。

    04:35
  • Lecture 8. ブラシツールを使って、写真にキラキラした演出を加える方法
    Photoshopのブラシツールを使って、写真にキラキラした演出を加えます。
    06:12
  • Lecture 9. ファイルをjpg形式に変換する方法

    Photoshopで作成したファイルをjpgに変換する方法を学びます。

    04:26
10 lectures 1 hour
  • Lecture 10. 画面を拡大縮小したり並べて表示する方法
    Photoshopの画面を拡大縮小したり、ウィンドウを並べる方法を学びます。
    04:05
  • Lecture 11. 色調補正パネルで画像の明るさやコントラストを調整する方法
    色調補正パネルの「明るさ・コントラスト」を調整する方法について学びます。
    04:25
  • Lecture 12. 色調補正パネルを使って、画像の一部分をモノクロに変える方法

    色調補正パネルを使って、女性の唇以外の部分をモノクロに変えます。

    05:45
  • Lecture 13. 色の置き換えツールを使って、色を置き換える方法
    色の置き換えツールを使って、紫色のファイルを青色に変えます。
    04:52
  • Lecture 14. ぼかしツールを使って、写真をミニチュア風に加工する方法
    ぼかしツールを使って、写真にぼかしを加え、ミニチュア風になるように色調補正を加えます。
    08:01
  • Lecture 15. [実践]様々なツールを駆使してトイカメラ風の画像に加工しよう
    色調補正系のツールや、様々な選択範囲の作成ツールを駆使して、画像をトイカメラ風になるように加工します。
    04:22
  • Lecture 16. Photoshopのレイヤー機能について

    Photoshopの基本である、レイヤー機能について学びます。

    04:29
  • Lecture 17. クイック選択ツールで、複雑な形の写真を綺麗に切り抜く方法

    クイック選択ツールを使って、人物を選択し、綺麗に切り抜きます。

    03:17
  • Lecture 18. [実践]曇り空の写真を晴れの写真に合成してみよう
    クイック選択ツールを使って、空の部分を綺麗に選択し、その部分に晴れの画像を合成させます。
    01:44
  • Lecture 19. [チャレンジ]人物を綺麗に切り抜いて、写真に合成させよう
    チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
    08:33
10 lectures 1 hour
  • Lecture 20. テキストツールを使って文字を入力する方法
    テキストツールを使用して、テキストを入力し、フォントの種類や大きさなどのスタイルを変更します。
    07:15
  • Lecture 21. 範囲内で自動改行させる、テキストボックスの作り方
    Photoshopのファイル上に、テキストボックスを作成し、範囲内で自動で改行させる文章を入力します。
    05:05
  • Lecture 22. ワープ機能を使って、文字に変形を加える方法
    Photoshopのワープ機能を使って、テキストに変形を加え、レトロ風のロゴを作成します。
    05:19
  • Lecture 23. シェイプツールを使って、図形やイラストを追加する方法
    シェイプツールを使って、ボタンの背景を作成し、インストールしたカスタムシェイプを使ってイラストを追加し、会員ログインボタンを作成します。
    04:56
  • Lecture 24. レイヤースタイルの基本のかけ方
    Photoshopのレイヤーに、ドロップシャドウや境界線などのレイヤースタイルをかけて、メイン画像を作成します。
    06:10
  • Lecture 25. [実践]ドロップシャドウで、思わず押したくなるボタンを作ろう
    Photoshopのレイヤーに、ドロップシャドウや境界線などのレイヤースタイルをかけて、メイン画像を作成します。
    06:40
  • Lecture 26. クリッピングマスクを使って、レイヤーを好きな形に切り抜く方法

    楕円形ツールを使って、楕円を作成し、クリッピングマスクを使って、作成した楕円の形に写真を切り抜きます。

    03:48
  • Lecture 27. クリッピングマスク機能でFacebookのカバー写真を作ろう
    クリッピングマスク機能を使って、写真を切り抜き、コルクの背景に合成させたFacebookのカバー写真を制作します。
    03:14
  • Lecture 28. スライス機能を使って、画像をパーツ毎に書き出す方法
    スライス機能を使って、スライスを作成し、photoshopファイルをパーツ毎に画像として書き出します。
    05:05
  • Lecture 29. [チャレンジ]WEBサイトのメイン画像を作ってみよう
    チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
    09:31
10 lectures 1 hour
  • Lecture 30. 切り抜きツールを使って画像を指定のサイズに切り抜くする方法
    切り抜きツールを使用し、画像を指定のサイズに切り抜き(トリミング)します。
    04:31
  • Lecture 31. 長方形選択ツールを使って、2つの画像を合成する方法
    長方形選択ツールを使用し、海の写真をコピーし、窓枠に違和感なく貼り付けます。
    05:05
  • Lecture 32. 楕円形選択ツールを使って、2つの画像を合成する方法
    楕円形選択ツールを使用し、ピザの写真をコピーし、お皿の上に違和感なく合成します。
    07:21
  • Lecture 33. [実践]選択ツールを使って、画像を違和感なく合成してみよう
    様々な選択ツールを利用して、レモンの写真をコピーし、別の写真に違和感なく合成します。
    06:24
  • Lecture 34. クイック選択ツールを使って、複雑な輪郭の画像を切り抜く方法
    クイック選択ツールを使って、人物を選択し、切り抜きます。
    04:13
  • Lecture 35. マスクモードで選択範囲を微調整する方法

    クイック選択ツールを使って選択した範囲を、マスクモードでさらに微調整し、綺麗な選択範囲を作成します。

    04:25
  • Lecture 36. 自動選択ツールを使った、同じ色の部分を選択する方法
    自動選択ツールを使用し、バラの写真を切り抜き、花嫁が持っているような画像を作成します。
    04:27
  • Lecture 37. 様々な選択ツールを駆使してネットショップの商品画像を作ろう

    様々な選択ツールを利用して、シャツやネクタイの画像を切り抜き、必要なテキストを入力し、よくあるネットショップのアイキャッチ画像を制作します。

    11:04
  • Lecture 38. Photoshopを使って、髪の毛を綺麗に切り抜く方法
    Photoshopのクイック選択ツールや自動選択ツール、境界線を調整するなどして、髪の毛を綺麗に切り抜きます。
    04:10
  • Lecture 39. [チャレンジ]様々な選択ツールを駆使して、コラージュ作品を制作してみよう
    チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
    05:27
10 lectures 1.5 hours
  • Lecture 40. Photoshopのレイヤーの仕組みとレイヤーパネルの操作
    Photoshopのレイヤーの仕組みを理解して、レイヤーパネルの操作方法(移動や名前の変更、グループ化など)をマスターします。
    06:15
  • Lecture 41. Photoshopレイヤーの不透明度、表示非表示の設定方法

    Photoshop上のレイヤーの不透明度を調整し、違和感なく画像を合成します。

    05:57
  • Lecture 42. レイヤーにカラーラベルを設定し、効率よく管理する方法

    レイヤーをリンクさせ、複数のレイヤーを一気に編集します。カラーラベルを設定し、管理しやすくレイヤーパネルを設定します。

    07:47
  • Lecture 43. [実践]レイヤーの不透明度を調整するアイキャッチ画像を作ろう
    バラバラに配置された写真を整列させ、長方形の不透明度を調整し、感じの良いアイキャッチ画像を作成します。
    07:27
  • Lecture 44. レイヤースタイルで、レイヤーにドロップシャドウをかける方法
    レイヤースタイルのドロップシャドウを使って、レイヤーに影をつけます。
    09:01
  • Lecture 45. レイヤースタイルの光彩で、レイヤーをネオン風に光らせる方法

    レイヤースタイルの光彩を使って、テキストをネオン風に光らせたクリスマスカードを作成します。

    06:15
  • Lecture 46. パターンオーバーレイで、レイヤーにざらざらした質感を加えよう
    パターンオーバーレイを使って、背景のレイヤーにざらざらした質感を加え、リッチなウェブサイトのデザインを作成します。
    04:39
  • Lecture 47. [実践]レイヤースタイルで、お申込みリンクのバナーを作ろう

    様々なレイヤースタイル機能を使って、単純なレイヤーにエフェクトを加え、かわいい商品のお申込みリンクのバナーを作成します。

    09:54
  • Lecture 48. Photoshopでオリジナルパターンを制作する方法

    Photoshopを使って、オリジナルのパターンを作成し、パターンオーバーレイを使ってAirmailの枠線を作ります。

    08:17
  • Lecture 49. [チャレンジ]レイヤースタイル駆使してプロ並みのポスターを作ってみよう
    チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
    14:35
10 lectures 1 hour
  • Lecture 50. Photoshopで段々と透明になるグラデーションの作成方法
    レイヤーから選択範囲を作成し、選択範囲をグラデーションで塗りつぶし、段々と透明になるグラデーションを作成します。
    03:20
  • Lecture 51. ブラシツールを使って自由に絵を描く方法
    ブラシツールを使って、クレヨン調のブラシを設定し、黒板に文字を描きます。
    08:34
  • Lecture 52. 無料のカスタムブラシを使ってポスターを制作する方法
    無料のカスタムブラシをインストールし、そのブラシでスタンプのように絵を描き、一瞬でポスターデザインを完成させます。
    07:46
  • Lecture 53. [実践]ブラシツールを使って、女性の顔に化粧を施してみよう
    ブラシツールを使って、女性の頬に赤いブラシを描き、不透明度を下げて違和感なく化粧を施します。
    07:16
  • Lecture 54. シェイプツールを使って、グラデーションのボタンを作成する方法

    シェイプツールを使って、角の丸い長方形を作成し、グラデーションを設定して押したくなるボタンに編集します。

    08:24
  • Lecture 55. ペンツールを使って、自由な線を描く方法

    アンカーポイントとパスについて理解し、ペンツールを使ってアンカーポイントを作成し、ハンドルを操作して、英語の文字をトレースします。

    07:46
  • Lecture 56. パス選択ツールでアンカーポイントの位置やハンドルを操作しよう

    パス選択ツールを使って、アンカーポイントの位置を調整し、ハンドルを操作して丸みを出し、様々なデザインのリボンを作成します。

    07:09
  • Lecture 57. 無料のカスタムシェイプを使って、フラットなボタンを作成しよう

    無料のカスタムシェイプをインストールし、一瞬でフラットなボタンを作成します。

    06:54
  • Lecture 58. ペンツールやパス選択ツールで、吹き出しアラートを作ろう

    長方形ツールで作成した四角形に、ペンツールを使ってアンカーポイントを追加し、パス選択ツールでポイントの位置を調整し、ふきだしになるようにデザインします。

    04:46
  • Lecture 59. [チャレンジ]シェイプツールを駆使して、ポストカードをデザインしてみよう
    チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
    11:41
9 lectures 43 mins
  • Lecture 60. テキストツールで文字入力し、文字パネルでスタイルを変更しよう
    テキストツールを使って文字を入力し、文字パネルでサイズや色の設定方法を学びながら、名刺を制作していきます。
    05:30
  • Lecture 61. 自動改行できる、テキストボックスの作成とスタイルの変更方法
    長い文章を範囲内で自動改行できるテキストボックスを作成し、効率よく制作する方法を学びながら、カクテル紹介ポスターを制作していきます。
    04:34
  • Lecture 62. [実践]テキストツールを使って、雑誌のページを作ってみよう

    単純なテキストの入力と、テキストボックスでの入力との違いやメリットを理解した上で、2つの入力方法を使い分けつつ、雑誌のページデザインを作っていきます。

    06:13
  • Lecture 63. シェイプツールで作成したパスに沿って、文字を入力する方法

    シェイプツールで雨の形を作成し、雨の中にテキストを入力して、かわいいポスターを作成します。

    04:12
  • Lecture 64. ペンツールで作成したパスに沿って、文字を入力する方法

    ペンツールで半円のパスを入力し、そのパスに沿ってテキストを入力し、ビンテージ風のロゴを作成します。

    03:52
  • Lecture 65. ワープテキストを利用して、文字を変形させる方法
    テキストツールを使って入力した文字を、ワープさせ、変形させます。
    02:52
  • Lecture 66. 遠近法ワープを使って、立体的に文字を変形させる方法
    テキストツールを使って入力した文字を、遠近法ワープを使って、ビルから垂れ下がったポスターのように変形させます。
    05:35
  • Lecture 67. [実践]テキストツールで、ビンテージロゴを制作してみよう
    デザインに合った無料の新規フォントをインストールし、ビンテージ感のあるロゴを完成させます。
    01:53
  • Lecture 68. [チャレンジ]様々なテキスト変形ツールで、ボトルラベルをデザインしよう
    チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
    08:02
10 lectures 1 hour
  • Lecture 69. レイヤーマスクを使って画像を切り抜く方法
    Photoshopのレイヤーマスク機能を使って、画像を切り抜く方法について学びます。
    05:17
  • Lecture 70. レイヤーマスクを使って、画像を徐々に透明にする方法

    Photoshopのレイヤーマスク機能を使って、画像を徐々に透明にする方法について学びます。

    03:34
  • Lecture 71. クイックマスクモードで、細かく選択範囲を微調整する方法

    クイックマスクモードで、作成した選択範囲をさらに細かく微調整し、複雑な写真を綺麗に切り抜きます。

    04:30
  • Lecture 72. [実践]レイヤーマスクを使って、カリグラフィポスターを作ろう

    レイヤーマスク機能を使って、アーティスティックなカリグラフィポスターを制作します。

    05:45
  • Lecture 73. レイヤーマスクを使って、曇り空を晴れに変える方法

    レイヤーマスク機能を使って、写真の曇り空部分を切り抜き、代わりに晴れの写真を貼り付けて合成します。

    03:24
  • Lecture 74. Photoshopのレイヤーマスクで、髪の毛の色を変える方法
    クイック選択ツールを使って、髪の毛を綺麗に選択し、色調補正をかけて、髪の毛の色を変えます。
    06:01
  • Lecture 75. クリッピングマスクを使って画像を切り抜く方法
    クリッピングマスクの特性を理解し、実際にクリッピングマスクを使って、画像に直接変更を加えずに画像を切り抜きます。
    05:44
  • Lecture 76. クリッピングマスクを使って、本のカバー柄を変える写真合成方法
    本のカバーの形にシェイプを作成し、クリッピングマスクを使って、本のカバーを革の画像に合成させます。
    06:33
  • Lecture 77. [実践]クリッピングマスクで、Webサイトメイン画像を作ろう

    ペンツールでシェイプを作成し、作成したシェイプの形に、クリッピングマスクを使って画像を切り抜き、綺麗なウェブサイトメイン画像を作成します。

    08:10
  • Lecture 78. [チャレンジ]様々なマスクツールで、Webサイトのメイン画像を作ろう
    チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
    10:13
7 lectures 40 mins
  • Lecture 79. アクションを使ってボタン一つで画像をレトロ風に加工する方法
    無料のアクションをインストールし、単純な画像にボタンひとつでレトロ風になるエフェクトを加えます。
    05:45
  • Lecture 80. レベル補正を使って食べ物を美味しそうに補正する方法
    色調補正のレベル補正を使って、食べものの写真を美味しそうに補正します。
    08:31
  • Lecture 81. フィルター機能を使って、写真をイラスト風に加工する方法
    フィルター機能を使って、写真をイラスト風に加工します。
    07:03
  • Lecture 82. 自動処理の機能を使って写真をHDR風にしよう
    Photoshopの自動処理機能を使って、普通の写真をHDR風に加工します。
    04:19
  • Lecture 83. シャープツールを使って、人物の目をはっきりさせる方法
    写真に直接変更を加えれるように画像をラスタライズし、写真に直接変更を加え、シャープツールを使って、人物の目をはっきりさせます。
    02:42
  • Lecture 84. スポット修正ブラシツールを使って、ニキビやシワを消す方法

    スポット修正ブラシツールを使って、人物のニキビやシワを消し、ぼかしツールで肌をなめらかにするレタッチを行います。

    05:21
  • Lecture 85. Photoshopで人の歯を白くしたり、目の充血をなくす方法

    クイック選択ツールで歯の部分を綺麗に選択し、明るさを調整して白くします。目の部分も同様に白く補正します。

    06:33
7 lectures 36 mins
  • Lecture 86. ワイヤーフレームとは何かを理解しよう
    ワイヤーフレームとはなにか、なんのために作るのかを理解し、ワイヤーフレーム制作で大事なポイントについて学びます。
    05:31
  • Lecture 87. Web制作のためのワイヤーフレーム作成手順と使用ツール

    ワイヤーフレームをどのような手順で作成すれば良いかを知り、ワイヤーフレームを作成するためのツールをレクチャーします。

    05:48
  • Lecture 88. 失敗しないWebサイト制作のヒアリングのコツ

    そもそもヒアリングとはなにかを知り、ヒアリングすることの目的を知ります。失敗しないためにどのようにヒアリングしていけばよいのかなどをお伝えします。

    04:37
  • Lecture 89. Webサイト制作のためののヒアリング方法

    クライアントの状況に応じたヒアリングを行うことができるように、ワイヤーフレームを作成するために、何を聞けば良いのかを知ります。

    05:06
  • Lecture 90. Webサイトを構成するレイアウトパーツの役割と名称

    Webサイトの一般的なレイアウトを知り、各パーツがそれぞれどんな役割を果たしているのかを知ることで、ワイヤーフレームを作れるようになります。

    05:59
  • Lecture 91. 初心者のためのワイヤーフレーム作成方法
    実際のワイヤーフレームの作成手順を知り、どんなツールを使用してワイヤーフレームを作成するのかをお話します。
    03:37
  • Lecture 92. 失敗しないワイヤーフレーム作成方法
    実際のワイヤーフレームを見て、どんなものを作れば良いのかお話します。
    05:46
9 lectures 2 hours
  • Lecture 93. 初心者のためのWebデザインの方法・勉強法
    Webサイトデザインの勉強方法を知り、独学でWebサイトデザインができるようになるようレクチャーします。
    05:00
  • Lecture 94. パンくずリストの作り方

    四角形ツールを使って背景を作成し、テキストツールやペンツールを利用してパンくずリストをデザインします。 ガイドを作成、表示して、1px単位の綺麗なデザインを目指します。

    18:19
  • Lecture 95. 押したくなるダウンロードボタンの作り方

    四角形ツールを使って基盤のボタンを作成し、グラデーションにします。レイヤースタイルで浮いたようにエフェクトをかけ、無料でダウンロードしたアイコンを使って「押したくなるダウンロードボタン」を作成します。

    25:00
  • Lecture 96. バナーの作り方

    四角形ツールでバナーの背景を作成し、テキストツールで文字の入力とスタイルの変更を行い、よくある「セールのバナー」を作成します。

    14:33
  • Lecture 97. Webサイトのメインビジュアルの作り方

    四角形ツールで基盤の背景を作成し、写真を配置し、クリッピングマスクをかけて、綺麗なウェブサイトのメインビジュアルを作成します。デザインにあった無料のフォントをダウンロードして使用します。

    11:06
  • Lecture 98. ナビゲーションの作り方

    ペンツールでシェイプを作成し、レイヤーのグループ化で作業を効率化しつつ、Webサイトのナビゲーションを作成していきます。

    09:58
  • Lecture 99. ガイドを使ったWebデザインのベースを作成する方法
    ウェブサイトの横幅が決定したら、横幅に合わせてガイドを引きます。その方法についてお話します。
    18:47
  • Lecture 100. Webデザインで役立つ参考サイトの探し方

    参考にするウェブサイトのデザインギャラリーの紹介と、実際にWebサイトを制作していく際、どのように活用していくのか、お話します。

    03:20
  • Lecture 101. Web制作でよく使用するツール

    Webサイト制作でよく利用する、便利なChromeの拡張機能についてお話します。

    07:37
10 lectures 1.5 hours
  • Lecture 102. 第一回:デザイン前の環境設定と新規作成をしよう

    WebサイトをPhotoshopでデザインしていくために、単位をWeb用に変えたり、解像度を設定し、より作業しやすくなるスマートガイドを表示させます。

    05:43
  • Lecture 103. 第二回:シェイプを使ってWebサイトのベースを作成してみよう

    まずはWebサイトのベースとなるレイアウトを、シェイプツールの四角形を使って作成します。この時、ガイドやものさしツールを利用して1px単位で綺麗にレイアウトするのがポイントです。

    16:16
  • Lecture 104. 第三回:無料のアイコンを使ってロゴを配置してみよう

    外部ウェブサービスよりアイコンを取得し、カラーオーバーレイをかけて色を変更する事で、そのアイコンを利用した簡単なロゴを作成します。

    09:28
  • Lecture 105. 第四回:整列ツールを使って綺麗なナビゲーションを作ってみよう
    テキストツールを使ってテキストを入力し、整列ツールやガイドを利用して位置調整し、綺麗なナビゲーションを作成します。
    10:05
  • Lecture 106. 第五回:色調補正パネルを利用した、メイン画像を作ってみよう
    あらかじめ用意していた画像をクリッピングマスクで切り抜きをし、色調補正パネルを使って画像の明るさやコントラストを変え、綺麗なメイン画像を作成します。
    07:42
  • Lecture 107. 第六回:無料のアイコンを利用したバナーを作ってみよう
    外部ウェブサービスより無料のアイコンをダウンロードし、カラーオーバーレイで色の変更をし、デザインに合うようなバナーを作成します。
    15:48
  • Lecture 108. 第七回:テキストツールを使って、記事一覧を作ってみよう

    テキストツールを使って文字を入力し、文字の大きさなどのスタイルを変更し、レイヤーをコピーして再利用することで即座に記事一覧を作成します。

    13:48
  • Lecture 109. 第八回:レイヤー複製機能を使って、即座にフッターを作ろう

    すでにあるレイヤーを複製し、再利用することで、即座にフッターのデザインを完成させます。

    06:58
  • Lecture 110. 第九回:シェイプツールを使って、ページトップへを作ろう
    シェイプツールを使って、ボタンの背景を作成し、その上にテキストを入力し、シンプルな「ページトップへ」ボタンを作成します。
    05:12
  • Lecture 111. 最終回:スライスツールを使って、画像を書き出してみよう

    スライスツールを使って、画像をスライスし、適切な形式で画像をパーツ毎に書き出します。

    10:41
9 lectures 1 hour
  • Lecture 112. 第1回:Webサイト用のファイルを新規作成しよう

    Webサイトを作成するために必要な新規ファイル作成の設定を行います。

    02:07
  • Lecture 113. 第2回:ガイドを使ってWebサイトのレイアウトを作る方法-1

    ガイドとものさしツール使って、Webサイトの基盤となるレイアウトを作成していきます。ここでは、黄金比を使った2カラムのレイアウトを作成していきます。

    08:24
  • Lecture 114. 第2回:ガイドを使ってWebサイトのレイアウトを作る方法-2

    ガイドとものさしツール使って、Webサイトの基盤となるレイアウトを作成していきます。ここでは、スマートガイドを利用して簡単に要素を整列させる方法も解説します。

    06:26
  • Lecture 115. 第3回:Webサイトに背景画像を設定する方法

    クロスのテクスチャをパターン化して、Webサイトの背景画像として設定します。

    05:30
  • Lecture 116. 第4回:無料のアイコンを利用したロゴを作成する方法-1
    無料のアイコンをインターネットから取得し、カラーオーバーレイをかけ、ロゴとしてデザインしなおします。
    06:16
  • Lecture 117. 第4回:無料のアイコンを利用したロゴを作成する方法-2

    取得したロゴに合わせて、整列させた状態でテキストを入力し、ロゴを完成させます。

    04:58
  • Lecture 118. 第5回:お問い合わせバナーを作成する方法-1
    シェイプツールとテキストツールで、必要な背景のボックスやテキストをまずは作成していく方法について、解説しています。
    04:52
  • Lecture 119. 第5回:お問い合わせバナーを作成する方法-2

    作成したシェイプやテキストを、より見やすくなるように配置しなおし、デザインする方法について解説しています。

    03:57
  • Lecture 120. 第6回:テキストツールでナビゲーションを作成する方法-1

    テキストツールを使って、文字のナビゲーションを作成し、ものさしツール等を利用して均等に綺麗に配置する方法について解説します。

    04:13
8 lectures 1 hour
  • Lecture 121. 第6回:テキストツールでナビゲーションを作成する方法-2

    テキストで作成した文字ナビゲーションの下に、「現在のページの位置」がわかるようなデザインを施していきます。

    05:38
  • Lecture 122. 第7回:レイヤースタイルを使用したメイン画像を作成する方法

    画像を配置し、レイヤースタイルを使って白い枠線をつけ、ドロップシャドウのついたメイン画像を作成します。

    06:38
  • Lecture 123. 第8回:テキストボックスを使って新着情報一覧を作成しよう-1

    テキストボックスを利用し、新着情報一覧を作成します。もともとあるレイヤーを再利用します。

    08:44
  • Lecture 124. 第8回:テキストボックスを使って新着情報一覧を作成しよう-2
    入力したテキストボックスのスタイルを変更する方法を解説しています。ここでは、一つのテキストボックスの中で、複数のスタイルをかけています。
    10:03
  • Lecture 125. 第9回:写真を使ったバナーを作成する方法-1
    サイドバーにあるバナーを作成する方法を解説しています。 ここでは、写真を配置し、バナーの中に収まるようにクリッピングマスクを使って画像を切り抜きます。
    04:29
  • Lecture 126. 第9回:写真を使ったバナーを作成する方法-2

    サイドバーにあるバナーを作成する方法を解説しています。 ここでは、配置した画像にグラデーションマスクをかけ、テキストを入力します。

    05:54
  • Lecture 127. 第9回:写真を使ったバナーを作成する方法-3
    サイドバーにあるバナーを作成する方法を解説しています。 ここでは、すでにあるレイヤーを複製し、2つ目のバナーを作成しています。
    04:19
  • Lecture 128. 最終回:コピーライト付きフッターを作成する方法

    フッターを作成する方法を解説しています。 ここでは、シェイプツールで背景を作成し、テキストツールで文字を入力し、整列ツールでテキストを中央に揃えます。

    02:38
9 lectures 1 hour
  • Lecture 129. 第1回:記事ページ用のファイルの複製と修正

    記事ページを新規で作成します。 ここでは、既存のトップページのpsdファイルを複製し、ナビゲーションの修正を行います。

    04:16
  • Lecture 130. 第2回:変形ツールで、メインビジュアルを見出しに変える方法
    メニュー紹介ページの見出しを作成する方法を解説しています。 ここでは、すでにあるメイン画像の大きさを変え、テキストを入力・グラデーションマスクをかけています。
    07:55
  • Lecture 131. 第3回:既存のレイヤーを再利用してメニュー一覧を作ろう-1

    メニュー紹介ページのコンテンツを作成する方法を解説しています。 ここでは、すでにある「新着情報」のレイヤーを自動選択ツールで探し当て、再利用します。

    05:12
  • Lecture 132. 第3回:既存のレイヤーを再利用してメニュー一覧を作ろう-2
    メニュー紹介ページのコンテンツを作成する方法を解説しています。 ここでは、メニュー一覧をテキストで入力していきます。
    05:56
  • Lecture 133. 第3回:既存のレイヤーを再利用してメニュー一覧を作ろう-3

    メニュー紹介ページのコンテンツを作成する方法を解説しています。 ここでは、メニュー一覧をテキストで入力し、ガイドを使って位置を調整します。

    06:08
  • Lecture 134. 第3回:既存のレイヤーを再利用してメニュー一覧を作ろう-4

    メニュー紹介ページのコンテンツを作成する方法を解説しています。 ここでは、レイヤーを複製して、メニュー一覧を完成させます。

    04:58
  • Lecture 135. 第4回:フッターを調整する方法
    ご予約ページを作成する方法を解説しています。 この動画では、フッターの調整の仕方を学びましょう。
    03:02
  • Lecture 136. 第4回:ご予約ページ用のファイルの複製と修正

    ご予約ページを作成する方法を解説しています。 デザインを行うために、既存の「メニュー一覧ページ」のpsdファイルを複製し、見出しの修正を行います。

    04:02
  • Lecture 137. 第5回:ナビゲーションの修正と小見出しの修正
    ご予約ページを作成する方法を解説しています。 ここでは、ナビゲーションの修正と、小見出しを修正します。
    03:20
8 lectures 1 hour
  • Lecture 138. 第6回:ご予約フォームの注意文を作成する方法-1

    テキストで作成した文字ナビゲーションの下に、「現在のページの位置」がわかるようなデザインを施していきます。

    07:13
  • Lecture 139. 第6回:ご予約フォームの注意文を作成する方法-2

    ご予約ページの注意文を作成する方法を解説しています。 ここでは、作成した背景と文字を綺麗に見えるよう整列させます。

    06:39
  • Lecture 140. 最終回:ご予約フォームを作成する方法-1

    ご予約ページのフォームを作成する方法を解説しています。 ここでは、シェイプツールにドロップシャドウをかけて、入力するためのボックスをデザインしていきます。

    05:06
  • Lecture 141. 最終回:ご予約フォームを作成する方法-2
    ご予約ページのフォームを作成する方法を解説しています。 ここでは、作成した入力ボックスを複製し、文字を入力するための基準であるガイドを作成していきます。
    04:58
  • Lecture 142. 最終回:ご予約フォームを作成する方法-3
    ご予約ページのフォームを作成する方法を解説しています。 ここでは、入力ボックスのラベルを、テキストツールを使って作成していきます。
    04:04
  • Lecture 143. ご予約ページのフォームを作成する方法を解説しています。 ここでは、シェイプツールを使って作成したシェイプツールを、ラベルに合わせて大きさを変えていきます。

    ご予約ページのフォームを作成する方法を解説しています。 ここでは、シェイプツールを使って作成したシェイプツールを、ラベルに合わせて大きさを変えていきます。

    06:38
  • Lecture 144. 最終回:ご予約フォームを作成する方法-5
    ご予約ページのフォームを作成する方法を解説しています。 ここでは、入力ボックスに必要なテキストを入力していきます。
    12:09
  • Lecture 145. 最終回:ご予約フォームを作成する方法-6
    ご予約ページのフォームを作成する方法を解説しています。 ここでは、「送信ボタン」をシェイプツールとテキストツールで作成していきます。
    06:19
10 lectures 44 mins
  • Lecture 146. 第1回:Webサイト用新規ファイルの作成方法
    Webメディアのトップページを作成します。 デザインするためのPhotoshop新規ファイルを作成し、基盤となるサイト横幅を示すガイドを作成します。
    04:22
  • Lecture 147. 第2回:ガイドを使ってサイト全体のレイアウト組みをしよう-1
    Webメディアのトップページを作成します。 ここでは、全体のレイアウトをシェイプツールとガイドを使って組んでいきましょう。
    04:42
  • Lecture 148. 第2回:ガイドを使ってサイト全体のレイアウト組みをしよう-2

    Webメディアのトップページを作成します。 ここでは、ガイドを使って全体のレイアウト組みを行った後、切り抜きツールを使ってカンバスサイズを変更します。

    03:02
  • Lecture 149. 第3回:シェイプツールでヘッダーの背景を作成する方法
    Webメディアのトップページを作成します。 ここでは、シェイプツールを利用して、ヘッダーの背景を作成していきます。
    05:20
  • Lecture 150. 第4回:無料アイコンでロゴとナビゲーションを作成する方法-1

    Webメディアのトップページを作成します。 ここでは、無料のアイコンをウェブサービスよりダウンロードして、カラーオーバーレイをかけて、サイトのテイストに合うロゴを作成します。テキストツールで、綺麗に整列させたナビゲーションを作成します。

    04:58
  • Lecture 151. 第4回:無料アイコンでロゴとナビゲーションを作成する方法-2
    Webメディアのトップページを作成します。 ここでは、鉛筆ツールを使って点線の区切りを作成し、テキストの中央に配置しナビゲーションを完成させます。
    05:44
  • Lecture 152. 第5回:特集記事部分を作成する方法-1

    Webメディアのトップページを作成します。 ここでは、黄金比を使ってレイアウトを組み、基盤となる背景の長方形を作成します。

    03:18
  • Lecture 153. 第5回:特集記事部分を作成する方法-2
    Webメディアのトップページを作成します。 ここでは、画像を配置し、ガイドを上手く利用してタイトルを入力していきます。
    04:43
  • Lecture 154. 第5回:特集記事部分を作成する方法-3
    Webメディアのトップページを作成します。 ここでは、記事のカテゴリーを示すタグを、シェイプツールとテキストツールを使って作成していきます。
    03:51
  • Lecture 155. 第6回:人気記事ランキングを作成する方法-1

    WEBペディアのトップページを作成します。 ここでは、人気記事ランキングの見出しを、無料のアイコンにカラーオーバーレイをかけて作成していきます。

    04:17
10 lectures 43 mins
  • Lecture 156. 第6回:人気記事ランキングを作成する方法-2
    WEBペディアのトップページを作成します。 ここでは、人気記事ランキング一覧のサムネイル部分を作成していきます。
    06:23
  • Lecture 157. 第6回:人気記事ランキングを作成する方法-3
    WEBペディアのトップページを作成します。 ここでは、人気記事ランキング一覧のタイトルとタグを、テキストツールを使って作成していきます。
    04:07
  • Lecture 158. 第6回:人気記事ランキングを作成する方法-4

    WEBペディアのトップページを作成します。 ここでは、人気記事ランキング一覧の順位を示す数字を、シェイプツールとテキストツールで作成し、レイヤーを整理します。

    03:38
  • Lecture 159. 第6回:人気記事ランキングを作成する方法-5

    WEBペディアのトップページを作成します。 ここでは、作成したレイヤーをグループ毎複製し、中の写真やテキストを修正していきます。

    04:42
  • Lecture 160. 第6回:人気記事ランキングを作成する方法-6
    WEBペディアのトップページを作成します。 ここでは、記事と記事の間の区切り線を、ブラシツールを使って直線(点線)をつけていきます。
    03:08
  • Lecture 161. 第7回:カテゴリー一覧を作成する方法-1

    Webメディアのトップページのカテゴリー一覧を作成します。 ここでは、シェイプツールで背景を作成し、テキストツールを使って、見出しを作成します。

    05:10
  • Lecture 162. 第7回:カテゴリー一覧を作成する方法-2
    Webメディアのトップページのカテゴリー一覧を作成します。 ここでは、見出しのアイコンをテキストを使って作成し、ブラシツールで点線の区切りをつけます。
    04:19
  • Lecture 163. 第7回:カテゴリー一覧を作成する方法-3

    Webメディアのトップページのカテゴリー一覧を作成します。 ここでは、カテゴリー一覧のテキストを、テキストツールを使って作成し、行間の調整を行います。

    04:42
  • Lecture 164. 第8回:新着記事一覧を作成する方法-1

    Webメディアのトップページの新着記事一覧を作成します。 ここでは、無料のアイコンとテキストを使って、見出しを作成していきまし。

    04:07
  • Lecture 165. 第8回:新着記事一覧を作成する方法-2
    Webメディアのトップページの新着記事一覧を作成します。 ここでは、シェイプツールを使って、記事一覧の背景を作成していきます。
    02:44
10 lectures 1 hour
  • Lecture 166. 第8回:新着記事一覧を作成する方法-3

    Webメディアのトップページの新着記事一覧を作成します。 ここでは、アイキャッチとなる画像を配置し、クリッピングマスクで切り抜きます。また、テキストツールでタイトル部分を作成します。

    05:43
  • Lecture 167. 第8回:新着記事一覧を作成する方法-4

    Webメディアのトップページの新着記事一覧を作成します。 ここでは、記事の投稿日とタグをデザインするため、無料のアイコンを配置し、カラーオーバーレイでデザインテイストに合うようにカスタマイズします。

    05:33
  • Lecture 168. 第8回:新着記事一覧を作成する方法-5

    Webメディアのトップページの新着記事一覧を作成します。 ここでは、テキストボックスを使って記事本文の抜粋を表示させます。

    05:04
  • Lecture 169. 第8回:新着記事一覧を作成する方法-6
    Webメディアのトップページの新着記事一覧を作成します。 ここでは、作成したレイヤーをグループ毎複製して、記事一覧を完成させます。
    04:22
  • Lecture 170. 第9回:ページネーションを作成する方法

    Webメディアのトップページのページネーションを作成します。 テキストツールやシェイプツールを利用して、ページネーションを作成します。

    07:33
  • Lecture 171. 最終回:フッターを作成する方法-1

    Webメディアのトップページのフッターを作成します。 ここでは、フッターに配置するロゴの複製を行います。

    04:19
  • Lecture 172. 最終回:フッターを作成する方法-2
    Webメディアのトップページのフッターを作成します。 ここでは、テキストツールとシェイプツールを使って、お問い合わせフォームを作成します。
    03:47
  • Lecture 173. 最終回:フッターを作成する方法-3
    Webメディアのトップページのフッターを作成します。 ここでは、テキストツールとシェイプツールを使って、お問い合わせフォームの送信ボタンを作成します。
    05:14
  • Lecture 174. 第1回:記事ページ用新規ファイルの作成方法

    Webメディアの記事ページを作成します。 ここでは、記事ページのためのpsdファイルを複製し、いらないレイヤーを削除していきます。

    03:00
  • Lecture 175. 第2回:パンくずリストの作成方法

    Webメディアの記事ページのパンくずリストを作成する方法を解説しています。

    04:39
10 lectures 1.5 hours
  • Lecture 176. 第2回:記事ページのサイドバーの作成方法-1
    Webメディアの記事ページのサイドバーを作成する方法を解説しています。 ここでは、サイドバーの人気記事ランキングを、すでにあるレイヤーを複製し再利用する形で作成していきます。
    05:38
  • Lecture 177. 第2回:記事ページのサイドバーの作成方法-2

    Webメディアの記事ページのサイドバーを作成する方法を解説しています。 ここでは、複製したサイドバーの人気記事ランキングの横幅を、サイドバーの横幅と同じになるよう、変形ツール等を利用して調整していきます。

    05:44
  • Lecture 178. 第3回:記事ページの本文の作成方法-1

    Webメディアの記事ページの記事本文部分を作成する方法を解説しています。 ここでは、記事本文のタイトルや投稿日、カテゴリーの表記を、テキストツールを使って作成します。

    06:20
  • Lecture 179. 第3回:(続き)記事ページの本文の作成方法-2
    Webメディアの記事ページの記事本文部分を作成する方法を解説しています。 ここでは、記事本文のアイキャッチ画像をクリッピングマスクで切り抜き、テキストボックスで本文の入力を行っていきます。
    04:55
  • Lecture 180. 第3回:記事ページの本文の作成方法-3

    Webメディアの記事ページの記事本文部分を作成する方法を解説しています。 ここでは、記事本文の中の見出しを、シェイプツールやテキストツールを利用して作成していきます。

    07:11
  • Lecture 181. 最終回:関連記事一覧の作成方法-1
    Webメディアの記事ページの関連記事一覧部分を作成する方法を解説しています。 作業効率化のため、似たデザインのレイヤーを複製し再利用する形で、まずは基盤の背景の大きさなどを変形ツール等を利用して行います。
    04:45
  • Lecture 182. 最終回:(続き)関連記事一覧の作成方法-2

    Webメディアの記事ページの関連記事一覧部分を作成する方法を解説しています。 ここでは、複製したレイヤーの見出し部分のアイコンと、テキストの修正を行います。

    06:10
  • Lecture 183. 最終回:関連記事一覧の作成方法-3
    Webメディアの記事ページの関連記事一覧部分を作成する方法を解説しています。 ここでは、ガイドを使って関連記事一覧のレイアウト組みと、位置の調整を行います。
    07:09
  • Lecture 184. [チャレンジ]NESTschool公式サイトをデザインしよう(1)
    チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
    21:50
  • Lecture 185. [チャレンジ]NESTschool公式サイトをデザインしよう(2)
    チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
    16:59
9 lectures 1 hour
  • Lecture 186. Webページを設計する方法

    コンテンツを効果的に魅せるため、Webサイトの形式を考える必要があります。 ここでは、まず初心者向けに「ブログ型」と「従来型」のウェブサイトの種類の違いについて触れ、設計する方法について学びます。

    06:35
  • Lecture 187. Webサイト制作の言語、HTMLとは
    Webサイトを制作するために必要な、「HTML」とは何なのかを超初心者向けに解説しています。 初めてHTMLを学ぶ方はもちろん、今まで書いてきたけど本質的な意味を理解できていない方にもオススメです。
    05:03
  • Lecture 188. Webページがブラウザに表示される仕組み
    作成したHTMLファイルが、ブラウザにどのように表示されるのか、超初心者向けに解説しています。
    05:31
  • Lecture 189. HTML制作に必要なアプリケーションをインストールする方法

    HTMLを記述する上で、必要なエディター「Sublime Text 3」のインストール方法について、超初心者向けに解説しています。

    02:32
  • Lecture 190. HTMLファイルを新規作成する方法
    インストールした「Sublime Text 3」を使って、HTMLファイルを新規作成する方法について解説しています。
    07:15
  • Lecture 191. ゼロから学ぶHTMLタグの書き方入門

    HTMLタグの基本的な書き方について、超初心者向けに解説しています。専門的な用語はあまり使わないようにしているので、初めてHTMLを学ぶ人にオススメです。

    04:06
  • Lecture 192. [実践]HTMLを書いてみよう:簡単なテキストのマークアップ

    HTMLタグの書き方を理解した上で、実際に簡単なテキストをマークアップしていきます。 見出しタグや段落タグの意味を覚えながら、基本文法を定着させることが、ここでの目的です。

    07:00
  • Lecture 193. HTMLファイルをブラウザで表示させるには
    記述したHTMLファイルを、ブラウザで表示させる方法について解説しています。 CSSを適応していない純粋なHTMLが、各ブラウザでどのように表示されるのかも確認します。
    04:17
  • Lecture 194. Web製作者が知っておくべき、ブラウザの種類と特徴
    Web製作者が知っておくべき、ブラウザの種類と特徴について解説していきます。各ブラウザで見え方に違いが出る事を知っている人を対象にしています。
    04:44
9 lectures 42 mins
  • Lecture 195. HTML5を宣言するDOCTYPEの書き方
    文書がHTML5で作成されたものであることを宣言するために、DOCTYPE宣言を行う必要があります。 DOCTYPE宣言とはそもそも何なのか、またその書き方について解説します。
    05:07
  • Lecture 196. HTMLの基本構造を記述する方法
    HTMLファイルには、必ず必要なタグがあり、それらを「基本構造」と呼んでいます。 そのタグがないとそもそもHTMLファイルとして認識されないとても重要なタグです。ここでは、「基本構造」タグの書き方と意味について解説しています。
    04:21
  • Lecture 197. 文字エンコードの種類と記述方法
    文字コードの種類と記述方法について、初心者向けに解説しています。 特に初心者の方は、文字コードの宣言は忘れがちですが、文字化けの原因にもなりますので注意が必要です。
    04:14
  • Lecture 198. Webページにタイトルを付ける<title>タグの書き方
    Webページにタイトル情報を受け渡す、タグについて初心者向けに解説しています。実際に記述しますので、「HTMLの基本文法」を理解している方向けになっています。
    04:55
  • Lecture 199. Webサイトの情報を示す<meta>タグの書き方

    Webページに、説明文やキーワード、製作者名などの情報を付与するためのタグについて、初心者向けに解説しています。 タグは、SEOにも効果があり、非常に重要なタグなので、ぜひ書き方をマスターして下さい。

    06:02
  • Lecture 200. 見出しである事を示す<h1>の書き方
    Webページに、「見出し」を表示させるの書き方について解説しています。見出しタグには、からまでの種類がありますので、どのように違うのか見出しタグの考え方について触れます。
    04:02
  • Lecture 201. 段落である事を示す<p>タグの書き方
    Webページの文章である事を示す、タグの書き方について解説しています。タグの書き方を覚えれば、どのようなものにも対応できる便利なタグなので、ぜひマスターしましょう。
    04:01
  • Lecture 202. 画像を表示するための<img>タグの書き方
    タグを使えば、ウェブページに画像を表示させる事ができます。しかし、それだけでは上手く表示されません。「どの画像か」という付加情報を加える必要があるからです。ここでは、適切なタグの書き方について解説します
    04:13
  • Lecture 203. タグに情報を付加するための属性の書き方

    HTMLタグに付加情報を加える、「属性」というものを追加する事が出来ます。この動画では、タグに横幅を設定するためのwidth属性を実際に記述し、画像の大きさをタグ上でコントロールしていきます。

    04:43
9 lectures 1 hour
  • Lecture 204. 文字の色を変える、属性の書き方
    CSSを利用せずにスタイルを適応させる""style""属性を使って、文字の色を変更させます。 初心者向けに解説していますので、CSSを知らない方でも大丈夫です。
    04:57
  • Lecture 205. レイアウトのためのタグを記述してみよう

    Webサイトのレイアウトを組むためには、コンテンツをグルーピングする必要があります。この動画では、グルーピングをするためのタグ、、タグについて解説します。

    04:56
  • Lecture 206. リストタグを使ってナビゲーションを作ってみよう
    Webサイトのナビゲーションを、リストタグを使って作成します。ここでは、リストタグの基本的な記述方法を初心者向けに解説しています。
    08:05
  • Lecture 207. メイン画像を表示させてみよう
    Webサイトのメイン画像を表示させる方法を解説しています。画像が正常に表示されなかった場合にそなえ、代替テキストである"alt"属性も加えます。
    06:56
  • Lecture 208. コンテンツをマークアップしてみよう
    Webサイトのコンテンツ部分をマークアップする方法を解説しています。ここでは、文書にあった適切なタグをどのように選んでいくのかについて学びます。
    06:56
  • Lecture 209. フッターをマークアップしてみよう
    Webサイトのフッターをマークアップする方法を解説しています。フッターに必ずある「コピーライト」の書き方についても学んでいきます。
    04:34
  • Lecture 210. CSSファイルを読み込む<link>タグの記述方法

    CSSファイルの外部読み込みをするための、タグの書き方について初心者向けに解説しています。

    05:16
  • Lecture 211. コメントアウト<!-- -->を書く方法

    HTMLファイル上に、メモを挿入する事ができるコメントアウトの書き方について、初心者向けに解説しています。

    03:19
  • Lecture 212. [実践]アバウトページを作ってみよう

    画像タグを使って写真を表示し、タグでレイアウトを組み、見出しタグで文章をマークアップし、アバウトページを作成していきます。

    08:34
10 lectures 1 hour
  • Lecture 213. フォームを作成するための<form>タグの書き方
    タグを使って、フォームを作成するための基盤を作成する方法について、初心者向けに解説しています。
    02:54
  • Lecture 214. <input>タグでテキスト入力フォームを作る方法
    タグを使って、テキストを入力出来るフォームを作成する方法について解説しています。
    04:35
  • Lecture 215. <textarea>タグで長文向けフォームを作成する方法
    タグを使って、複数行入力可能な入力フォームを表示させる方法について解説しています。
    05:05
  • Lecture 216. <input>タグで送信・リセットボタンを作る方法

    タグを使って、送信ボタンとリセットボタンを表示させる方法について解説しています。

    03:03
  • Lecture 217. <label>タグでフォームにラベルを付ける方法

    タグを使って、フォームにラベルを付ける方法について解説しています。 適切なラベルを設定する事で、ユーザビリティも向上するのでおすすめです。

    06:17
  • Lecture 218. <fieldset>タグでフォームをグループに分ける方法
    タグを使って、複数のフォームをカテゴリー化して、グループに分ける事ができます。 ここでは、グループ化するためのタグの記述方法を解説していきます。
    04:37
  • Lecture 219. <select>タグでセレクトメニューを作る方法
    タグを使って、セレクトメニューから選択できるフォームを作成する方法について解説します。
    08:38
  • Lecture 220. <radio>タグでラジオボタンを作る方法

    タグを使って、ラジオボタンを作る方法について解説します。

    05:46
  • Lecture 221. <input>タグでチェックボックスを作る方法

    タグを使って、チェックボックスを作成する方法について解説します。

    04:00
  • Lecture 222. [チャレンジ]フォームに関するタグを使って、ログインページを作ろう!
    チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
    09:35
6 lectures 36 mins