Pocket

日々インターネットは刻々と進化し続けていますが、ホームページを製作する際に欠かすことができないHTMLに関しても進化し続けています。

HTMLとHTML5というのは一体何が違うのか?

今回の記事では、この2つの違いやHTML5だからこそできる新しい機能についての解説をしていきたいと思います。

全体的な仕組みに関してはそこまで大きく変わってはいませんが、便利な機能が色々と取り入れられていますので、ぜひ今回の内容を参考にしてみてください。

avatar
HTML5ということは、それなりの進化を遂げているということですかね?
avatar
そうですね。その点についても詳しく解説していきます。

HTMLについておさらい

そもそもこのHTMLというのは、一般的にマークアップ言語と呼ばれています。

プログラミング言語とは違い、HTMLは

『文章の構造を定義するための言語』

となるため、基本的な知識さえ覚えてしまえば簡単なWEB製作ができる便利な言語となります。

avatar
HTMLはプログラミング言語ではないんですか?
avatar
実は全くの別物なんですよ。ここを勘違いしている人は多いですけどね。
avatar
マークアップ言語とプログラミング言語は別だということですね。
avatar
そういうことです。

この先WEB製作をするのであれば、まずはHTML・CSSを学ぶことが先決になります。

HTML5になって何が変化したのか?

今まで使っていたのがHTML、そして今回新しくバージョンアップされたのがHTML5となります。

実際のところ、HTML5にバージョンアップされたことによってどのようなことが変わったのか?これは気になるところです。

▼HTMLの歴史

  • 1993年にHTML1の開発
  • 1999年にHTML4にバージョンアップ
  • 2014年にHTML5にバージョンアップ
avatar
このような歴史を経て最新のHTML5を使えるようになっています。

すでにHTML5はほとんどのブラウザで対応されているため、これからWEB製作をする場合には、こちらのHTML5を当たり前のように使うことになります。

なのでこれからHTMLを使おうとしている方に、わざわざHTMLとHTML5の違いを解説する必要もないのですが、ざっくりと違いを紹介しておくと

動画・音声をタグ一つで扱えるようになった
構造がシンプルになり初心者でも使いやすくなった
アプリ系のものを作りやすくなった

これらの違いが挙げられます。

つまり『昔よりもHTMLを使いやすくなった』ということですね笑(まとめが雑ですが笑)。

HTML5を身につけるために実践すべき3つのこと

正直な話、HTMLの基本的構造を理解し、最低限ホームページを作れるようになるのは誰でもできます。

本気で極めようと思えば奥が深い分野ではありますが、段階を踏んで勉強をしていけば、すぐにそれなりのホームページを作ることはできるはずです。

avatar
一度WEBサイトを作る経験をすると、視野が大きく広がります。
補足

この先WEB系のプログラミング言語を学習することを考えている場合、このHTMLのスキルは必須です。

HTML・CSSを学習してからが本番でもあるため、まずこの基礎の段階を短期間で終わらせることが重要になります。

HTMLの学習方法に関しては、正直有料サービスを使う必要はありません。

以下のステップを踏んでいけば、間違いなく基礎は身につけることができるはずです。

まずは無料で学べるサービスを活用する

全く無知の状態からHTMLを学ぶのであれば、とりあえず最初に無料サービスを使っていきましょう。

今ではプログラミングも無料で学べる時代に突入しているため、これらのサービスを上手に活用することで、短期間で結果を出すことも可能です。

無料サービスは数多くあるのですが、その中でも特におすすめなのが

『動画を使ったサービス』

になります。

全く無知の状態でHTMLを学ぼうとすると、正直テキストでの学習は苦痛でしかありません(文字でコードの解説をするため、頭に入ってこない)。

avatar
確かにプログラミング関連の本を立ち読みしたことがありますが、知識がない状態だと全く頭に入ってきませんでした。
avatar
そうなんです。このようなネット関係の知識は、テキストよりも動画コンテンツの方が学習効率は良いんです。

最初は見ているだけで知識が得られる動画教材を使い、そこで大枠を掴んでから実践することによって挫折を防ぐことができます。

ちなみにHTML・CSSでおすすめの動画教材に関しては

