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

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

こんにちは。フリーランスエンジニア兼フリーライターのワキザカ サンシロウです。突然ですがあなたは、かっこいいWEBサイトを作ろうとして調べてやってみたけど上手くいかなかった・・・そんな経験ありませんか?

WEBサイトのデザインを決めるための言語に、CSSがあります。そこで今回は、WEBデザインを学ぶための最初のステップとして、以下の内容を解説していきます。

  • HTMLとCSSの関係性とは
  • HTMLとCSSの具体的な書き方
  • 学習を支援するための付加情報

HTMLとCSSの基礎の基礎についてわかりやすく解説していますので、ぜひ参考にしてください。

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

見出し1

画像:shutterstock

CSSでできること

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

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

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

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

HTMLとCSSとの違いは?

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

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

見出し_CSS適用前

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

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

HTMLとは?初心者でも分かる基礎知識から書き方まで詳しく解説
更新日 : 2020年6月22日

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

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

見出し2

画像:shutterstock

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

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入門】これから学習を始めるための基礎を解説!学習のコツも
更新日 : 2020年5月8日

スマホアプリで手軽に

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

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

子供でもプログラミング学習ができるおすすめのアプリ9選をご紹介!
更新日 : 2020年8月2日

書籍を参考にする

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

その本で大丈夫?目的別「HTML」おすすめ学習本6選
更新日 : 2020年6月19日

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

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

ドットインストール

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

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

Markup

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

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

Progate

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

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

SKILLHUB

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

侍チュートリアル

弊社では侍チュートリアルという、初学者向けの無料学習サイトを公開しています。第2章までなら誰でも登録不要で学習可能です。公開しているHTML/CSSレッスンでは、HTMLタグを利用した構造化マークアップの基礎とCSSを利用したWebページの装飾のスキルが習得できるように構成されています。CSSを学びたい場合は、HTML/CSSレッスンからスタートしてください。

まとめ

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

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

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

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。
Webアプリ、業務アプリ開発において、要件定義、設計、インフラ、製造、テスト、運用保守など、様々な経験あり。
また、侍ブログ編集部として、これまでに200記事以上の記事を執筆。
現在はフリーランスエンジニア兼テックライターとして活動中。