HTMLとCSSの関係とは?基本的な書き方を4つのステップで理解しよう

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

こんにちは。フリーランスエンジニア兼フリーライターのワキザカ サンシロウです。

突然ですがあなたは、かっこいいWEBサイトを作ろうとして調べてやってみたけど上手くいかなかった・・・そんな経験ありませんか?WEBサイトのデザインを決めるための言語に、CSSがあります。

そこで今回は、WEBデザインを学ぶための最初のステップとして、以下の内容で解説していきます。

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

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

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

見出し1

まず、CSSを理解するために必要なHTMLについて、簡単に説明したいと思います。HTMLとは、テキストボックス、文字、表、画像、リンクなど、WEBサイトに必要な部品を配置するための言語です。

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

見出し_CSS適用前

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

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

初心者の方向けに、HTMLについてわかりやすく解説しています。

HTMLとは?

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

CSSの基本的な書き方を理解しよう

見出し2

では、実際の画面イメージをお見せしながら、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

では、実際にボタンを例に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の関係性、CSSの概要、具体的な書き方などについて解説しました。WEBデザインと聞くと、なんだか難しいように聞こえるかもしれませんが、今回説明した、

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


この二つを覚えるだけで、楽しく書くことができるようになると思います。あなたが作るWEBサイトにぜひ、WEBデザインを取り入れてみてくださいね。

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

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