HTML/CSSとは?初心者向けの基礎知識と学習サイト5選

HTMLのCSSの関係性がいまいちよくわからない
HTMLとCSSはどうやって書くの?
HTMLとCSSの確認方法がわからない

国内におけるIT人材不足の深刻化を背景に、ITエンジニアといったプログラミングスキルがある人材の需要は増し、他の職種に比べ高い報酬を設けるケースが増えてきました。

そんな現状から、プログラミング言語を学ぶうえでの土台となる「HTML/CSS」に興味や関心を抱き始めた人もいるでしょう。

ただ、HTMLやCSSが具体的にどんなものかイメージが湧かない人もいるはず。

そこで、今回はHTML/CSSとは何なのかを、双方の関係性も交えて解説します。HTML/CSSの基礎知識や具体的な書き方も紹介するので、ぜひ参考にしてください。

この記事の要約
  • HTMLはWebサイトに必要な部品(テキストや画像など)を配置する言語
  • CSSはWebページの見た目(色やフォントなど)を整える言語
  • HTML/CSSはWeb開発の基本となる技術

なお、1人で学習が進められるか、途中で挫折しないか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポートするため、挫折しづらい環境で学習が進められます。

受講料が最大70%OFFになる「給付金コース」も提供中。未経験から効率よく学習を進めたい人は、ぜひ一度お試しください。

\ オンラインで相談可能 /

HTML/CSSについては次の動画でも詳しく解説しているので、良ければ参考にしてください。

本記事の解説内容に関する補足事項

本記事はプログラミングやWebデザインなど、100種類以上の教材を制作・提供する「侍テラコヤ」、4万5,000名以上の累計指導実績を持つプログラミングスクール「侍エンジニア」、を運営する株式会社SAMURAIが制作しています。

また、当メディア「侍エンジニアブログ」を運営する株式会社SAMURAIは「DX認定取得事業者」に選定されており、プログラミングを中心としたITに関する正確な情報提供に努めております。

記事制作の詳しい流れは「SAMURAI ENGINEER Blogのコンテンツ制作フロー」をご確認ください。


当ブログがオススメする
無料プログラミング学習サイト3選

スクロールできます
1位:侍テラコヤ2位:Progate3位:ドットインストール
サイト名


学べる内容HTML/CSS、JavaScript、jQuery、Bootstrap、PHP、Laravel、Ruby、Ruby on Rails、Python、Java、WordPress、Cloud9、Git、AWS 、ChatGPT、WebデザインなどHTML/CSS、JavaScript、PHP、Ruby、Python、Java、Go、Git、SQL などHTML/CSS、JavaScript、Ruby、Python、JavaC言語 など
質問
相談サポート
練習問題の数
特徴現役エンジニアとのマンツーマンレッスン
回答率100%のQ&A掲示板が使い放題  
実践的なスキルを身につけられる課題機能
環境構築をしなくても学べる 
イラスト付きのスライド式教材   スマホアプリでも学べて手軽
    
レッスン動画でインプット可能
3分の簡単な動画で手軽に学べる
有料プランなら質問ができる
 
詳細公式サイト公式サイト公式サイト
どのプログラミング学習サイトも無料プランを用意しているので、気になる学習サイトは試してみるのがオススメです!
目次

HTMLとCSSの関係を理解しよう

見出し1

画像:shutterstock

CSSでできること

CSSは、Webページを制作する際に欠かせないスタイルシート言語です。スタイルシート言語とは、プログラミング言語とは違い、Webページの見た目を整えるための言語のこと。ちなみにCSSでできることは、下記の通りです。

  • Webページのデザインをまとめて変更できる
  • デザインを微調整できる
  • スクリーンサイズに合わせて表示スタイルを変更できる

このようにCSSを使うことで、Webページの見た目を整え、ユーザーにとって分かりやすいサイトを制作できます。CSSのメリットやデメリットなどの詳細については下記の記事で紹介しているので、参考にしてください。

Web制作の必需品!CSSのメリット・デメリットを専門用語なしで紹介
更新日:2024年4月29日

HTMLとCSSとの違いは?

