スキル

HTML & CSSをマスターしたい!初学者向けにHTML・CSSの基礎とその学習方法を解説!

Web関連の技能に対するニーズが高いこともあって、HTML・CSSを学習したいという人は少なくありません。しかし、どうやって学んでいけばよいのかチンプンカンプンという方もいらっしゃるでしょう。

そこで、本記事ではHTML・CSSの基本やその学習方法について解説します。独学でHTML・CSSを学習する人向けに基本から解説していきますので、ぜひ参考にしてください。

HTML、CSSとは?

端的に言うと、HTMLはWebページを構成する言語で、CSSはWebのデザイン・レイアウトを担当する言語です。例えば、絵を描く時、鉛筆やペンで輪郭を書き、絵の具で色をつけますが、鉛筆やペンがHTML、絵の具がCSSに当たるわけです。

そのため、HTMLとCSSはセットでマスターする必要があります。ただ、HTMLとCSSは他のプログラミング言語と比較しても学習難易度は低いため、マスターするのにそこまで手間も時間も掛かりません。

まずは、HTMLとCSS、それぞれの役割について見ていきましょう。

HTMLはWebページの構造を指定する言語

HTMLとはWebページを作成するために開発されたマークアップ言語で、基本的に文章をマークアップ、つまり強調する言語です。人間なら、文章を読めば、タイトル、本文、段落、小見出しなどを無意識に判別できます。しかし、コンピュータは文章を見ただけでは文章の構造を理解できないため、HTMLを使用して教えてあげるというわけです。

そして、HTMLでは、HTMLタグを使ってコンピュータに指示を出すことになります。例えば、「この文章がタイトルだ」と指示する際は、以下のようなHTMLタグを使用します。

<title>タイトル</title>

<タグ名>…</タグ名>のように、マークアップしたい文章をHTMLタグで囲みます。上記の例は指定した文章をタイトルにできるHTMLタグで、文章を挟めばタイトルになります。他にも段落や見出し、太字などを指定できるタグがあり、それらを駆使してWebページを構築していくわけです。

CSSはWebページをデザインする言語

一方、CSSとは、Webページにデザインを施し、そのレイアウトを整えることで見やすいページに仕上げるための言語です。HTMLだけでもWebサイトを構築することはできますが、文章だけの単調なページになってしまいます。HTMLだけでページを作ると、本のような文章のみの構造になるわけです。

そこで、CSSを駆使し、Webページを見やすく、見栄えの良いものに仕上げていきます。CSSでは、特定のコードを使用してデザインやレイアウトを指定していきます。例えば、文字をオレンジ色にしたい場合は以下のように打ち込みます。

<title>タイトル</title>
title{color:orange;}

CSSの書き方にもよりますが、一番オーソドックスに文字をオレンジ色にしたい場合は上記のようになります。要素名{プロパティ名:値;}の順に書き、文字の色を変えるわけです。他にもCSSを駆使すると、綺麗なレイアウトにできたり、文字を強調したり、見栄えをよくしたりできます。

HTMLとCSSはどう学習すればいい?

前述のとおり、HTMLとCSSは学習の難易度が低いため、独学で身につけることが十分可能です。

ここからは、HTMLとCSSの学習方法について解説していきます。HTMLとCSSだけでも身につければWebページを作れるようになるので、是非参考にしてください。

書籍が便利

HTMLとCSSを学習する王道の方法といえば、書籍を利用することでしょう。中でも、入門レベルから中級レベルまでを網羅した書籍がおすすめです。以下では、具体的におすすめの書籍をいくつかご紹介します。

『一冊ですべて身につくHTML&CSSとWebデザイン入門講座』
価格(税込):2,486円
著者:Mana
出版社:SBクリエイティブ
出版日:2019年3月

こちらの書籍は、HTML・CSSの基本から、サイト制作までが簡潔に解説されています。言葉使いが平易なため、初学者でも難しいと感じることはないでしょう。また、Flexbox・CSSグリッドなどの最新情報も盛り込まれており、中級レベルになってもタメになる書籍です。

『スラスラわかるHTML&CSSのきほん 第2版』
価格(税込):2,178円
著者:狩野祐東
出版社:SBクリエイティブ
出版日:2018年4月

こちらの書籍ではHTML・CSSの基本の解説からはじまり、レスポンシブデザインなども解説しています。初学者向けの書籍として初版から非常に人気が高く、ベストセラーの学習本となっています。初学者がつまづきやすいポイントを重点的に解説していることもあり、非常にわかりやすいです。サイトの公開法なども掲載されているので、この書籍一冊で十分な力が身につきます。

『これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん』
価格(税込):2,838円
著者:たにぐちまこと
出版社:マイナビ出版
出版日:2017年3月

こちらの書籍では、その名前のとおり、HTML・CSSを基本の基本から学べます。また、プログラミング言語で最も使用されているJavaScriptの基本も学べるので、Web制作の基本が身につきます。ただ、Webサイトの設計や公開方法といったサイトの制作方法を紹介する書籍ではなく、基本の知識を学ぶのが主眼の本です。そのため、上記2冊で実践的なサイト制作について学び、その補助資料として本書籍を利用するのがおすすめです。

手軽に学べる!Web学習サービス

「書籍を読む時間がない」「本を読むと眠たくなる」など、書籍を用いた学習が効率的ではないと感じる人もいるでしょう。そのような方にはWeb学習がおすすめです。中でも人気があり、サービスが優れているWeb学習サイトをご紹介します。

schoo

schooは、IT系を中心に、実践的なスキルが身につく講座動画を配信しているサービスです。プログラミング、Webデザイナーそれぞれのコースが設定されており、HTML・CSSの基本を学べます。schooにはオープン、プレミアプラン、プレミアプラスワンと3つのプランが用意されており、順に無料、980円/月、1,980円/月となっています。それぞれ受講可能な講座や受けられるサービスが異なるので、気になった人はサイトをチェックしてみてください。

参考:schoo

Progate

Progateでは、HTML・CSSを含めたプログラミング言語の基礎を講師が丁寧に解説してくれます。補助テキストもあるので、スムーズに学習を進められます。

無料プランと980円/月のプランが用意されており、無料プランでも基礎レベルの講座を受けられます。そのため、無料プランで学び、物足りなくなったら有料プランに切り替えていくのがいいでしょう。

参考:Progate

Skill hub

Skill hubは、HTML・CSSを使用したサイト制作の基本から実践的なWebデザインまで学習できるサービスです。また、課題提出がある参加型講座もあり、学習スケジュールを組んでスムーズに学習することができます。

Skill hubでは4つの料金プランが準備されており、基本から応用、起業家レベルまでプラン別に用意されています。基本レベルは無料で学習できるので、一度サイトを確認してみるのがおすすめです。

参考:Skill hub

学習前に基本だけは押さえておこう!基本総まとめ

学習方法が決まったら、書籍を購入する、Webサービスに登録するなどの準備を進めましょう。ただ、本格的な学習に入る前に基本だけは押さえておきたいところです。

ということで、ここではHTMLとCSSの基本を総まとめして解説します。

HTMLの基本

まずは、HTMLの基本です。

HTMLでは、HTMLタグを使用し、Webページの構造定義を行なっていきます。そして、HTMLタグは118種類あり、それらを組み合わせてHTMLファイルを制作することになります。HTMLタグの一例は以下のとおりです。

・基本構造
HTML文書:<html></html>
ヘッダー:<head></head>

・ヘッダー
タイトル:<title></title>
文書の前後を定義<link></link>

・ページレイアウト
段落:<p></p>
センタリング:<center></center>

・フォント
強調(太)文字:<strong></strong>
アンダーライン:<u></u>

HTMLタグの役割を学び、どのように記述するかを理解できれば基本はOK!

上記のタグはほんの一例ですが、丸暗記する必要はなく、タグがそれぞれどのような役割を担うのか、そしてどのように記述すればいいのかを把握していればOKです。HTMLタグには、「基本構造」を定義するタグ、「ヘッダー」を定義するタグ、「ページレイアウト」を定義するタグ、「フォント」を定義するタグなどがあります。

HTMLを学ぶということは、タグを全て覚えることではなく、そのタグを使用することで文字やWebページがどう構築されるのか、どのように記述・使用すればいいのかを学ぶことだと言えます。

CSSの基本

CSSは、HTMLと組み合わせて使用する、Webページをデザイン・レイアウトするための言語です。HTMLで定義されたものにデザインやレイアウトの定義を与えることができるのがCSSというわけです。CSSの基本として押さえておくべきは、「セレクター」「プロパティ」「値」の3つの要素です。これらを組み合わせて使用することで、Webサイトを構築することになります。

CSSは3要素さえおさえれば基本OK!

上述した3要素を簡単に説明すると、セレクターは「何に」、プロパティは「どのように」、値は「どのくらい」を指定するものだと思っていただいて結構です。例えば、p{front-size:15px;}のタグをCSSで使用したとしましょう。この「p」がセレクターでHTMLのどの部分かを指定し、「front-size」がプロパティで文字やページをどうしたいか、そして「15px」が値でどのくらいにしたいかを指定するものです。

