初めての人の「HTML5」入門

「HTML5」はWebページを作るHTMLの5回目の大きな改定版。このコースではHTML5の成り立ちからマークアップとCSS3、そしてJavaSriptの基礎を実際にコードを書きながら一緒に学びます!このコースはそれらの導入編に該当します。
4.2 (16 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.
201 students enrolled
Instructed by 中島 俊治 Design / Web Design
$19
$25
24% off
Take This Course
  • Lectures 22
  • Length 3 hours
  • Skill Level Beginner Level
  • Languages Japanese
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2015 Japanese

Course 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."


What are the requirements?

  • Webページを作るために、「テキストエディタ」というものをみなさんのPCにインストールしておいてください。
  • みなさんが作ったWebページを確認するためのブラウザが必要です。このコースでは「google chrome」を使ってご説明しますので、みなさんもインストールしておいてください。他のブラウザでも可能ですが、ブラウザによってHTML5への対応度が異なりますので、授業で説明したものと同じような動作にならない可能性がありますからご注意ください。

What am I going to get from this course?

  • WEbの新しい標準技術であるHTML5を体験することができます。具体的には「マークアップ」「CSS3」そして「JavaScript」です。
  • Webページのコーディングをよりシンプルに効率よく、またSEO対策にもつながるHTML5でのマークアップの方法を理解することができます。
  • Webページをよりリッチなデザインに、そして画像によるのではなくコーディングでコンテンツを回転させたり、伸び縮みさせたり、そして移動させ、さらにコンテンツを三次元で表示させることのできるCSS3についても学べます。
  • Webページは基本的にはスタティック(静的)なものですが、HTML5はWebページをディナミック(動的)にすることができます。これはJavaScriptというブラウザ上で動くプログラムが実現します。プログラムですから計算はもちろん、Webページ上のコンテンツやデザインをも書き換えてしまうすぐれものです。

What is the target audience?

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: HTML5を学ぶ前に
03:20

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

14:07

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

Section 2: HTML5の骨格を作るマークアップ
18:48

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

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

03:24

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

13:26

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

09:12

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

04:19

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

05:08

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

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

10:25

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


08:43

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

Section 3: Webのデザインを実現するCSS3
11:04

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

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

09:26

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

06:27

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

05:54

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

Section 4: Web上でアニメーションのできるCSS3
03:28

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

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

05:24

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

04:52

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

03:58

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

02:25

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

07:54

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

Section 5: コンテンツとデザインをコントロールするJavaScript
12:50

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

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

11:54

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

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

Microsoft MVP アワード(2014,2015)受賞。HTML5プロフェッショナル試験レベル2合格、「HTML5プロフェッショナル試験攻略テキスト(レベル1、レベル2:秀和システム)」執筆。

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

Ready to start learning?
Take This Course