HTMLとCSSの基礎について その1
こんにちは✨
nests です。本日はWebサイト制作の基本であるHTMLとCSSの基礎についてお伝えします。
Webデザイナーとして活躍されている方やこれからWeb業界へ就職・転職を考えている方なら一度は聞いたことがあるHTMLとCSSですが、よく「区別がわからない」や「それぞれの役割は？」などイマイチそれぞれ何ができるかわかっていない方も多いかと思います。
はじめにHTMLとCSSのそれぞれの役割と簡単な書き方をご紹介します。ぜひご参考にしてください✨
HTMLとは？
HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」のことで、WEBページを作成するための言語です。
上記で記載した「ハイパーテキスト・マークアップ・ランゲージ」のマークアップとは文章の構成や、文章の役割を示すという言葉の意味で、
例えば、見出しや段落・表・リンクなど、文章が構成されている要素がどのような役割を持っているかを指示しています。HTMLの記述によって、検索エンジンがWEBページの構造を把握しやすくなります。
よって、ほとんどのWEBページはHTMLで文章の構成や画像が設定されています。
HTMLの役割
HTMLの大きな役割は
文書構造を定義するものであり、骨組みや構造となるマークアップ言語 です。コンピュータに画像やテキスト、ロゴなどを認識させるための役割を担います。例えば内をh1で大見出しを示し、h3で小見出し、pで段落であることを認識させます。
HTMLタグと呼ばれ、認識させたいテキストなどの前後をタグで囲むことで、コンピュータがその通りに表示します。タグは他にもbでテキストを太字にする、buttonでボタンを作成する、dirでリストを表示するなどさまざまです。
HTMLタグとは？
HTMLを記載していく上で[タグ]を用いて記載していきます。では、[タグ]とは具体的にどのようなものなのかみていきましょう。
タグ」とは「文字（テキスト）に意味を与えてあげる印のようなもの」です。
また、文字列などをタグで囲みタグの中に書かれた情報の単位のことを「要素」と言います。HTMLを記載していく上では必ず使用していく言葉になりますので意味を理解しておくと良いでしょう。
例のように文字をタグで囲うと、記載された文字がh1やh2といった意味を持つようになります。
※最後のタグ（終了タグという）には「/」が入ることに注意してください。閉じ忘れなどがあると、表示が崩れる原因になります。
上記のように、タグによって文字に特有の意味を持たせることができます。
大きく見出しに使いたい文字がある時は、その文字を<h1></h1>や<h2></h2>で囲い、段落に使いたい文字がある時は、その文字を<p></p>で囲ってあげます。そうすることにより、それぞれの文字に意味を持たせ区別することができます。
一般的な<h1></h1>や<p></p>以外にも、HTMLには多くのタグがあります。
他のタグにつきましては以下の記事をご参考ください✨
CSSとは？
HTMLの次はCSSです。
CSSはHTMLで記載されたWebページの文字の大きさや色、配置や背景などのスタイル(見た目)を指示する言語になります。
CSSの役割
よく使われる例えで、HTMLは顔の中のパーツでCSSそのパーツを装飾するものだと考えると理解しやすいかと思います。
このイラストのようにHTMLで顔・目・口の要素を表示させCSSでそれぞれの要素に装飾をつけていくイメージがCSSの役割になります。
CSSの指定方法とは？
CSSではHTMLで記載した[タグ]を[セレクタ]と呼びセレクタ内に記載された項目を[プロパティ]と呼びます。そのプロパティ内に記載されたものを[値]と呼びます。
なんのこっちゃ。よくわからん。という方下の画像をご参考に。
HTML内で記載したh1に対するCSSでの指示はこのように記載されます。
このようにHTMLとCSSでは全く別の役割をしていることがわかります。
次回の記事ではHTMLとCSSの関係性についてご紹介いたします！
これからも頑張りましょう！✨