CSSと混同されやすいのがHTMLです。HTMLとは、テキストボックス、文字、表、画像、リンクなど、WEBサイトに必要な部品を配置するための言語です。

例えば、HTMLのみでブログのような見出し、記事の内容を書いた場合は以下のようになります。

見出し_CSS適用前

HTMLのみで作成したブログのイメージ

ちなみに、この内容ではHTMLがよくわからない方、HTMLについてもう少し理解を深めたい方は以下の記事もお読みください。初心者の方向けに、HTMLについてわかりやすく解説しています。

HTMLとは?できることやタグの種類、勉強方法もわかりやすく解説
更新日:2024年5月10日

WordPressや、はてなブログなどのブログの見出しには、デザインがありますよね?このHTMLにデザインを持たせるために必要なのが、CSSです。

CSSとは?基本構文と基本的な書き方

見出し2

画像:shutterstock

CSSの書き方について具体的に解説していきます!

なお、CSSとは何か?を説明したより詳しい解説記事は以下です。合わせてお読みください。

CSSとは?できることや書き方を初心者向けにわかりやすく解説
更新日:2024年4月29日

CSSの基本構文

CSSの基本的な書き方は下記の通りです。

セレクタ{プロパティ:値;}

セレクタ、プロパティ、値を記述することで、どこの何をどのように変更するか?を指定して、Webサイトの見た目を整えます。セレクタは変更する対象物を指定する「どこの」に該当します。主なセレクタは下記の通りです。

p段落
h1見出し
h2小見出し
ulリスト
ol番号リスト
bodyボディ

次に、プロパティを記述して何を変更するかを指定します。主なプロパティは下記の通りです。

color
font-size文字サイズ
width横幅
height高さ
background-color背景色
font-weight文字の太さ

例えば見出しの文字色を変更したい場合は、h1{color:値;}と記述し、値の部分に変更したい色を記述します。同じように、文字のサイズを変更したい場合は、h1{font-size:値;}と記述し、値の部分に変更したい文字サイズを記述します。

CSSの基本的な書き方

ここでは、実際の画面をみながらCSSの書き方を解説します。

見出し_CSS適用後

CSS適用後のイメージ

HTMLからCSSファイルを読み込むには、以下のように記述します。

HomePage.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="Main.css" />
    <title>sample</title>
</head>
<body>
    <br />
    <h2>HTMLとCSSの関係を理解しよう!</h2>
    <h3>HTMLとCSSの関係について</h3>
    ~~~~~~~~~~~~~~~~<br />
    ~~~~~~~~~~~~~~~~<br />
    ~~~~~~~~~~~~~~~~<br />
    ~~~~~~~~~~~~~~~~<br />
    ~~~~~~~~~~~~~~~~<br />
    ~~~~~~~~~~~~~~~~<br />
    ~~~~~~~~~~~~~~~~<br />
</body>
</html>

Main.css

h2 { 
    background: #c2edff;                /*背景色*/
    padding:5px;                        /*文字の余白*/
}

h3 {
    padding: 3px 6px;                   /*上下左右の余白*/
    color: #494949;                     /*文字色*/
    background: transparent;            /*背景を透明に変更*/
    border-left: solid 5px #7db4e6;     /*左に色指定で枠線追加*/
}

HomePage.htmlの5行目にある、

    <link rel="stylesheet" type="text/css" href="Main.css" />    

この記述によって、Main.cssファイルをHTMLで読み込んでいます。こうすることにより、Main.cssで設定しているh2、h3のデザインが適用されるわけですね。

では、次にCSSの書き方について解説していきます。CSSは基本的に、次の3つの要素から成り立っています。

CSSの3要素

CSSの3つの要素

HTMLの何の要素に対して、どのような属性を、どう設定するのかを指定するわけですね。では、もう一度見出し2のCSSを見てみましょう。

h2 {
    background: #c2edff;  
    padding:5px;           
}

h2に対して、以下のデザインを書いています。

  • 背景の色(background)をカラーコード#c2edffに設定
  • 余白(padding)を上下左右すべてに対して5pxに設定

