初めての人の「HTML5」入門
4.2 (24 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
239 students enrolled
Wishlisted Wishlist

Please confirm that you want to add 初めての人の「HTML5」入門 to your Wishlist.

Add to Wishlist

初めての人の「HTML5」入門

「HTML5」はWebページを作るHTMLの5回目の大きな改定版。このコースではHTML5の成り立ちからマークアップとCSS3、そしてJavaSriptの基礎を実際にコードを書きながら一緒に学びます!このコースはそれらの導入編に該当します。
4.2 (24 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
239 students enrolled
Created by 中島 俊治
Last updated 11/2015
Japanese
Price: $25
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • WEbの新しい標準技術であるHTML5を体験することができます。具体的には「マークアップ」「CSS3」そして「JavaScript」です。
  • Webページのコーディングをよりシンプルに効率よく、またSEO対策にもつながるHTML5でのマークアップの方法を理解することができます。
  • Webページをよりリッチなデザインに、そして画像によるのではなくコーディングでコンテンツを回転させたり、伸び縮みさせたり、そして移動させ、さらにコンテンツを三次元で表示させることのできるCSS3についても学べます。
  • Webページは基本的にはスタティック(静的)なものですが、HTML5はWebページをディナミック(動的)にすることができます。これはJavaScriptというブラウザ上で動くプログラムが実現します。プログラムですから計算はもちろん、Webページ上のコンテンツやデザインをも書き換えてしまうすぐれものです。
View Curriculum
Requirements
  • Webページを作るために、「テキストエディタ」というものをみなさんのPCにインストールしておいてください。
  • みなさんが作ったWebページを確認するためのブラウザが必要です。このコースでは「google chrome」を使ってご説明しますので、みなさんもインストールしておいてください。他のブラウザでも可能ですが、ブラウザによってHTML5への対応度が異なりますので、授業で説明したものと同じような動作にならない可能性がありますからご注意ください。
Description

HTML5は従来のホームページを作るものからWebアプリケーションへと進化し、ゲームやユーティリティが簡単に作成できるようになりました。

HTML5には、マークアップのタグはもちろん、デザインのCSS3、プログラムのJavaScript、さらにはいろいろな機能を提供してくれるAPIなど様々な仕様の集合体です。

このコースでは、そのHTML5の入門として、「HTML5でどのようなことができるか」を実際のコーディングを交えてご紹介します。

HTML5 has evolved into Web applications from those that make the traditional home page, games and utilities can now be created easily.

The HTML5, CSS3 of design, program of JavaScript, further was also added API that will provide a variety of functions.

In this course, the HTML5 as an introduction of, we will introduce you sprinkled with actual coding the "what can do with HTML5."


Who is the target audience?
  • HTML5にはじめて触れる初心者のかたを対象としています。
  • プログラムの知識は不要です。
  • 従来のHTMLとCSSを多少かじっっているかただと理解が進みます。
  • 現役のWebデザイナ、Webコーダー、エンジニアのかたがたはもちろん、マーケティング、ヘルプデスク、営業、経営まで、Webに関わるかたがたにご覧いただけると幸いです。
  • 趣味でWebページを作りたいかたもご覧ください。
  • HTML5は、WebページだけではなくWebアプリケーションを作るためのツールです。スマホやPCで動くゲームなどにもつながっているので、ゲーム関係のかたがたもご覧ください。
Curriculum For This Course
22 Lectures
02:56:28
+
HTML5を学ぶ前に
2 Lectures 17:27

この授業では、ただ説明だけではなく、みなさんと一緒にHTML5を学べるよう、コーディングを中心にして授業を行っています。そのために、ここでは勉強を始める前にみなさんに準備してほしいことについて説明します。

Preview 03:20

HTML5は、従来のHTMLと比べるとかなり大幅な改定が行われています。
HTML5の特徴、仕様の説明、何をつくるためのものなのかをわかりやすく説明します。
ここではどうぞメモを取りながらお聞きください。

Preview 14:07
+
HTML5の骨格を作るマークアップ
8 Lectures 01:13:25

いよいよHTML5の世界へ飛び込みます。ここではWebページのコンテンツを表示する前の準備しなければならない事柄についてコーディングしながら説明します。ぜひ一緒に作りながらHTML5を楽しんでください。

なお、このセクションでの完成ファイルをzipで用意していますからダウンロードしてご利用ください。

HTML5の世界へ!まずはマークアップを学びましょう
18:48

Webページの上部は見出しやロゴなどがありますね。HTML5ではそれを明らかにするために新しい要素「header要素」というものが誕生しました。

見出しを入れるheader要素
03:24

Webページでは、グローバルナビゲーションという内部リンクをボタンにして横並べで配置するのが普通です。HTML5ではここがグローバルナビゲーションだよということを明らかにするための新しい要素「nav要素」が誕生しました。

グローバルナビゲーションのnav要素
13:26

Webページで一番大事なのはメインコンテンツ。HTML5ではメインのコンテンツはここですよという新しい要素「main要素」が誕生しました。その中ではsection要素でセクショニングが行われ、より検索エンジンなどにコンテンツを正しく伝える方法ができあがりました。

メインコンテンツのmain要素
09:12

Webページの一番下を思い出してください。著作権表示(c)がありますね。大方の国々では表示をしなくても著作権は守られるものの、著作権を侵害しないでねなどとアピールするには取り付けておいたほうがいいでしょう。著作権表示や、いわゆるフッターリンクなどは、「footer要素」という新しい要素でグループにします。

著作権を入れるfooter要素
04:19

このセクションで学んでいるHTML5のマークアップは、いわばWebページの骨格になります。骨格だけですと、構造はわかりますが、デザインがないので面白みに欠けるでしょう。ここでは、ちょっとフライングしてCSSを適用させてスマホページっぽいサイトにしてみましょう。

このCSSファイル(style.css)と背景画像(header.jpg)をダウンロードできるようにしましたので、ぜひ参考にしてください。
※画像については著作権がありますので、練習用にのみご利用ください。そして皆さん自身で写真をとったり加工したりして、よりもっと素晴らしい画像を作って、オリジナルのWebページを作りましょう!

CSSを適用してスマホページぽくしてみましょう
05:08

みなさんはWebサービスで名前とか住所を入力するボックスをご存知でしょう。あれは「input要素」という部品を使います。input要素は文字を入れるボックスのほか、スライダや、色を選んで入力したり、カレンダを表示させて日付を入力させたりすることができるなど、input要素には様々な部品のタイプがあります。


入力フォームの様々な部品を作ってみましょう
10:25

HTML5はWebアプリケーションを作るためのツールです。それに役立つ部品として「progress要素」と「meter要素」をご紹介します。この2つは似ていますが、それぞれとても便利な機能があります。

進捗具合を表示する部品や、測定・診断の状況を表示する要素を作ってみましょう
08:43
+
Webのデザインを実現するCSS3
4 Lectures 32:51

骨格であるマークアップの次は、デザインのCSS3です。CSS3は、従来のCSSより、よりリッチなデザインが可能になります。こちらも実際にコーディングしながら一緒に学びましょう。

完成ファイルをzipで用意しています。

次はデザインの世界へ!CSS3を学びましょう
11:04

従来のCSSでは、枠線を引くくらいでしたが、リッチなCSS3ではコンテンツの枠や文字に影を表示させることができます。今まで画像を作らなければできませんでしたが、コードを数行いれるだけで実現できます。

コンテンツに影を作るCSS3
09:26

従来のCSSは、枠は四角形でしたね、その角を丸くするには、やはり画像を作って当てはめてましたが、CSS3ではコーディングだけで、角を丸くすることができます。こちらもぜひ一緒に楽しみましょう。

コンテンツの角を丸くするCSS3
06:27

グラデーションの背景は、従来でしたらグラデーションの画像を作って背景にするなど、結構苦労していましたが、CSS3ではコーディングで背景にグラデーションを、しかも自由に表示させることができます。

背景をグラデーションにするCSS3
05:54
+
Web上でアニメーションのできるCSS3
6 Lectures 28:01

CSS3は画像を使わなくてもリッチなデザインを実現するだけではなく、コンテンツを回転させたり、伸び縮みさせたり、移動させるなどの変形や、三次元表示ができます。ぜひ一緒にコーディングしながら学んでいきましょう!

完成ファイルをzipで用意しています。

CSS3でアニメーションができる!CSSトランジションを学びましょう
03:28

変形のひとつめ「回転」です。CSS3トランジションでアニメーション化するので、角度を指定すればその分だけ回転のアニメーションを行います。

変形の第一歩、まずは回転から
05:24

変形のふたつめは「移動」。Webページ上のコンテンツを自由に移動させることができます。

コンテンツが動いちゃうんです
04:52

変形のみっつめは「伸縮」、1倍を基準に、2倍、3倍とコンテンツを大きくしたり、逆に0.5倍にして半分に、さらに0倍、-1倍へと伸縮すると想像を絶することが起こります。

コンテンツを伸ばしたり、縮めたりもできちゃいます
03:58

四角形のコンテンツを平行四辺形のように斜めに歪ませちゃうこともできるのです。CSS3の可能性はとんでもなく高いのです。

コンテンツを歪ませちゃくことだって簡単!
02:25

ここまでは、「変形のCSS3」を一緒に学んできましたが、色や背景色、縦幅・横幅、そして今まで学んだ角丸なんかもアニメーションにして表現することができます。ここではCSS3トランジションでアニメーションを実現します。

私達の知っているCSSでアニメーションできます
07:54
+
コンテンツとデザインをコントロールするJavaScript
2 Lectures 24:44

JavaScriptでコンテンツを書き換える方法をご紹介します。ここでは文字を入力しボタンを押してコンテンツを書き換えますが、すべてJavaScriptプログラムで行うこともできます。

完成ファイルをzipで用意しています。

いよいよプログラム。JavaScriptでHTMLコンテンツを書き換えましょう
12:50

CSS3のデザインをプログラムでコントロールする方法をご紹介します。これにより、リンクすることなく、単一のWebページ内でページやコンテンツを切り替えて表示することができるようになります。

JavaScriptでCSS3のデザインまでコントロールしてしまいましょう
11:54
About the Instructor
中島 俊治
4.7 Average rating
39 Reviews
286 Students
3 Courses
HTML5講師

97年ソフトバンク入社、GeoCities Japan 立ち上げ従事。その後、Yahoo! JAPAN、Vector、SBIなどのベンチャ企業の後独立。現在はサイバー大学、放送大学、八洲学園大学デジハリ・オンラインスクール などでHTML5の講師をつとめる。

Microsoft MVP アワード(2014,2015,2016,2017-)受賞。HTML5プロフェッショナル試験レベル2合格。

東京アプリ・ワークショップ主催、HTML5の楽しさを伝道中。