Web制作に興味を持つと、間違いなく「HTML/CSS」という言葉に出会います。
「HTML/CSS」はどちらもコーディングにおいて100%使われるプログラム言語で、これら無くしてホームページを作ることはできません。
この記事ではWeb業界未経験の方へ、「HTML/CSS」について大まかに紹介したいと思います。
HTMLとは
まずHTMLとは「Webページに載せる文章や画像など、構成要素を記述する言語」です。
実際には下記のように書いていきます。
一見ただの文字列ですが、これでWebページ上に色々なコンテンツが表示されます。
実際に読み込んでみると…
こんな感じで表示してくれます！
HTML内に出てくる”<h1></h1>”、”<h2></h2>”などは「タグ」と呼ばれる要素で、この中に文章を書いていくんです。
ちなみに画像を配置するときは<img>というタグを使って指定します。
詳しい書き方は省略しますが、以上がHTMLの大まかな説明です。
CSSとは
一方CSSの役割は「HTMLで作ったWebページに装飾を付ける」ことです。
先ほどのHTMLをもう一回見てみましょう。
こちらにCSSで装飾を付けたいと思います。
こちらを先ほどのHTMLで読み込み、Webページ上で確認すると…
こんな感じに！
見出し1～3の色が変わったのと、ヒマワリの写真が小さくなりました。
この場合、例えば「見出し1」のHTMLとCSSを見てみると、
<h1>見出し1</h1>
h1{
color: red;
}
それぞれこう書いていました。
HTMLのタグと同じ記号をCSSに指定し、
“color: red;”と設定してあげることで文字が赤くなる
という仕組みです。
この場合の”color”にあたる部分は「プロパティ」と呼ばれます。
様々なプロパティを駆使してHTMLに装飾を加えるのが、CSSの役割なのです。
HTML/CSSのおすすめ参考書
ここまで述べたことは、本当に概要でしかありません。
HTML/CSSはすごく奥が深い言語ですが、それについて初心者向けに分かりやすく書かれている参考書があります。
それが「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」です！
こちらの記事でも紹介しています。
HTML/CSSの基礎だけでなく、デザインの基本もコンパクトにまとまっています。
しかも後半にはサイトを実際に作ってみるパートがあるので、知識が定着しやすいです。
最初の一冊として鉄板！といえるほど分かりやすいのでオススメですよ～！
おわりに
Webページを家に例えると「HTMLは梁や柱などの骨組みで、CSSは色付きの壁や屋根」という関係性だといえます。
両者の関係性をしっかり理解して、Web制作者としての一歩を踏み出しましょう！
その際は、先ほど紹介した参考書もぜひチェックしてくださいね。
コメント