初心者向け簡単解説。知っておくと理解が深まる、HTMLとは?CSSとは?-ホームページ制作ブログ|WEB制作はFEEL DESIGN

初心者向け簡単解説。知っておくと理解が深まる、HTMLとは?CSSとは?

2023.2.13 ホームページ制作

ホームページの裏側はどんな風に作られているの?
HTML、CSSって聞いたことあるけど、何?
コーディング?何それ初めて聞いた!
初心者の方へ、わかりやすく解説してみます。

HTMLとCSS、部屋と家具で例えてみるとわかりやすい!

HTMLとCSS、部屋と家具で例えてみるとわかりやすい!

1. HTMLは『 部屋にある「もの」を「家具」と認識させる役割 』

部屋の中にはテーブルやソファ、ベッドなどがありますが、コンピュータにはどれがテーブルでどれがソファかわかりません。全て同じ「もの」として扱います。

HTMLはこれはテーブル、これはソファ、など、ホームページでいうとこれは画像、これはロゴ、これは見出し、など、コンピュータに機能を伝達する役割を果たします。

HTMLについて

<h1>テキスト<⁄h1>→大見出し
<h2>テキスト<⁄h2>→中見出し
<p>テキスト<⁄p>→本文

などの様々なタグでそれぞれの機能を伝達します。sample.htmlのような、拡張子.htmlがついたファイル名になります。

2. CSSは『 家具の配置やデザイン 』

CSSは、テーブル、ソファ、ベッドなどの家具の色や配置を指定する、ホームページでいうと、見出し、本文の色や大きさ、画像、ロゴも含めた配置を決める役割を果たします。

CSSについて

h1{ color:red; font-weight:bold; }→大見出し:赤、太文字
h2{ color:blue; }→中見出し:青
p{ color:gray; }→本文:グレー

上記は文字の色や太さをcssで指定しています。sample.cssのような拡張子.cssがついたファイル名になります。CSSファイルはHTMLファイルで読み込めるように指定します。

HTMLとCSSはわかったけど、コーディングとは?

制作したホームページのデザインは、そのままではWEBブラウザでホームページとして見ることができません。

制作したデザインをHTMLとCSSを用いて、ウェブブラウザでみられるように機能やデザインを指定するコードを書きhtmlファイルとCSSファイルを作成する作業をコーディングといいます。

この記事を書いた人 Ayumi

メルマガ・公式LINE

結果につなげるWEB集客お役立ち情報や
最新サービスの先行告知をお届けします。

3つのプレゼント

プレゼント 理想のお客様に選ばれ続ける
ホームページ&WEB集客
7日間無料講座

プレゼント10分でできる!
ブランディングチェックシート
プレゼント初心者でもできる!
ホームページ改善チェックシート