このように、「セレクタ」「プロパティ」「値」を設定することでCSSを適用できます。プロパティを追加すると見出しにデザインを追加できますし、セレクタを追加すると見出し以外にデザインを設定することもできます。

また、セレクタには以下のような書き方の違いがあります。

Noセレクタ補足
1htmlタグ
2.class名先頭にドットがつきます
3#id名先頭にシャープがつきます

class名、id名を利用したCSSの具体的な使い方については、次で説明します。

HTMLとCSSを作成するための4つのステップ

見出し3

画像:shutterstock

では、実際にボタンを例にHTMLとCSSを作ってみましょう。

1. HTMLファイルを作成する

まずは、HTMLファイルを作成します。

ボタン_変更前

画像イメージ

HTMLファイル

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>sample</title>
</head>
<body>
    <br />
    <input type="button" value="ボタン1" />
    <input type="button" value="ボタン2" />
    <input type="button" value="ボタン3" />
</body>
</html>

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

次に、CSSを読み込み、各ボタンにCSSを適用するための記述を追加します。

HomePage.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="Main.css" />
    <title>sample</title>
</head>
<body>
    <br />
    <input type="button" class="btn" id="blue_btn" value="ボタン1" />
    <input type="button" class="btn" id="pink_btn" value="ボタン2" />
    <input type="button" class="btn" id="yellow_btn" value="ボタン3" />
</body>
</html>

今回は、classに「btn」、各ボタンにそれぞれ「blue_btn」、「pink_btn」、「yellow_btn」のidを設定しました。

3. CSSファイルを作成する

次に、CSSファイルを作成します。

HTMLでは、

    <link rel="stylesheet" type="text/css" href="Main.css" />

と書いていたため、Main.cssを作成します。

Main.css

.btn {
    padding: 2px 4px;       /*余白を設定*/
    color: #FFF;            /*文字の色*/
    border-radius: 3px;     /*角を丸める*/
}
#blue_btn {
    background: #8cfffa;    /*ボタン色を設定*/
}
#pink_btn {
    background: #feaec7;    /*ボタン色を設定*/
}
#yellow_btn {
    background: #fdeca6;    /*ボタン色を設定*/
}

classのbtnでは、ボタンの余白、文字の色、角を丸める記述を書いています。idの〇〇〇〇_btnでは、それぞれボタンの背景色を設定しています。

4. CSSが適用されたことを確認する

CSSは画面が再読み込みされたときに初めて適用されるため、画面を再度開きなおすか、画面を更新してください。

※ショートカットキーのCtrl + F5で画面更新となります。

ボタン_変更後

画像イメージ

このようにセレクタ、プロパティ、値の関係性と、CSSを読み込む方法さえ知っていれば簡単にデザインを適用できます。

HTML/CSSの学習方法は?

学習サイトを利用する

HTML/CSSは学習しやすいものの、プロパティや値の種類が多く奥深いのも事実です。その都度調べてながら勉強するのも問題ないですが、学習サイトを活用してみるのもおすすめです。

次の記事では、HTML/CSS学習におすすめの入門サイトを紹介しているので、良ければ参考にしてください。

【HTML/CSS入門】これから学習を始めるための基礎を解説!学習のコツも
更新日:2024年4月29日

スマホアプリで手軽に

まずは手軽にHTML/CSSを動かしてみたい人は、スマホアプリがおすすめです。実際にどんなものか確認してから学習に入るのもいいでしょう。

以下の記事に、学習できるスマホアプリを紹介しているのでぜひ参考にしてください。

子供向けのプログラミング学習アプリおすすめ11選【選び方も紹介】
更新日:2024年4月29日

書籍を参考にする

本を見ながら学びたい方向けにも、以下で詳しくまとめています。入門サイト、スマホアプリとあわせて見てみてくださいね

HTMLが学べる学習本・書籍おすすめ10選
更新日:2024年5月4日

HTML/CSSとは何かを基礎から学べるおすすめサイト

これからHTML/CSSを勉強するなら、まずは無料の学習サイトを活用するのがおすすめです。初歩的なことは無料で学べるので、まずはHTML/CSSがどのようなものか知りたい場合にぜひ活用してください。

