ホームページの基本

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

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

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

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

2. 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はわかったけど、コーディングとは?

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

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

関連記事

  1. ホームページの基本

    ホームページリニューアルで失敗しないために気をつけたい6つのポイント

    前回の記事ホームページ公開後(リニューアル後)に望む結果が得られない理…

  2. ホームページの基本

    セキュリティ対策に必須!初心者向けに簡単解説・SSLの基礎知識《前編》

    自社のホームページを作るのに、全体のページ構成やデザインももちろん大切…

  3. ホームページの基本

    ユーザーに読まれる記事を書くために。初心者向けWebライティングテクニック【基本編】

    近年のインターネットコンテンツは、SEO的な視点やオウンドメディアの拡…

  4. ホームページの基本

    セキュリティ対策に必須!初心者向けに簡単解説・SSLの基礎知識《後編》

    自社のホームページを作るのに、最も重要なことの一つにホームページ(ウェ…

おすすめ記事

ホームページ制作 FEEL  DESIGN
PAGE TOP