HTML・CSS独学応援 2-1 「HTML・CSSってなんだろう?」

HTMLってなに?
CSSってなんなの?

サンプルサイトを見ながら、それぞれがどんなものなのか
紹介していくのが今回の内容になります。

実際に操作はしないので、サラッと読んで
イメージしてもらえたらOKです。

HTML・CSS独学応援 2-1 「HTML・CSSってなんだろう」

HTML・CSSってなに?

今回はこれから学ぼうとしている
「HTMLとCSSと何なのか?」
サンプルサイトを見ながら、イメージしていきましょう。

HTML(ハイパーテキスト・マークアップ・ランゲージ)

ウェブページを作成するための言語です。
正式にはプログラミング言語ではなく、マークアップ言語と呼ばれています。

マークアップとは、「どの部分がどんな役割のものか示す」という意味です。

パソコンに対して、
「ここは見出しだよ」とか、「ここはボタンだよ」とか、
わかるようにしてあげるイメージです。

CSS(カスケーディング・スタイル・シート)

ウェブページのスタイル(デザイン)を指定するための言語です。
CSSは、HTMLと組み合わせて使用します。

HTMLでパソコンに「ここは、”見出し”だよ」って伝えたうえで、
CSSで、「”見出し”の文字は赤にして!」など伝えます。

サンプルサイトを見てみよう

サンプルサイトを例に、HTMLとCSSがどんな役割をしているのか見てみよう。

イメージしにくいかもしれないけど、
あまり難しく考えなくてOKです。

「へーそうなんだ」って感じで見てください。

HTMLとCSSの役割

まずは、サンプルサイトの完成版を見てみましょう。
これは、HTMLとCSSが両方書かれていて機能しているとこんな感じです。


ここから、CSSを外してみましょう。
HTMLで、webページとして書いたけどデザインしていない状態です。

大分見た目が変わりました。

HTMLでは、
パソコンに対して、「テキストの表示」や、「ロゴを表示」という指示を出しています。
表示することができるけど、デザインされていない状態です。

HTMLがない場合はどうなるの?

何も表示されないよ。

HTMLは、「ウェブページを作成するための言語」でした。
HTMLがない場合は、「webページが存在しない」ということになるので
表示するものがなく、何も表示できません。

まとめ

今回は、HTMLとCSSについてしょうかいしました .

HTML webページとして表示する
CSS デザインする

そんなイメージを持ってもらえたらOKです。

「れおの部屋」では、順番に体験していきます。
1、HTMLで、webページとして表示してみる
2、CSSでデザインしてみる

その繰り返しでだんだんイメージもつかめてくると思います。

「今できることを少しだけ!」
一歩ずつ一緒に進んでいきましょう!