が一番分かりやすいですし、勉強になります。

正直無料で提供するレベルを超えているため、こちらを使うだけでホームページ制作ができるくらいのクオリティになっています。

ドットインストールで全体像を把握することができれば、そのあとは自分でアウトプットできる環境が整っている

を使っていきましょう。

この流れで学習を進めていけば、HTML・CSSの基礎段階はクリアすることが可能です。

ちなみに上記2つのサービスは全て自分一人で学びますが、もし最初からプロの指導を受けながらHTMLでWEBアプリケーションを作りたい場合には、Tech Academyの無料サービスを利用しましょう。

直接プロが教えてくれるため、学習の進み具合が大きく変わってきます。

Tech Academyの無料サービス

HTML/CSSを使って実際にコードを打ち込んでみる

プロゲートを活用すれば、自分の手でコードを打ち込む経験ができるのですが、それはあくまでも

『サービス内でコードを打ち込んでいる』

だけなので、自分の手で0からコードを打っていることにはなりません。

avatar
1から10にするのと、0から1にするのとでは考え方が違います。

基本的な学習が終われば、その次は自分でコードを打ち、どのようなことができるのかを体感していくことが重要です。

例えば『文字の色を変えたい』と思えば、その文字の色を帰るためのコードを自分で打つことができる。

この時点で自分でコードを打つ経験をすることになります。

まっさらな状態からコードを打ち、自分の手でプログラムを動かす。

この経験を繰り返すことによってスキルはぐんぐん伸びていきます。

ちなみに余談ですが、プロゲートやドットインストールを繰り返しやり続けていても、ある程度のところで頭打ちが来ます。

それは結局

『自分の手でコードを打ち込む経験をしていない』

ため、実際に使えるスキルにはなっていないのです。

avatar
模写というのは真似するという認識で大丈夫ですか?
avatar
最初はまるまる真似してみてください。そして真似することができたら、次はコードを見ずに自分の手で同じサービスを作り上げられるようになりましょう。この繰り返しをすることで、スキルは飛躍的にアップします。
avatar
ネット上にアップしたらヤバイですよね?
avatar
当然です。それは絶対にやらないでくださいね。
既存のサービスでアウトプットすること
自分の手でゼロからアウトプットすること

この2つの違いを必ず理解しておきましょう。

実際に一つのサービスを完成させてみる

アウトプットの習慣さえつけば、そこからは成長スピードは飛躍的に加速していくため、とにかくコードを打ちまくりましょう。

できれば何かしら既存のサービスのコードを取得し、それを何個か模写することをおすすめします。

avatar
模写というのは真似するという認識で大丈夫ですか?
avatar
最初はまるまる真似してみてください。そして真似することができたら、次はコードを見ずに自分の手で同じサービスを作り上げられるようになりましょう。この繰り返しをすることで、スキルは飛躍的にアップします。
avatar
ネット上にアップしたらヤバイですよね?
avatar
当然です。それは絶対にやらないでくださいね。
補足

今世の中にあるサイトはどのように作られているのか?これはコードを見れば一発で分かりますので、それを真似することによって、自分でも既存のサービスを作るのと同じ経験ができます。

それを何個か繰り返した後、そこで学んだコードを使って自分のサービスを作り上げることができれば、その時点で

『WEBサービスを作ることができるスキル』

を持っていることになります。

まとめ

HTML5についてあれこれ解説してきましたが、結局のところ、基本的な知識さえ身につけてしまえば誰でも簡単にWEB製作はできるようになります。

HTML/CSSやプログラミング言語で挫折してしまう人の多くは、単純に

『コードを打つことをやめてしまう』

ことが原因なので、ここさえ乗り越えることができれば、以外と簡単にスキルを高めることが可能です。

avatar
継続は力なりですね。
avatar
本当に継続するのは難しいですからね。ここさえ乗り切ればいくらでも成長できるんですけど。

人間は継続することができない生き物です。

そんな中でコードを打つ習慣を持つことができれば、一歩抜きに出られることは間違いありません。

まずは入門ラインを突破し、そこから大きな飛躍を遂げるために自己投資・環境を変えることをおすすめします。

Pocket