Webデザインの勉強方法

HTML&CSSの基本を身につけるためのおすすめの勉強法

投稿日:

WordPressのテーマには、無料のものでも使いやすいものがたくさんありますが、ブログを始めると、デザインに凝りたくなることもあります。

しかし、HTMLやCSSの知識がないと、「こんなデザインにしたい」と思っても、どうやってそれを再現すれ良いのか分からないことも出てくるのではないでしょうか。

HTMLやCSSについて詳しく分かっていなくてもWordPressのブログはできますが、ある程度のHTMLやCSSの知識があれば自由にカスタマイズしやすくなります。

そこで、ここではHTMLとCSSの基本を勉強する方法について説明します。

 

HTML&CSSの基本を身につけるための勉強法

それでは、以下にHTMLとCSSの基本を勉強する方法について説明します。

 

オンライン学習サービスを使って学習する

まず、HTMLとCSSをの基本を勉強する方法の1つ目は「オンライン学習サービスを使う」ことです。

HTMLやCSSの基礎を動画講義などで学べるオンラインの学習サービスがいくつかあるので、まずはそうしたサービスを使ってみるのがおすすめです。

オンライン学習サービスには無料で学習できるプランがあるものも多いので気軽に勉強を始められますし、無料プランから始めれば、自分にはどんなやり方が合うのか、まずは試してみることができます。

そして、良さそうならば有料プランにアップグレーしてもっと深く学ぶこともできますし、合わなければ別のやり方で学んでも良いので、初心者にもとっつきやすいです。

これらのサービスだけですべてを理解するのは難しいかもしれませんが、まずは勉強の取っ掛かりとして使ってみるには良いと思います。

ちなみに、オンライン学習サービスといってもいろいろありますが、たとえば、私が使ってみたことがあるのは、以下のサービスです。

HTML&CSSの学習に使っていたサービス

  1. Progate
  2. ドットインストール
  3. Udemy

私は上記の3つのサービスを併用して勉強していましたが、同じHTMLやCSSが学べるサービスでも、これらは学習の仕方が大きく違うので、それぞれのサービスの特徴を以下に挙げてみます。

 

Progate

まず、「Progate」の特徴は以下のとおりです。

  1. 無料プランがあるので気軽にHTMLやCSSの基礎を学べる
  2. ブラウザ版とスマートフォンアプリがあるので、スキマ時間を使って勉強しやすい
  3. 月額980円で有料プランにアップグレードして、中級編のコースを学習可能
  4. サイトやアプリのデザインがオシャレで学習がはかどる
  5. 可愛いキャラクターが登場し、ゲーム感覚で楽しく学習できる

「Progate」は、はじめに無料プランで「HTML&CSS初級編」のコースを学習できるので、気軽に勉強を始められます。

初級編で学べる内容はそれほどボリュームも重たくはないですし、可愛いキャラクターと一緒にゲーム感覚で進められるので、初心者にも学びやすくおすすめです。

 

ドットインストール

次に、「ドットインストール」の特徴は以下のとおりです。

  1. 3分程度の短い動画講義でHTML&CSSの基礎を学べる
  2. パソコンでスキマ時間を使って勉強するのにちょうど良い
  3. ポイントを抑えつつもテンポよく説明が進められていて理解しやすい
  4. 分からないところは、いつでも動画を前に戻して見直すことができる
  5. 月額980円のプレミアムサービスでより実践的な学習ができる

ドットインストールは、1回のレッスンが3分という短い動画で完結しているので、スキマ時間を使って勉強するのにピッタリです。

3分というと短すぎるように思うかもしれませんが、一つひとつの動画でテーマに沿ってテンポよく説明されているので、要点はきちんと理解できます。

 

Udemy

次に、「Udemy」の特徴は以下のとおりです。

  1. 動画での講師の丁寧な解説付きで学習できる
  2. スマートフォンアプリがあるので、スキマ時間で学習しやすい
  3. 有料のサービスだが、セールで一つのコースが1,300円ほどで購入できることが多いので、手軽に試してみることができる
  4. 一つのコースには、数時間分の講義がいくつかのセクションに分かれてパッケージされているので、内容が充実している

