HTML/CSS入門！基礎知識と初心者におすすめのサイトや本を紹介

HTMLとCSSはプログラミングを行う際に、欠かせない言語となっています。しかし、ここで挫折する人も少なくないでしょう。それは覚え方や学習の仕方に問題があるのかもしれません。そこで、HTMLとCSS概要について説明すると同時に、初心者におすすめするサイトや本を紹介します。

どんなプログラマーも最初は何も知らない状態から、知識や経験を積んでいます。まずは自分が理解しやすい方法を見つけて、活用することから始めてみてください。苦手意識を持っているような方でも内容を理解できれば、プログラマーとして働けるほどの知識や技術を身につけることも不可能ではありません。

この記事を読めばHTMLとCSSの違いを理解し、学習方法を身に付けられるほか、役立つサービスをうまく活用していけるようになるでしょう。

HTML・CSSの関係性と違い

HTMLとは、「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」を訳した言葉です。Webブラウザ上に表示するコンテンツの内容を表示するために用いられます。

CSSは、「Cascading Style Sheets」の略で、Webページの見た目を作るスタイルシートとも呼ばれる言語のことです。HTMLは文章を作る構造のことで、CSSはデザインをする役割を持った言語だとイメージすると、分かりやすいのではないでしょうか。

CSSがなかった時代は、HTMLの構造自体を変えて編集を行ってきていました。しかし今ではデザイン部分をCSSにすることで、コードを簡略化できるようになりました。

HTMLでできること

HTMLでできることは、主に以下の3つです。

• Webサイトの制作や、ページ上にある文字の色やサイズのデザインができる「Webデザイン」
• シンプルなテキストから文字の色やサイズを指定したもの、動画や画像を組み込んだメールが送れる「HTMLメール」
• PC やスマホなどのインターネット上で利用できる、Webアプリを作成する「アプリの作成」

それだけで十分に感じるかもしれませんが、JavaScriptやCSSを使うことで、より豊富なデザインが行えるようになるでしょう。文字コードを正しく指定しなければ文字化けを起こすこともありますが、正しいタグ付けが行えれば、自由な構造を作り出すことが可能です。

CSSでできること

CSSはさまざまなWeb開発が行える言語となっていますが、具体的にCSSでできることは、主に以下の3つです。

• Webサイトの色や文字のレイアウトを変更できる 「Webサイトのデザイン」
• CSS3でアニメーションが加えられるようになった「アニメーション制作」
• 複雑化する HTML のソースをシンプルにする「コードの簡略化」

アニメーションについては大掛かりなものが作れるわけではありませんが、部分的に簡単なプログラミングで作成できるようになりました。

またCSSでWebサイトのデザインをすることで、HTMLがタグ付け整理の役割に集中できるようになる、複雑化を防ぐ役目も担っています。つまりCSSという言語ができたおかげで、より効率的なWeb開発が可能となったのです。

HTML/CSSの基本コード一覧

HTMLとCSSを正しく使っていくためには、基本コードをしっかりと覚えて正しく記入して行かなければなりません。1つでも間違ってしまうと異なる表示方法になったり、エラー表示となったりしてしまいます。

Webサイトはいくつものコードが組み合わさって作られているので、まずはそのタグを覚えることから始めましょう。コードさえ覚えてしまえば、プログラムの内容を理解できるようになるため、プログラミングの楽しさも感じられるようになります。

HTMLで必要なタグ一覧

最初にHTMLで必要なタグの一覧を紹介します。それぞれのタグがどのような役目を持っているのかわからないと、正しく構成ができません。理解できればHTMLがどのような役割を持っているのか具体的にイメージできるので、学習もスムーズにできるようになるでしょう。

ローマ字や記号ばかりで慣れるまでは大変かもしれませんが、ここをしっかり覚えることができるかどうかで、プログラマーになれるかが決まります。

hタグ

hタグは見出しタグとも呼ばれ、見出しを表すタグとして利用されます。基本的にはh1からh4までの範囲で使われることが多く、大見出し、中見出し、小見出しで使い分けられるのが一般的です。

どれがどの見出しを表すものなのかについては、規定されていないため各企業のルールに則って使用していくことになるでしょう。【<h1>sample</h1>】のようにhタグで囲まれている部分が見出しとなります。

divダグ

