HTML勉強方法

【2021年】HTMLの勉強方法5つ。実践的なコーディングの解説

今では、HTMLの勉強もオンライン学習などの登場により、以前と比べてより効率的に学習できるようになりました。

当ページでは「どんなHTMLの勉強方法があるのか？」オンラインサービスや、本、リファレンスサイト、自動的にHTMLを作ってくれるジェネレーターサイトなど、5つの勉強法について、サービスの紹介や解説をしています。

また、「背景画像に重ねてアイコンなどの画像を2重に配置したい」といったWebデザインの要望や、実践的なHTMLコーディングについても解説しています。

HTMLの勉強方法

１．HTML「動画学習サイト」

「ドットインストール」などの動画学習サイトでは、自宅のパソコンで実際のHTMLを作る動画を見て勉強することが出来ます。今では幾つかの動画サイトがあります。また、動画ではありませんが、動画同様にパソコンがあれば学習できるアプリについても紹介しています。

２．HTML「オンラインスクール」

オンラインによる授業で、学校のクラスのように「先生」がいてHTMLを教えてくれるサービスが、オンラインスクールになります。「zoom」など会議アプリのように、会話や質問をしながら学べます。

３．HTMLリファレンス

HTMLリファレンスサイトやリファレンス本では「font」「div」といったHTMLを辞書のように調べることが出来ます。「文字の色を変えたい」、「大きさを変えたい」場合など、どのようなタクがあるのか調べられます。

４．HTML本

動画などによるオンライン学習もおすすめではありますが、学習すべきことが端的にまとまっている本も1冊か2冊は購入しておくと、理解が深まると思います。

５．各種ジェネレーターサイト

色（カラー）の指定の際に活用してほしいのが、どんな色でも作ることが出来る「カラーリファレンス」になります。また、グラデーションを作りたい場合に、自動的に生成してくれるジェネレーターサイトも紹介しています。

HTML

１．文字「font～」（大きさの変更、色、背景色、太字）

最も基本的であり、よく活用されるHTMLが「文字」についてではないでしょうか。色をつけたり、大きさを変えたりと「文字」についてのHTMLについて解説しています。

２．みだし「h1、h2～」（デザイン、背景色、背景画像）

「h1」や「h2」などの見出しは、どのページにも出てくる要素になります。そのため、デザインをする際の要素として、重要な要素の１つになっています。

３．リスト「ul、li～」（デザイン、横並び、数字）

見出しと同様にホームぺージで活用頻度が多いのが「ul」「ol」などのリストになります。リストの作り込みは「文字」や「見出し」よりも、複雑なHTMLになっています。

HTML（応用）

１．要素に画像を重ねて配置する「background-image」など

「見出しにアイコンを配置したい」「div要素にキャラクターを設置したい」など要素に画像を重ねる方法を覚えると、Webデザインの幅が広がります。画像を重ねる方法にはいくつか方法があります。いくつかの方法について解説しています。

２．「display」を理解する（インライン要素など）

最近ではフレックスタクの登場で、2カラムや3カラムの実装も簡単になってきましたが、「display」の「インライン要素」を理解することで、「要素が横に並ばず下にずれてしまう」といったことを防げます。サイトの全体的デザインを自分でデザインしたい方は「display」を理解しておきましょう。

３．スタイルシートの「反映されない」を防ぐための理解術

ホームページデザインで良く起こりがちなのが、スタイルシートの記述ミスや読み込まなくて困ってしまうということ。そのためにはCSSのセレクターの記述方法をちゃんと把握しておきましょう。