「Udemy」は、上記のように無料のサービスではないものの、1,300円ほどの価格で一つのコースを購入できることが多いので、手軽に試してみることができます。

と言っても、一つのコースには合計にすると数時間~数十時間もの講義がパッケージされているものもあるので、内容は充実しています。

また、たくさんのコースがあるので、目的に合ったものを選んで学習することが可能です。

メモ

上記の「Progate」「ドットインストール」「Udemy」は、初心者で学習に利用している人も多い人気のサービスなので、HTMLやCSSを身につけたいと思ったら、まずはこれらのサービスから自分に合いそうなものを選んで勉強してみることをおすすめします。

 

基礎を解説している書籍を読む

次に、HTMLとCSSをの基本を勉強する方法の2つ目は「基礎を解説している参考書を読む」ことです。

オンライン学習サービスは「スキマ時間で学びやすい」「無料でも学習できる」といったメリットがありますが、何かを学ぶには参考書や解説書を読むと効率的に知識を身につけられます。

たとえば、書籍を使って勉強するメリットには以下のようなことがあります。

書籍を使って学ぶメリット

  1. 解説書や参考書では、HTMLやCSSの基本が体系的に説明されているので、全体像をつかみやすい
  2. 基礎が一通り説明されている教科書的な本を一冊手元に置いておくと、何か疑問に思った時にすぐに手にとって調べられる
  3. 書籍は有料だが、図書館で借りれば無料でも読める

オンライン学習サービスも充実していますし、ちょっとしたことは検索して調べることができるとは言っても、書籍を使った勉強法はやはり鉄板です。

人気のある良書は図書館で探せることが多いので、良書を数冊借りてざっとでも読んでみれば、それだけでもそれなりの知識が身につきます。

もし書籍を購入する場合は、HTMLやCSSの解説書はたくさん種類があるので、「初心者向けなら、初心者に分かりやすく、基礎的なことが広く説明されているか」など、その本が自分の学習レベルや目的に合っているかを基準に選ぶことをおすすめします。

 

実際にサイトをつくってみる

次に、HTMLとCSSをの基本を勉強する方法の3つ目は「サイトをつくってみる」ことです。

まずはオンライン学習サービスや書籍を使って基本を理解する必要がありますが、一通り基礎が理解できたら、次に自分でタグを打ってサイトをつくってみると良いです。

そうすると、コードの使い方もより具体的に理解できますし、主要なコードを自然と覚えられます。

「サイトの模写をしてみる」、もしくは「実践型の参考書を見ながらサイトをつくってみる」といったこともできるので、自分に合ったやり方で、実際にHTMLとCSSをサイトを作成してみることをおすすめします。

 

まとめ

以上、次に、HTMLとCSSをの基本を勉強する方法について説明しました。

ブログを運営していると、デザインを変えて見栄えを良くしたいと思うこともありますが、自分の希望通りにデザインをカスタマイズするには、多少なりともHTML&CSSの知識が必要です。

HTMLやCSSは、さまざまな方法で学ぶことができますが、一番手軽に学べるのはオンライン学習サービスを使った方法です。

無料で学べるものも多いので、まずはお試しとして使い始めることができますし、スマートフォンアプリを使えば場所や時間に縛られずに、ちょっとしたスキマ時間を使って効率的に学習できます。

また、書籍を併用して学習すると、オンライン学習サービスだけで足りないところや理解しきれないところがあった時にも、書籍がそれを補ってくれるのでおすすめです。

そして、一通りの知識が得られたら、次は自分でサイトを作成してみるとより理解が深まります。また、それによって、それまでは気付かなかった理解不足の点を見つけることもできるので、実際にサイトをつくってみるところまで実践することをおすすめします。

スポンサーリンク

  • この記事を書いた人

ミヤノ カナコ

ブログ運営歴5年目のブロガー・フリーランスライター。OL時代には、多くのカスタマーセンターやヘルプデスクでメール・電話での問い合わせ対応に従事。現在は、ブログでの情報提供のほか、エッセイの発信を中心に活動中。このブログでは、ブログのつくり方や文章の書き方など、ネットビジネスに役立つ情報をお届けします。

Copyright© ミヤノカナコ.com , 2019 All Rights Reserved.