divはブロック分けをする際に使用されるタグで、ほとんどのプログラミングで多用されています。たとえば【<div class=”left”>】で左ブロック、【<div class=”right”>】で右ブロックなどです。このようにすることでブロックごとの編集が可能です。

ブロック分けを行うことで、全体を一括管理せずにすむため、エラーが起きた場合にブロックごとでスムーズに対応できるようになるでしょう。

pタグ

pタグは段落を示すもので、文章を段落で区切る際に用いられるタグです。このタグを使用することで、行間の調整を行って文章を見やすくできると同時に、検索エンジンにも段落として認識してもらいやすくなります。

HTMLを見やすくする基本的なタグなので、しっかりと場面ごとに切り替えられるように使っていきましょう。【＜p＞sample＜/p＞】のように打ち込むと段落が挿入されます。

spanタグ

spanタグは文字の一部をインライン要素として、グループ化する際に用いられます。グループ化した文字は、スタイルシートを適用させたり、色を変更したりすることが可能です。またインライン要素として扱われるspanタグは、前後に改行が入りません。そのため、【＜p＞sample＜/p＞＜p＞＜span＞sample2＜/span＞＜/p＞】とすると、改行なしで書式や色を変えられます。

たとえば強調部分を赤くしたい時は、【＜span style=”color:red”＞sample2＜/span＞】とすれば変更可能です。

imgタグ

imgタグは画像を表示させられるタグで、参照先の設定を間違えなければ誰でも簡単に画像を挿入できます。不慣れなうちは参照先を間違えていたり、指示出しを間違えていたりすることで、画像がうまく表示されないことがありがちです。そのように画像が表示されない時は、どちらかにミスがないか確認を行いましょう。

【<img src=”URL”>】のように書いて、URLが正しければ指定した画像が表示されます。

aタグ

aタグはページ同士をリンクさせる役目を持つタグで、自分が作成した他のページにリンクさせたり、外部サイトとリンクさせたりすることが可能です。aタグで囲まれた文章をクリックすることで、指定されたサイトへ飛べるようになります。

【<a href =”https://www.atagusample.co.jp/wp”>サイトはこちら</a>】

上記（URLは架空のもの）のように記載すればリンクできるため、うまくユーザーに興味を持たせられるように配置しましょう。

CSSで必要なタグ一覧

続いて、CSSで覚えておかなければならないタグをそれぞれ紹介します。CSSをうまくHTMLに組み込めれば、より細かな設定を簡略化することが可能です。最初はそれぞれのタグがどのような意味を持っているのか把握することから始めて、理解できたらどのように使っていけばいいのか順番に覚えましょう。

backgroundタグ

backgroundタグは背景の設定を行えるようにするタグで、色や画像、画像の位置にサイズなどを設定できます。

• 背景色：background-color
• 画像：background-image
• 画像の位置：background-position
• 画像サイズ：background-size

などで表記されているので、まずはどの部分が背景に該当するのかチェックしてみましょう。背景の場所が分かれば、どのように記載すれば色変更やサイズ変更ができるか見えてきます。

margin/paddingタグ

marginとpaddingタグは、余白を設定するタグのことです。margin（マージン）は外側の余白、padding （パディング）は内側の余白のことを指します。

たとえば【margin:10px】と記載すれば、指定した要素の上下左右の余白が10pxで設定可能です。paddingも同じように内側の余白を調整できるため、文字や画像が離れすぎていたり、近すぎたりする時は設定を忘れずに行いましょう。

width/heigthタグ

widthとheigthタグは幅と高さを設定するもので、width（ウィズス）は幅、heigth（ハイト）は高さを表します。

marginとpaddingタグのようにpx単位が基本とされますが、vhや％単位などが使われるケースもあります。pxと％で使われることが多いため、まずは2つの書き方を覚えておきましょう。

• 【width:50％;】と記載すれば、親要素の半分のサイズで幅が設定される
• 【heigth:200px;】と記載すれば、高さが200pxで設定される

borderタグ

borderタグは枠線の設定を行うタグで、こちらもさまざまな表記の仕方があります。基本的な書き方を例にすると、【border : 5px solid yellow;】のように記載します。この記述の場合の意味はそれぞれ、5pxが太さ、solid（一本線）が線のスタイル、yellowが色です。

図形操作を行う時に、線の種類や色を変更する操作を、borderタグが担っていると考えると、イメージしやすいのではないでしょうか。

HTMLとCSSの作成手順