これらの3要素さえ押さえておけば、CSSがサイト制作でどのような役割を果たすのかが理解できます。そのため、基本として、この3要素だけは必ず押さえておきましょう。

プロパティの指定でサイトが自由自在!

プロパティでは、文字の色や背景、背景の色、フォントの種類、行の高さ、文字の寄せ方などを指定できます。そして、プロパティの組み合わせ方を工夫すれば、より見栄えをよくしたり、見やすいページに構成したりできます

HTMLとCSSの作成方法とは?4つのステップ

HTMLとCSSの構造がわかったところで、次にファイルを作成していきます。まずはHTMLファイルを作成し、次にCSSを適用していくイメージです。

テキストエディターを開く

テキストエディターはHTML、CSSを記述するいわばホワイトボードのようなものです。テキストエディターは、Mac、Windowsともにデフォルトでインストールされています(Macなら「テキストエディット」、Windowsなら「メモ帳」)。もしお使いのパソコンにソフトが入っていないときは、フリーソフトを検索しダウンロードしておいてください。

HTMLファイルを作成

HTMLファイルは、以下のようなコードを使用して骨格を作ることから始めます

<!DOCTYPE html>
<html lang=“ja”>
<head>
<meta charset=“UFT-8”>
<title>CSS</title>
</head>
<body>
<h1>見出し</h1>
<p>段落</p>
</body>
</html>

このファイルにHTML・CSSを使用しつつ、思い描いたサイトに仕上げていくわけです。

CSSの適用は3パターン

CSSをHTMLファイルに適用する方法には「CSSファイルを作成する」「HTMLファイルにstyleタグを作成し記述する」「HTMLタグの中に書き込む」の3パータンがあります。それぞれ違いはありますが、学習が進めばこれら3つのメリット・デメリットを理解した上で使い分けることができるようになるので、ここでは基本として3パターンがあること、3パターンをそれぞれ学習する必要があることを理解しておけばOKです。

CSSが適用されているか、Webページをチェックする

CSSファイルは、作成するごとに逐一確認しましょう。CSSが適切に使用されていなければWebページに反映されないため、やりなおさなければなりません。CSSに関する知識は身についたけれども、いざ実践となると上手くいかないことが多く、ここでつまづく初学者は非常に多いです。そのため、ストレスを抱えないためにも、少し記述したら確認するを繰り返していきましょう。

HTMLとCSSを理解したらどうすればいい?

HTMLとCSSが理解できれば、基本的なサイト制作なら一人でもできるようになります。もう一歩スキルアップしたいのであれば、デザインを学んだり、JavaScriptを学習するのがおすすめです。

デザインスキルを高める

まずは、デザインスキルです。いくらHTML・CSSを駆使できたとしても、思い描くページデザインがあいまいだと出来上がったサイトは酷いものになってしまうでしょう。

そのため、デザインスキルを高めていく必要があります。また、デザインはIllustrator、Photoshopなどのデザインツールと一緒に学ぶことでWebデザイナーとしての能力も高めることができるでしょう。

JavaScriptを学習する

JavaScriptを学習すると、アニメーションを加えたり、文章・写真を拡大する機能をつけられたりなど、サイト制作の幅が広がります。私たちが普段目にするWebサイトは、HTML・CSSに加えて、JavaScriptが使用されているものがほとんどです。

HTML・CSSだけでは単調なページになるため、もし一人だけでサイト制作を完成させたいと思うのであれば、JavaScriptも学習しておきましょう

HTML・CSSの学習を生かす!

HTML・CSSを学ぶことでプログラミング言語学習の基礎ができるので、HTML・CSSの次にJavaやPHP、C++などのプログラミング言語、Webサイトのコンテンツ管理ツールであるWordPressなどを学ぶのも良いでしょう。

ただ、仕事でも同じですが、ある技能を学んだあとに時間を置いてしまうと学んだ内容を忘れてしまいがちになります。「鉄は熱いうちに打て」と言われるとおり、学習したことを忘れないうちに素早く次の学習に移るようにするのが良いでしょう。

HTMLとCSSを使いこなしてWebサイトを構築しよう!

Webデザイナーやサイト制作者、Webライターなどを目指しているのなら、HTML・CSSに関する知識は必須です。HTMLやCSSに関する知識がないWebデザイナー等に仕事が回ってくることはないからです。

ただ、上述したとおり、HTML・CSSの学習難易度はそれほど高くありません。そのため、こちらの記事と書籍・Webサービスを利用して学習を進めていってください。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
などアクシグ代表の吉田が、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。