【超基礎】HTML・CSSとは?ウェブすべてに関係する基本技術

画像:【 超基礎】HTML・CSSとは? ウェブすべてに関係する基本技術

この記事ではWebサイトやブログなど多くのウェブに関わりのある「HTML」「CSS」について超基礎的な説明をしています。ウェブの世界においてはまさに「基本のキ」です。

  • ◎名前はよく聞くけど、実際の所HTMLやCSSって何?
  • ◎Webサイトでどんな風に使われているの?
  • ◎少し興味があるからもうちょっと深く知りたい

こんな疑問を持つ方に噛み砕いて解説しています。

これから実際に勉強をしてみようか考えている方は是非読んでみて下さいね。

HTMLとは?

画像:HTMLとは?

HTMLとはHyperText Markup Languageの事。ハイパーテキストを記述する為のマークアップ言語です。もちろんテキストだけでなく、ナビゲーション画像などコンテンツの部分全てに使われています。
ハイパーテキストとは、複数の文書(テキスト)を相互に関連付け、結び付ける仕組み。

今見ているこの記事(ブログ)もどこかの企業のウェブサイトも、骨組みはこのHTMLで出来ています。

色やレイアウトなど、見た目に関する部分はCSSがその役割を担っています。

HTMLの役割

図解:HTMLのコンテンツ構造の説明
HTMLのコンテンツ構造の説明

HTMLの役割は、Web サイトにコンテンツ構造を持たせる事です。よく本の文書構造や、建物の骨組みに例えられます。CSSとの役割の大きな違いです。

コンテンツ構造とは、具体的には段落や箇条書きリスト、画像、テーブルなど全てが当てはまります。

それぞれが役割を持った「タグ」で囲まれます(マークアップとも)。

タグとは?ウェブページで表示させるだけじゃない

図解:HTMLのコンテンツ構造の説明
コンテンツ構造の説明タグとは

タグとはウェブページに載せる情報を構造化し、ブラウザにその構造が持つ情報や意味を伝える役割をします。

タグには目的ごとに役割があり、例えばウェブページ内の見出しであれば「hタグ」を使います。

これによりブラウザに、hタグで囲まれた情報は見出しであると伝わります。

なぜタグを使い分けるの?

ウェブページに載せる情報はタグ付けすることで意味を持たせる事が出来ます。

タグにはそれぞれ役割がありますから、正しいタグの使い分けはブラウザがウェブページを正しく解釈するのを助け、ひいてはGoogleの検索エンジンにも正しく情報を伝える事が出来ます。

結果として、ユーザーにもSEO的にも良い結果に繋がる訳です。

CSSとは?

画像:CSSとは?

CSSとはCascading Style Sheetsの事。スタイルシート言語といいます。ウェブページのレイアウトやテキストの色、サイズなど、見た目をスタイリングする目的で使います。

スタイルによっては滝が上から下へ流れ落ちる様に設定を継承していきます。この様な動きからCascading Styleと呼ばれます。

CSSの役割

HTMLがウェブページのコンテンツ構造を作る枠組みを作るものなら、CSSは見た目の装飾を施すものです。

見た目の装飾と言っても単に見た目を美しくする事ではなく、ユーザーがウェブページの情報を理解し、使いやすくする為の調整をするものです。

予備知識:HTMLの構造

説明の繰り返しにはなりますが、CSSを理解する前にまずHTMLがどのような仕組みか知っていると理解が深まります。

HTMLはタグと呼ばれる記号で構成されています。
開始タグ終了タグがあり、文章などの情報をこのタグで囲むことにより意味を持ちます。そして、この開始タグから終了タグで囲われた所を「要素」といいます。

図解:要素の仕組み解説

タグによって使えるものに違いはありますが、「属性」とその値である、「属性値」を指定出来ます。
後で紹介する「id」や「class」も、「属性」と「属性値」になります。

さらに、要素を別のタグで囲むことも出来ます。「入れ子」と言ったりもします。
下の図だと、三つの要素は階層構造になっています。
外側の要素を「親要素」、内側の要素を「子要素」といい、子要素のさらに内側が「孫要素」です。

図解:HTMLの要素入れ子構造
サンプルでは<div>が親要素。更に上にさかのぼって行けば<html>が親要素になります。

CSSの基本文法

CSSは、「セレクター」「プロパティ」「値」の3つで構成されています。
セレクターで指定する事により、デザインの適用先を選択しています。
図解:cssの文法書き方
CSSを適用する事を、「CSSを掛ける」と言ったりするよ。

まとめ

今回はHTMLとCSSについて解説しました。これから勉強してみたいと考えている人や興味を持っている人の参考になれば嬉しいです。

HTMLもCSSも時間は掛かりますが独学で習得出来ます。効率的に習得するならスクールも有りだと思いますよ。

画像:未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!

未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!

画像:Webデザイナーを目指す!おすすめオンラインスクールと選び方

Webデザイナーを目指す!おすすめオンラインスクールと選び方