それでは実際に、HTMLとCSSを作成する際にどのような流れで行われるのか、作成手順を紹介します。慣れないうちはできるだけ順番を守って作成を行い、流れを覚えることから始めましょう。自分流の方法を考えるのは、コードを入力できるようになってから行うことを推奨します。

1.必要なものを準備する

HTMLとCSSを作成する際にまず行うことは、

• トップページになる：index.html
• その他のページ
• スタイルシートの格納ができる：CSSフォルダ
• 画像の格納ができる：Imagesフォルダ

などを1つのフォルダにまとめる準備です。中でもindex.htmlと、その他のページは手始めにHTMLとして書いておくことが基本の形となります。またその他のページも、.htmlという拡張子で設定しておきましょう。

さらにページごとのレイアウトや紐付け、階層などをどのようにしていくか決めておけば、作業に悩むこともありません。必要なものや構造をメモにまとめる方法も、具体的にイメージできるのでおすすめです。

2.HTMLファイルを作る

どのような造りのサイトにするのか決まったら、次はHTMLのファイルを作成していきます。最初にhtmlタグで囲いを作って、その上部にheadタグ、下部にbodyタグを配置しましょう。以下が基本的なHTMLファイルです。

headタグにはタイトルや紹介文など、どういったページとなるのか、要素をコードで示します。bodyはコンテンツ部分を担う役割があるため、先ほど紹介したdivタグやpタグなどで基本構造を作って、他のタグで調整をしていく流れです。

最初はあまり複雑なものは作らず、単純なコードを入れて作っていくようにしましょう。初めに難しいものに挑戦してしまうと、挫折する原因になります。

3.表示情報を記述してブラウザで確認する

基本的な構造ができたら、実際にサイトに表示させる文章を書いていきます。文章とはコンテンツ部分のことで、bodyタグの中に書いてください。

以上のhtmlファイルを作成してブラウザで確認を行うと、「サンプルの文章を入力しました。」と書いた文章が表示されます。指定した文章が表示されない場合は、書き間違えている可能性があるので、修正するようにしましょう。ブラウザでの確認方法は、ファイル一覧から「test.html」をダブルクリックすることで行えます。

4.HTMLファイルにCSSを適用する

ブラウザで確認をしてHTMLファイルに問題がなければ、今度はCSSを適用させます。headタグにCSSのファイル名を指定することで、読み込ませることが可能です。CSSの適用は以下のように行ってください。

linkとは関連する文書を指定する際に用いるタグです。今回は【sample.css】という名前の関連ファイルを指定したと想定します。

5.CSSファイルを作る

CSSファイルの作成は、テキストエディタで以下のように記述しましょう。

記述が終わったらまずはファイルを保存してください。Htmlファイルで指定した名前に合わせる必要があるため、sample.cssで保存します。

CSSは上記の記述方法のように、「セレクタ{プロパティ:値;}」の順番で記述するのが一般的な書き方です。

6.しっかりCSSが適用されたか確認する

上記ではboldと記述して太字になるようにしたため、ブラウザで確認を行うと「サンプルの文章を入力しました。」が太字で表示されます。太字で表示されなければ、ファイル名が間違えているもしくは、コードを間違えている可能性があるので、チェックしてみましょう。

CSSも問題なく適用されていれば、HTMLとCSSの作成は以上で完了です。これはあくまでも入門編なので、中級、上級と上がっていくとコードがより多くなり、複雑化していきます。

HTMLとCSSの学習方法

HTMLとCSSの一般的に行われている3つの学習方法と、それぞれのメリットやデメリットについても解説します。プロに教えてもらえる方法と完全独学になる方法などもあるため、自分にとってどの方法が合っているのか検討したうえで実践していきましょう。

自分に合っていない学習方法を選んでしまった場合、学習が思い通りに進まなくなってしまう可能性もあるため、慎重に判断するようにしてください。

サービスを使って学習する

最初に紹介するのが、オンライン学習サービスを使った学習方法です。オンライン学習サービスでは無料のものから、有料で利用できるものまで幅広く存在しています。プログラミングスクールに比べると有料の場合でも低価格で済むことが多く、分からないことがあれば質問できるケースもあります。

しかしサービスを提供している企業によってサポートが充実していたり、サポートがなかったりと差が生まれてしまいがちな点には注意が必要です。またプログラミングの学習自体はできますが、転職サポートなどに対応していない場合がほとんどなので、自己責任の部分が多くなります。

