HTMLとCSSの違いとは?仕組みや書き方の違いなどについて徹底解説!

この記事を読んでいるあなたは

  • HTML/CSSの違いについて知りたい
  • HTMLの特徴について知りたい
  • CSSの特徴について知りたい

上記のように考えているかもしれません。

この記事ではそんなあなたに「HTML/CSSの違いからHTMLとCSSの特徴」をお伝えしていきます。

なお、HTMLとCSSの勉強方法が分からない!という方はテックアカデミーで学習することをおすすめします。

今なら無料体験が可能ですのでぜひ申し込んでみてください。

また、以下の記事ではテックアカデミーについて詳しく解説しているのでぜひ参照してみてください。

テックアカデミー(Tech Academy)とは?学べるコースや利用するメリットなどを詳しく紹介!

HTML/CSSとは?

パソコン

ホームページ等で使われるHTMLとCSSについて説明します。

HTMLとは

HTML(エイチ・ティー・エム・エル)とは、ホームページやWebサイトを作成する際に使う言語です。

Hyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)のそれぞれの単語から頭文字を取り「HTML」といいます。

現在のHTMLはHTML5という第5世代の言語が主流となっています。

サイト内の文章の見出しを設定したり、リンクの設定、表示させる画像の設定をする等Webサイトを作成する際に必要な言語となります。

ホームページやWebサイトのみではなく、「Webアプリ」にも使うことがあるので、Webアプリ開発者や将来アプリ開発者を目指す方も覚えておく必要があります。

CSSとは

CSSとは上記のHTMLに記述した文章や画像などにデザインを加える時に使う言語です。

Cascading Style Sheets(カスケーティング・スタイル・シート)のそれぞれの単語から頭文字を取り「CSS」といいます。(技術者の方はCSSを単に「スタイルシート」という方も多いです。)

現在のCSSはCSS3という第3世代の言語が主流となっています。

CSSは表示する文章や画像等にデザインを加える言語なので、CSS単体では使わずにHTMLと組み合わせてセットで使われます。

 

HTML/CSSの仕組みの違い

電気回路

HTMLとCSSの仕組み、それぞれの違いについて説明します。

HTMLの仕組み

HTMLは、文字や文章をタグというもので囲って意味付けを行います。

そのことからマークアップ言語と呼ばれています。

コンピューターは人間とは違い、文章を書いただけでは文章を認識することができませんので、文章だけではWebページを作成することが出来ません。

HTMLを使って「この文章は見出し(タイトル)」「この部分はリンク」「ここに画像を表示」ということをコンピューターに指定します。

HTMLはコンピューターに情報を指示するための言語となります。

CSSの仕組み

CSSはHTMLで記述した文章の文字の太さや色を変えたり、リンク部分に色を付けたり、浮き上がらせる、ボタンにする等のデザインをすることができます。

CSSはHTMLにデザインを装飾するための言語となります。

しかしCSSは様々な装飾が行える言語のため、HTMLよりも覚えることが多く、書き方も難しいです。

 

HTML/CSSでできることの違い

考えている男性

HTMLとCSSそれぞれのできることの違いを説明していきます。

HTMLでできること

文章の見出し(タイトル)を設定したり、リンク、画像等を設定することができます。ホームページやWebサイトを作成するときには必要な言語となります。

その他にWebアプリにも使用される言語ですので、プログラミングでWebアプリを作成をする場合にも使われることが多いです。

CSSでできること

CSSはHTMLで記述したタグ部分の文字の色・太さ・フォントを変える、リンクの色を変える・ボタンにする等のデザインを設定できます。

 

HTML/CSSの書き方の違い

プログラミング

HTMLとCSSそれぞれの書き方の違いを説明していきます。

HTMLの書き方

HTMLの書き方を説明します。

「タグ」というものを用い、Webサイト中の文書の役割を決めています。

 

例:

———ここから———

<!doctype html>

<html>

<head>

<meta charset=”UTF-8″><!–文字コードの種類としてUTF-8を指定 文字化け防止–>

<title>タイトルを指定</title>

<link rel=”stylesheet” href=”css/style.css”>

</head>

<body>

<h1>CSSで行えること</h1>

 

<div class=”box-a″>

<p>角を丸みをつける</p>

</div>

 

<div class=”box-b″>

<p>円にする</p>

</div>

 

<div class=”box-c″>

<p>内側部分を装飾</p>

</div>

 

</body>

</html>

———ここまで———

 

CSSの書き方

CSSの書き方を説明します。

CSSはHTMLとセットで使うため、CSS単体で使うことはありません。

HTMLファイルを用意した後、CSSを記述していきます。

CSSもHTMLのファイルを用意する時と同じように、テキストエディタで新規ファイルを作成します。

 

例:

———ここから———

@charset “UTF-8”; /*外部スタイルシート(別ファイル)の場合にのみ使用 文字化け防止*/

 

body{

background-color: black; /* 背景を黒くする */

}

 

h1{

background: -webkit-linear-gradient(left, #453a94, #f43b47);

background: -o-linear-gradient(left, #453a94, #f43b47);

/* 各ブラウザに対応:背景をグラデーションに装飾する(開始位置, 開始色, 終了色) */

color: white;

/* 文字色を白に設定 */

font-size: 30px;

/* フォントサイズを30pxに設定 */

font-weight: bold;

/* フォントの太さをboldに設定 */

margin: 55px auto;

/* 外側の余白を上下55pxに設定、左右は均等に設定 */

padding: 10px;

/* 中の余白を上下左右の余白を10pxに設定 */

text-align: center;

/* 下記の幅の中で中央寄せに設定 */

width: 300px;

/* 幅を300pxに設定 */

}

 

.box-a{

background-color: #d9afd9;

/* 背景の色を設定 */

border-radius: 25px;

/* 半径25pxの円を角丸に設定 */

margin: 0 auto 40px;

/* 外の余白を上0に左右均等に下40pxに設定 */

padding: 30px;

/* 中の余白を上下左右余白を30pxに設定*/

text-align: center;

/* 中央寄せに設定 */

width: 200px;

/* 幅を200pxに設定 */

}

———ここまで———

 

HTML/CSSの違いについてまとめ

プログラミング 言語

HTMLはホームページやWebサイトの骨格を定義する言語に対して、CSSはHTMLで設定した骨格にデザインを装飾する言語と言えます。

HTMLとCSSは役割が分かれ、そのため様々なデザインが可能になっています。

HTMLの基本的なタグやCSSの基本的な装飾をまずは覚え、簡単なホームページを作ってみると出来上がるのを楽しみながら覚えることができます。

基礎を固めたら様々な構造・デザインのサイトを作成して技術を高めていくと良いでしょう。