プログラミング、気楽な生き方を中心に発信しています。
  • twitter
  • instagram
  • facebook

【基礎】HTMLとCSSの違いと書き方を解説【これだけ覚えとけばOK】

吹き出しくん

プログラミングを学ぼうと思ってみたものの、HTMLとCSSの違いとかさっぱり分からないよ・・・。

こんな悩みをもっている方へ

本記事では、現役でWEB制作会社で働いている僕がHTMLとCSSの違いをサクッと解説していこうと思います。
また、初心者の人がこれだけ覚えておけば大丈夫という内容も解説していこうと思います。

僕について

大学生時代に独学でプログラミングを学び、現在はWEB制作会社で働いています。現在はフリーランスとして生きています。

それではサクッと学んでいきましょう。

HTMLとCSSの違いを解説

HTMLとCSSの違いを解説

上記の画像では、HTMLとCSSの違いをザックリと分けてみました。左側がHTMLで右側がCSSというイメージです。

HTMLとCSSって同じようにみえるけど、実ははっきりと役割が決まっています。
基本的には役割の違いは下記の通りに覚えておけば、間違えることはなくなります。

  • HTML:骨組みを作る言語
  • CSS:肉付けをする言語

上記のように覚えておけば、間違えることはなくなります。
次からは、HTMLとCSSをさらに深堀りしていこうと思います。

HTMLの基礎と書き方を解説

HTMLの基礎と書き方を解説

HTMLについて下記のとおりに学んでいきます。

  • ①:HTMLとは?
  • ②:HTMLの基本的な書き方

上記の通りに必要な事だけをサクッと解説していきます。

HTMLとは?

HTML(エイチティーエムエル、HyperText Markup Language)は、ウェブページを作成するために開発された言語です。現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
HTMLクイックリファレンス

上記で引用しましたが、ざっくり言いますと「ウェブページを作るには欠かせない言語」という事になります。

ウェブページを作る上では不可欠となる言語ですので、これからWEB制作をはじめたいという方がはじめに学ばなければいけないものです。

主なHTMLの役割としては下記の通りになります。

  • サイトの構造作り
  • 文章をいれる
  • リンクなどを入れる
  • 画像を入れる
  • Youtubeなどの動画を埋め込む

上記のように、ウェブページを作る際に土台となる骨組みを作ることができるのが「HTML」になります。

HTMLで書いたページ例(骨組み)

骨組みのサイト

上の画像がHTMLで骨組みだけを作ったページになります。
何かしょぼいですね・・・。ここにCSS(肉付け)を書いていく事で、綺麗なウェブページになっていきます。イメージできますでしょうか?

HTMLの基本的な書き方

HTMLの書き方

上記がHTMLの書き方です。

基本的には開始タグと閉じタグを書いて、その間に文章などの内容を書いていくイメージです。今回使用したのはpタグと呼ばれるもので文章を書く時に使用するタグになります。

HTMLの書き方は単純ですので、タグの種類を覚えていくのがHTMLの勉強だと思いましょう。

とは言っても実際に使用するタグは限られていますので、1から100まで丸暗記するのではなくて、よく使うタグだけ覚えていけば大丈夫です。

書き方を学んだところで、実際にウェブページに埋め込んでいきたいところなのですが、まずはウェブページ全体の構造を作るためのタグを書く必要があります。

詳しくは「【入門】HTMLの基礎講義【仕組みからタグの書き方までを網羅】」で解説していますが、基本的にウェブページ全体の構造はテンプレ化されていてコピペで大丈夫なので、詳しく覚える必要はなく何となく覚えておけばオーケーです。

ウェブページ全体の構造テンプレ

HTML
<!DOCTYPE html> <html lang="ja"> <head> <!-- 文字コード --> <meta charset="UTF-8"> <!-- CSSの読み込み --> <link rel="stylesheet" href="style.css"> <!-- レスポンシブ対応 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- サイトのタイトル --> <title>タツキの樹</title> </head> <body> <!-- ここからホームページの内容 --> </body> </html>

最低限、上のコードが書けていればウェブページを作っていくことができますので、HTMLを書くときはテンプレをコピペすれば大丈夫です。

ここまでできましたら、後はウェブページに載せたい文章や画像などをタグの中に書いていくことができます。

CSSの基礎と書き方を解説

CSSの基礎と書き方を解説

CSSも同じように下記の通りに学んでいきます

  • CSSとは?
  • CSSの基本的な書き方

上記の通りに、解説していきます。

CSSとは?

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。
HTMLクイックリファレンス

上記も引用しましたが、要するに「HTMLで作った骨組みに対してCSSで肉付けをする」という事です。

ここまできたら理解した方も、いると思いますが「HTMLとCSSはセットで使用する言語となります」
HTMLとCSSを一緒に解説しているサイトが多いのがわかりますね。

次からはCSSの基本的な書き方を解説していきます。

CSSの基本的な書き方

CSSの書き方

上記が基本的なCSSの書き方になります。全然わからない方のために、和訳しますと「pタグの色を赤にする」という意味になります。

セレクタのプロパティを値にする

上記がcssの読み方です。

セレクタの部分ではhtmlで書いたタグなどを指定することができて、プロパティで「文字の色を変えたい」とか「文字の大きさを変えたい」などを指定することができるのがCSSですっ

数多くのプロパティがあってウェブページのデザインを自由自在に操ることができます。いきなり丸暗記しても覚えられないので、実際にウェブページなどを作りながらググって覚えていきましょう。