本で学習する

本で学習する場合は、完全独学で進めていくことになります。読みやすかったり練習問題が豊富だったりと、自分に合った方法を選ぶ必要がありますが、費用も少なく好きな時間に勉強できます。

しかし、学習時間や配分は自分で決めなければならず、分からないことがあったら自分で調べて解決しなければなりません。そこで間違った知識を得ようものなら、修正が効かなくなってしまいます。

1人で勉強が続けられる方や、正確な情報を集められる方であれば問題ありませんが、自信がないという方にはおすすめできません。

プログラミングスクールに通う

プログラミングでゼロから学びたい方に特におすすめするのが、プログラミングスクールに通う方法です。最近では新型コロナウイルス感染症の感染拡大により、オンライン対応の授業を提供しているスクールも数多くあります。

プログラミングスクールにも良し悪しはありますが、ほとんどのスクールでは経験者や現役エンジニアなどから質の高い指導が受けられます。また転職や就職サポートを行っている企業もあるため、職場探しの心配もなくなるでしょう。

以下の記事では、おすすめのプログラミングスクールを紹介しているので、参考にしてみてください。

おすすめのプログラミングスクールについての情報が欲しい方はこちら

しかしプログラミングスクールを利用するには時間を確保しなければならず、金額も高額になるため、事前にスクールについて情報収集することが大切です。。仕事や学校が忙しい方にとっては、手が出しづらい学習方法です。

HTML・CSSの独学におすすめのオンライン学習サイト5選

HTMLとCSSの独学を進めるのに役立つ、おすすめのオンライン学習サイトを5選にして紹介します。無料で利用出来るものから、有料サービスを提供しているものもあるので、自分にとって必要かどうか見定めることからはじめましょう。 

1.3分動画でスキマ時間を活用できる「ドットインストール」

ドットインストールは無料で利用できる、動画視聴型のオンライン学習サイトです。公開されている動画は3分で学べるようまとめられたもので、言語や技術ごとに分けられたカリキュラムで基礎的なことを学べます。

動画は少し早口なところもあるので、見ながらの実践は難しいところがありますが、巻き戻せば何度でも見直せるので、焦らずに学習していきましょう。

ただし、月額1,080円 （税込）の「プレミアム会員」にならないと閲覧できない動画やサービスがあることにはご注意ください。実践的な知識が欲しい方は利用を検討してみてください。また動画はスマートフォンでも見られるため、 移動時間や空いた時間などを有効活用したい方におすすめです。

2.スライド学習で頭に入りやすい「Progate」

Progateは、イラスト付きのスライドで、JavaScriptやPHPなどもわかりやすく解説している、初心者向けの学習サイトです。ベーシックプランでは上記で紹介した5つの基礎が無料で学べます。さらに月額1,078円 （税込）のプラスプランで、応用と実践まで学べるレッスンが利用できるため、基礎を覚えたら活用してみてもいいでしょう。

初めて利用する方は、とりあえず無料で動画を視聴してみて、わかりやすいかどうか確認してみることをおすすめします。基礎については無料で学べるので、初歩から着実に学んでいきたい方に最適です。

3.クイズ形式で実力を確かめられる「Paizaラーニング」

Paizaラーニングは、クイズ形式で基礎知識から、高度なスキルやアルゴリズムスキルに関する問題が出題されるオンライン学習サイトです。初歩的な知識を身につけたDランク、基本的な実装スキルを身につけられるCランクなど、ランクが上がるにつれ難しい問題にチャレンジできます。

最高のSランク到達で、プロ並みの知識を持っているといえるでしょう。無料でも利用できますが、1ヶ月プランの1,078円 （税込）や、12ヶ月プランの一括7,200円（税込）などがあります。そのような有料プランでは1,429本以上の動画も視聴できるといった特典が付いてきます。

動画を見ればより幅広い知識が身につくので、Paizaラーニングが使いやすいと感じたら、有料プランの利用も考えてみてはいかがでしょうか。

どれだけ知識を身につけたのか、実力を試したい方におすすめです。

4．その場で学べる生放送授業が受けられる「Schoo! Web Campus」

Schoo! Web Campusはタイムラインを使って、学生や先生とコミュニケーションがとれるiPhoneアプリの学習サービスです。入門レベルから上級レベルまで用意されています。

