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のみで作成したブログのイメージ

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

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

見出し2

では、実際の画面イメージをお見せしながら、CSSの書き方について具体的に解説していきます!

見出し_CSS適用後

CSS適用後のイメージ

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

HomePage.html

Main.css

HomePage.htmlの5行目にある、

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

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

CSSの3要素

CSSの3つの要素

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

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ファイル

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

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

HomePage.html

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

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

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

HTMLでは、

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

Main.css

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

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説