Webデザイン初心者におすすめのHTMLを教えてくれる良質サイト12選


Webページを作りたい!と思った方は、まずHTMLを覚えましょう。
もちろん専用ソフトを使って作ることもできますが、
HTMLをしらないとなかなか思った通りにいかないのがWebページです。
CoolなWebサイトを作りたいなら、しっかり身につけておくことが大事です。

とほほのWWW入門

とほほのWWW入門

http://www.tohoho-web.com/www.htm

HTMLを学習するなら老舗中の老舗「とほほのWWW入門」です。
1990年代から親しまれ、20年近くも続くこのサイトは、
Webに携わる方なら知らないという方はいないでしょう。
Webデザイナーの登竜門ともいわれるこのサイト、わかりやすさはピカイチです。

 

HTML入門/ドットインストール

HTML入門/ドットインストール

http://dotinstall.com/lessons/basic_html_v3

HTMLだけでなくプログラム全般も学べる動画サイトです。
3分程度で実際に作成しながら解説している動画なので、
スムーズに理解できること請け合いです。
無料で何度でも閲覧でき、どこまで学習したか状況管理も可能です。

 

HTMLの基本/クイックリファレンス

HTMLの基本/クイックリファレンス

http://www.htmq.com/htmlkihon/index.shtml

HTMLのタグについて検索するとほぼ上位に出てくる
「クイックリファレンス」のサイトです。
初心者の方はタグよりも基本知識を優先して見ておくといいです。
簡単な説明ではありますが、的を得ているので必ず役立ちます。

 

ホームページ作成の基本/All About

HTMLの基本/クイックリファレンス

http://allabout.co.jp/gm/gl/2459/

2001年から続く総合情報サイト「All About」。
HTMLの解説が図解入りでひとつひとつていねいなのが好評です。
小技的なテクニックも満載ですので、ブックマークしておくことを
おすすめします。

 

ホームページ作成 超初心者のためのHTML講座 (ホームページを作ろう!) /超初心者のための HTML講座&HSP講座

ホームページ作成 超初心者のためのHTML講座 (ホームページを作ろう!) /超初心者のための HTML講座&HSP講座

http://kouza.hamuinu.com/html

タイトル通り超初心者向けのHTMLを学習できます。
「HTMLとは」から始まり、書いてある手順通りに進めていくと、
理解を深めながら練習がどんどん進んでいきます。
現在もまだ教材ページを作成中ですが、楽しみにしておきましょう。

 

schoo(スクー)

schoo(スクー)

https://schoo.jp/

無料動画のオンライン学習サイトで、生放送や録画授業で学習ができます。
iPhoneやiPadなどのデバイスでも閲覧が可能で、自分のスキルに合わせて
学習できます。
ベテラン講師の説明を、生放送ならリアルタイムに聞いたり質問したりできます。
「無料 HTML」と検索すると、無料の録画授業が閲覧できます。

 

Webデザインレッスン

Webデザインレッスン

http://w-d-l.net/

このWebページ管理者自身が、周りから「どうすれば作れるの?」といった
多くの質問があった経緯から作ったWebサイトです。
HTMLのタグ説明だけでなく、オリジナルのチュートリアルを通じて実際のWebページを
作りながら学ぶことができます。

 

1時間で作るホームページ

1時間で作るホームページ

http://www.shoshinsha.com/hp/index.html

初心者にわかりやすいよう、会話形式で解説しているサイトです。
1時間でサーバーにアップロードして公開するまでを解説しているので、
本当に1時間でできるかどうか挑戦してみるとおもしろいですね。
ずらっと解説だけが続くと眠くなってしまう人にはおすすめです。

 

Web Programing Primer(ウェブプログラミングプライマー)

Web Programing Primer(ウェブプログラミングプライマー)

http://wp-p.info/

こちらはHTML5ですが、学習するなら問題ありません。
文章がずらっと続きますが、ざっくばらんな著者の口調が楽しく読み進められます。
サンプルのHTMLをコピー&ペーストで実際に保存して確認しながら
取り組んでみて下さいね。

 

Progate

Progate2

Progate

http://prog-8.com/lessons/html/beginner

無料のプログラミング学習サービス「Progate」です。
FacebookやTwitterで簡単にログインでき、スライドで一通りの確認して、
画面に直接コードを書いていくので、実践的にHTMLを学ぶことができます。
手軽に学習したい方向けのサイトです。

 

ホームページ制作初心者のためのHTMLタグの基礎知識・書き方がわかる記事5選/ferret

ホームページ制作初心者のためのHTMLタグの基礎知識・書き方がわかる記事5選/ferret

https://ferret-plus.com/740

「ferret」は、Webマーケティングを主体とした情報サイトです。
その中に、HTMLについての基礎知識や書き方、注意点などをまとめているページがあり、
よりSEO(検索エンジン最適化)に強いWebページづくりの知識を取り込みながら
深い学習ができます。
HTMLとSEOは切っても切れない関係です。
しっかりと結びつけながら学びましょう。

 

ごく簡単なHTMLの説明/The Web KANZAKI

ごく簡単なHTMLの説明/The Web KANZAKI

http://www.kanzaki.com/docs/htminfo.html

HTMLを語れば、それはそれは長い説明になるところを、さっくり簡単に
でもまじめに解説しています。
もうちょっと詳しく知りたい方向けにも、サイトの下の方で改めて解説しています。
「よいHTML」「わるいHTML」も掲載しているので、その違いから学べることは
今後の役に立つこと間違いなしです。

 

まとめ

HTMLを解説しているサイトは星の数ほどありますが、
自分が理解できる、納得のいく解説サイトを探して見つけることも
ひとつの勉強です。
HTMLのひとつひとつを掘り下げて、本質的な理解に結びつけて
いきましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleHTML5&CSS3で作られた無料の美しいテンプレート30選