無料で利用できる「オープン学生」は、生放送授業はすべて視聴できますが、録画授業は月1本のみです。月額1,080円（税込）の「プレミアム学生」になると過去の録画授業も視聴できるので、見落とす心配もありません。

未経験でもPHPやAndroid、iOSにWebサービスなどの開発スキルが学べるので、ひとつに絞って学習したい方におすすめです。生放送授業を視聴して役に立つと思ったら、過去動画も見られるプレミアム学生に登録するといいでしょう。

5.現役エンジニアのオンラインレッスンが受けられる「SAMURAI ENGINEER Plus+」

SAMURAI ENGINEER Plus+は現役エンジニアにオンラインレッスンをしてもらえる、オンライン学習サービスです。また30種類以上の教材を使って、基礎から実践までの学習が行えます。さらに「Q&A掲示板」を活用することで、分からないことがあれば、スピーディーに対応してもらえるでしょう。

月額3,278円（税込）で利用できますが、5,478円（税込）相当のレッスンが月1回まで無料で利用できます。そのため、プロから直接指導を受けたい方におすすめのサービスです。

他のサービスのようにお試し利用はできませんが、最初から制限をかけられることもないので、サービスを最大限活用しましょう。

HTML・CSSの独学におすすめ本3選

続いて、独学にオススメする本を3冊紹介します。どれもプログラミングの学習を今から始める方に向いているので、1つでも気になったものがあれば、ご購入を検討してみてはいかがでしょうか。

ここで紹介する以外にもさまざまなものがありますが、どのような本があるのか参考にしてみてください。何よりも、自分に合った本を選ぶことが大切です。

いちばんやさしいHTML5＆CSS3の教室

WebエンジニアとUIデザイナーとして活動している筆者によって書かれた内容は、Web制作現場の情報を取り入れた実践的内容になっています。そのようなトレンド情報が分かりやすくまとめられているので、初心者の方でもスラスラと読めるでしょう。

また、Web制作だけでなく、広く普及しているスマホ向けのサイトについても記載されています。そのため、HTMLやCSSの学習を始めたいという方にぴったりな本だといえるでしょう。

本の価格は2,178円（税込）で、Webサイトの制作をレスポンシブデザインで作り上げるために必要なことが学習できます。 PCとスマホに対応したWeb制作が主流となる現代だからこそ、読んでおくべき教材のひとつです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』は、全く知識が無い方でもHTMLとCSSを体系的に理解ができる一冊です。入門という名前のとおり、基礎的な知識が網羅されているので、最新技術やレスポンシブ対応などについて学ぶのにももってこいです。

本自体も21万部突破するほどの大ヒットを記録した本作は、全国の書店員さんが選ぶ「CPU大賞」の第1位を受賞するなどの注目を集めました。

本体価格は2,486 円（税込）で、実際に作りながら学べるテキストや、サンプルデータのダウンロードサービスも付いています。基礎的な知識を学びながら、「手を動かした学習もしたい」という方におすすめです。この本を購入する方はしっかりと基礎を学んで、次の学習へとつなげていきましょう。

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

世界一わかりやすいと銘打った本作は、HTMLとCSSの記述を含め、基礎知識や公開、管理方法までを、15レッスンに分けて解説している本です。

HTMLについて解説する章ではコーディングから画像とリンクの方法、ナビゲーションやリストなどについて詳しく書かれています。CSSについても文字のレイアウトからスタイリングまで、事細かに書かれている丁寧さは初心者にも嬉しいポイントではないでしょうか。

大まかなことが書いてあっても細かいところが端折られているような本もあるので、順番に隅々まで学びたい方におすすめの本です。価格は2,948円 （税込）で、専門学校で実施されるテストと同等の練習課題も用意されています。

HTML/CSSの基本をマスターしよう！

HTMLとCSSの基本が理解できるようになれば、一気にプログラミングの学習が簡単になるので、基礎固めはしっかりと行なっていきましょう。またHTMLとCSSの関係が分かるようになれば、組み合わせのパターンも理解できるようになります。

独学しようと思ってもなかなか内容が理解できない場合は、オンライン学習サービスや本を活用して知識や実践力を蓄えることが大切です。個人でできる学習にも限界があるので、経験者がすすめる学習方法や、提供してくれる情報は最大限活用するようにしてください。

それらをうまく活用し、HTMLとCSSの作成手順を繰り返し行なっていけば、次のステップへと進めるでしょう。