ググり方のポイント

プログラミング全般に言えることなのですが、「ググる力」が重要になってきます。大概の事はググる事で解決することができます。
例えば、文章の行間を変えたいときなどは「css 行間の変え方」などでググればすぐに出てきますので、分からないことはググる習慣をつけるようにしましょう。

【実践】HTMLとCSSを使って実際にウェブページに表示してみよう

実際に作るサンプル

HTMLとCSSを学んだところで、早速ですが実際に上の画像のモノを作ってみましょう。
インプットとアウトプットは知識の定着には不可欠です!

プログラミングを学習していくにはテキストエディタというものが必要になります。

テキストエディタをまだ自分のパソコンに入れていない方は、下記の記事でおすすめのエディタと導入方法を解説していますのでどうぞ。(僕が愛用しているのは、「Brackets」です)

下記で詳しく書き方を解説していきますが、作れそうな方は自力で作ってみましょう。
全くわからない方は一緒に作っていきましょう。

ウェブページ作成の基本的な流れ

  • フォルダとファイルを作成
  • htmlで全体構造を作る(コピペでOK)
  • htmlで文などを埋め込む(骨組み)
  • cssでスタイルをあてる(肉付け)
  • web上で確認

上記が基本的なウェブページ制作の流れです。
順番に解説していきます。

まずは、フォルダとファイルを作成

フォルダ作成

まずはHTMLとCSSを書くためのファイルを作ります。

どこでも良いのでフォルダを作成してその中に下記のファイルを作成します。

HTML/CSSのファイルを作成

  • index.html
  • style.css

拡張子がhtmlとcssになってますよね。こうすることで「これはhtmlとcssのファイルだ」と認識してくれます。
indexとstyleという名前は基本となる名前ですので、基本的にはこの名前でファイルを作成するようにしましょう。

htmlで全体構造を作る(コピペでOK)

HTML
<!DOCTYPE html> <html lang="ja"> <head> <!-- 文字コード --> <meta charset="UTF-8"> <!-- CSSの読み込み --> <link rel="stylesheet" href="style.css"> <!-- レスポンシブ対応 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- サイトのタイトル --> <title>タツキの樹</title> </head> <body> <!-- ここからホームページの内容 --> </body> </html>

テキストエディターでhtmlを開いたら、まずはウェブページ全体の構造を作る為のタグがあるのですが、こちらは先程も説明した通りでコピペで大丈夫ですので、上記のコードをそのままhtmlファイルに書きましょう。

注目してほしい所はheadというタグの中にあるlinkタグですね。ここでstyle.cssを読み込んでいます。
書き方は覚えなくて大丈夫ですので、ここで読み込んでるということだけ理解しておいてください。

これで全体構造は完成です。

htmlで文を埋め込む(骨組み)

bodyタグの中に実際にページに表示させたいこと、今回で言いますと「○○」という文を書いていきます。
実際にウェブページに表示されるのはbodyタグ内の事だけというのもポイントですね。

タグは何でも大丈夫ですが、今回は本記事で使用したpタグを使用して下記のように書いて見ましょう!

HTML
<!DOCTYPE html> <html lang="ja"> <head> <!-- 文字コード --> <meta charset="UTF-8"> <!-- CSSの読み込み --> <link rel="stylesheet" href="style.css"> <!-- レスポンシブ対応 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- サイトのタイトル --> <title>タツキの樹</title> </head> <body> <!-- ここからホームページの内容 --> <p>実践!実際にコードを書いてみよう!!</p> </body> </html>

これでhtmlの記述は完成です。

WEB上での確認方法

htmlファイルをダブルクリック、または右クリック→このアプリケーションで開く→googlechrome(safari)をクリックで確認することができます。

今回だと下記のように表示されておけば大丈夫です。

cssでスタイルをあてる(肉付け)

最後にcssでスタイルをあてて行きます。今回はシンプルに文字の色を変更していこうと思います。
それではテキストエディターでcssファイルを開いて下記のコードを書いてみましょう。

CSS
p{ color: red; }

今回使用したのがpタグなので、pタグを指定して色を赤色に変更いたしました。
これでCSSの記述は完了です。

最後にブラウザで確認

HTMLとCSSの記述が終わったら最後にブラウザで確認して見本通りになっていたら完成です。

今回は超シンプルな記述でしたが、これがHTMLとCSSの全てと言っても過言ではないです。
後は少しづつ知識を増やしていく事で、作れるもののレパートリーが増えていきますので、学習していきましょう。

HTMLとCSSのポイントのまとめ

ここまでHTMLとCSSの基礎を学んでいきましたが、この記事で抑えてほしいポイントは下記の通りです。

  • HTMLとCSSの違いは骨組みと肉付け
  • HTML/CSSの基礎と書き方

上記の事が理解できていればクリアです。

この記事で学んだ知識は初歩中の初歩ですが、基本はこの記事の知識の応用になりますので少しづつ知識を増やしていきましょうね。

プログラミングは基礎とググり力が大切で、基礎をしっかりと学べば後はググれば解決できることがほとんどなので、先走る気持ちはわかりますが、まずはじっくりと基礎を学んでいきましょう。

HTML/CSSの違いを理解したら詳しく学習していこう

HTMLとCSSの違いをザックリ解説しましたが、何となく分かったところでより深く学んでいきましょう。基礎講義ということでHTMLとCSSをサクッと解説しております。

HTMLの基礎講義

CSSの基礎講義

それでは頑張ってください。