ただし、無料の学習サイトは手軽に利用できる反面、質問や相談できる機能がありません。そのため、必要に応じて不明点等を質問しながらHTML/CSSを習得したい人は数千円の費用をかけてでも、問題が発生したタイミングで現役エンジニア等に質問できる有料の学習サイトを選ぶのが賢明です。

侍テラコヤ

700x700_01 (2) (1)
700x700_02 (1) (1)
700x700_03 (1) (1)
700x700_04 (1) (1)
700x700_05 (1) (1)
700x700_06 (1) (1)
700x700_01 (2) (1)
700x700_02 (1) (1)
700x700_03 (1) (1)
700x700_04 (1) (1)
700x700_05 (1) (1)
700x700_06 (1) (1)
previous arrow
next arrow
HTML/CSSが学べる侍テラコヤの教材例

「HTML/CSSの基礎を学ぼう」
HTMLの書き方からCSSを使った装飾方法までを網羅的に学習できる

登録無料で現役エンジニアに質問しながらHTML/CSSの学習を進められるコスパの良さが特徴侍テラコヤは、

  • 現役エンジニアが応える回答率100%のQ&A掲示板
  • 必要に応じて受けられる現役エンジニアとのオンラインレッスン

といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談できます。

20
21
18
19
20
21
18
19
previous arrow
next arrow

Q&A掲示板の例
Google検索等で解決できなかった抽象度の高い質問も解決可能

下記の口コミからも、侍テラコヤなら挫折しづらい環境で学習を進められるといえます。

18
19
20
18
19
20
previous arrow
next arrow

侍テラコヤ利用者の口コミ

また、侍テラコヤは入会金不要・いつでも退会OKに加え、「無料会員登録」でお試し利用ができるので「他のサービスを選べばよかった」と後悔する心配もありません。

コスパよく効率的にHTML/CSSを習得したい人は、侍テラコヤをお試しください。

公式サイトで詳細を見る

ドットインストール

2
3
4
5
2
3
4
5
previous arrow
next arrow

ドットインストールは、3分動画でプログラミングを学べる学習サイトです。全てのレッスンが3分以内の動画で提供されているのが特徴。スマートフォンからも視聴できるため、通勤時間などの隙間時間を活用して学べて人気があります。

これからCSSを勉強したい人は「はじめてのCSS」という、初心者向けのレッスンから視聴してみるといいでしょう。

Markup

出典:Markup

Markupは、レイアウト組みに特化したCSSの手法を学べる学習サイト。スライド形式の教材で学んでいきます。学習時間の目安時間が表示されているのも、嬉しいですね。

リアルタイムプレビュー機能を採用しており、エディット画面で入力したコードをプレビューしながら勉強できるのがポイント。初めての人でも効率的に学ぶことが可能です。

Progate

2
3
4
5
2
3
4
5
previous arrow
next arrow

Progateは、イラスト中心のスライドでプログラミングを学べる学習サイトです。全てのレッスンは、独学でプログラミングを習得できるように構成されているので、必要な知識やスキルを最適な順番で学べます。

CSSを学習したいなら、実際にWebページを作りながら学べる「HTML&CSS初級編」からスタートしてみるといいでしょう。

SKILLHUB

出典:httpscodecamp.jpcoursesmaster_design (3) (1)
3
4
5
出典:httpscodecamp.jpcoursesmaster_design (3) (1)
3
4
5
previous arrow
next arrow

SKILLHUBは、動画でフリーランスのエンジニアになるために必要な知識やスキルを学べるサイトです。実践的なスキルを自宅で習得できるのが特徴。無料と有料の講座があり、CSSを学びたい場合は、まずは「基礎から学びたい人のためのCSS入門」から受講するといいでしょう。

挫折なくHTML/CSSを習得するなら

ここまで記事を読んできた人のなかには、

独学でHTML/CSSを習得できるかな…
途中で挫折したらどうしよう…

と不安な人もいますよね。

実のところ、HTMLやCSSといったプログラミング学習で挫折する独学者は多くいます。事実、弊社の調査では

  • 不明点を聞ける環境になかった
  • エラーが解決できなかった
  • モチベーションが続かなかった

などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。

87.5%の人がプログラミング学習時に挫折を経験
不明点やエラーが解決できずプログラミングを挫折した人が多数

調査概要:プログラミング学習の挫折に関するアンケート
調査対象:10代〜80代の男女298名
調査期間:2019年8月13日~8月20日
調査方法:インターネット調査
掲載元:PR TIMES

また、こうした背景もあってか、弊社がプログラミングに興味がある人100名へ実施した別の調査では

  • 確実にスキルを身につけられると思ったから
  • 独学では不安がある
  • 効率よく学べそう

などの理由から、61%が「プログラミングの勉強を始めるならスクールを選ぶ」と回答しています。

61%の人がプログラミングの勉強を始めるならスクールが良いと回答
確実にスキルを身につけられそうという理由でプログラミングスクールを選ぶ人が多い

調査概要:プログラミングに興味がある方の意識調査
調査期間:2021/11/19~2021/12/3
対象者:プログラミング学習を検討している10代~50代の男女100名
調査媒体:クラウドワークス
掲載元:PR TIMES

加えて、プログラミングスクールの卒業生に「独学ではなくスクールを活用した理由」を聞いたところ「できるだけ短い期間でITエンジニアへの転職や副業に必要なスキルを身につけたかった」という回答も多く寄せられました。

上記から、1人でプログラミングスキルを習得できるか不安な人や短期間でスキルを習得したい人ほど確実性を求め、現役エンジニアといったプロの講師に質問できるプログラミングスクールを利用する傾向にあるのがわかります。

いざ独学でプログラミングを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「プログラミングスキルを身につけるのって思っていたよりも難しいんだな…」とHTML/CSSの習得自体を諦めかねません。

仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できる実践的なスキルが身につかなければ、結局後悔することになります。

そこで、おすすめしたいのが「SAMURAI ENGINEER(侍エンジニア)」です。

300x300-samuraiengineer (1)
6
700x700_01 (1)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
300x300-samuraiengineer (1)
6
700x700_01 (1)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
previous arrow
next arrow
料金月分割4.098円~
実績・累計指導実績4万5,000名以上
・受講生の学習完了率98%
・受講生の転職成功率99%

侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。

先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問や相談できない状況で、プログラミングスキルを習得するのは非常に難易度が高いといえます。

しかし、侍エンジニアでは

  • 現役エンジニア講師によるマンツーマンレッスン
  • 現役エンジニアに質問できるオンラインでのQ&Aサービス
  • 不安や悩み・勉強の進み具合を相談できる学習コーチ

といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%「転職成功率99%」という実績からも、侍エンジニアなら挫折しづらい環境でプログラミング学習を進められるといえます。

また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもITエンジニアへの転職や副業での収入獲得に必要なスキルだけを効率的に習得可能です。

最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。

なお、侍エンジニアでは最大70%OFFで受講可能な給付金コースを提供中。金銭面での支援を受けつつ、理想のキャリア実現に向けたスキルの習得から、転職活動・就業後のフォローアップ(※1)までを一貫してサポートしてもらえます。

※1:転職後の1年間、転職先での継続的な就業や転職に伴う賃金上昇などのフォローアップ

学習と金銭面をどちらもサポートしてくれる侍エンジニアなら、未経験からでも安心してITエンジニアへの転職や副業での収入獲得などの目的が実現できますよ。

公式サイトで詳細を見る

まとめ

今回は、HTMLとCSSの関係性、CSSの概要、具体的な書き方などについて解説しました。WEBデザインと聞くと、なんだか難しいように聞こえるかもしれませんが、今回説明した以下の2つを覚えるだけで、楽しく書けるようになります。

  • セレクタ、プロパティ、値の意味
  • セレクタの3パターンの書き方

あなたが作るWEBサイトにぜひ、WEBデザインを取り入れてみてくださいね。

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン
【SNS】
X(旧:Twitter)/Instagram/YouTube/Facebook

目次