この記事ではWebサイトやブログなど多くのウェブに関わりのある「HTML」「CSS」について超基礎的な説明をしています。ウェブの世界においてはまさに「基本のキ」です。
- ◎名前はよく聞くけど、実際の所HTMLやCSSって何？
- ◎Webサイトでどんな風に使われているの？
- ◎少し興味があるからもうちょっと深く知りたい
こんな疑問を持つ方に噛み砕いて解説しています。
これから実際に勉強をしてみようか考えている方は是非読んでみて下さいね。
この記事の目次
HTMLとは？
HTMLとはHyperText Markup Languageの事。ハイパーテキストを記述する為のマークアップ言語です。もちろんテキストだけでなく、ナビゲーション画像などコンテンツの部分全てに使われています。
※ハイパーテキストとは、複数の文書（テキスト）を相互に関連付け、結び付ける仕組み。
今見ているこの記事(ブログ)もどこかの企業のウェブサイトも、骨組みはこのHTMLで出来ています。
色やレイアウトなど、見た目に関する部分はCSSがその役割を担っています。
HTMLの役割
HTMLの役割は、Web サイトにコンテンツ構造を持たせる事です。よく本の文書構造や、建物の骨組みに例えられます。CSSとの役割の大きな違いです。
コンテンツ構造とは、具体的には段落や箇条書きリスト、画像、テーブルなど全てが当てはまります。
それぞれが役割を持った「タグ」で囲まれます（マークアップとも）。
タグとは？ウェブページで表示させるだけじゃない
タグとはウェブページに載せる情報を構造化し、ブラウザにその構造が持つ情報や意味を伝える役割をします。
タグには目的ごとに役割があり、例えばウェブページ内の見出しであれば「hタグ」を使います。
これによりブラウザに、hタグで囲まれた情報は見出しであると伝わります。
なぜタグを使い分けるの？
ウェブページに載せる情報はタグ付けすることで意味を持たせる事が出来ます。
タグにはそれぞれ役割がありますから、正しいタグの使い分けはブラウザがウェブページを正しく解釈するのを助け、ひいてはGoogleの検索エンジンにも正しく情報を伝える事が出来ます。
結果として、ユーザーにもSEO的にも良い結果に繋がる訳です。
CSSとは？
CSSとはCascading Style Sheetsの事。スタイルシート言語といいます。ウェブページのレイアウトやテキストの色、サイズなど、見た目をスタイリングする目的で使います。
スタイルによっては滝が上から下へ流れ落ちる様に設定を継承していきます。この様な動きからCascading Styleと呼ばれます。
CSSの役割
HTMLがウェブページのコンテンツ構造を作る枠組みを作るものなら、CSSは見た目の装飾を施すものです。
見た目の装飾と言っても単に見た目を美しくする事ではなく、ユーザーがウェブページの情報を理解し、使いやすくする為の調整をするものです。
予備知識：HTMLの構造
説明の繰り返しにはなりますが、CSSを理解する前にまずHTMLがどのような仕組みか知っていると理解が深まります。
HTMLはタグと呼ばれる記号で構成されています。
開始タグと終了タグがあり、文章などの情報をこのタグで囲むことにより意味を持ちます。そして、この開始タグから終了タグで囲われた所を「要素」といいます。
タグによって使えるものに違いはありますが、「属性」とその値である、「属性値」を指定出来ます。
後で紹介する「id」や「class」も、「属性」と「属性値」になります。
さらに、要素を別のタグで囲むことも出来ます。「入れ子」と言ったりもします。
下の図だと、三つの要素は階層構造になっています。
外側の要素を「親要素」、内側の要素を「子要素」といい、子要素のさらに内側が「孫要素」です。
CSSの基本文法
セレクターで指定する事により、デザインの適用先を選択しています。
まとめ
今回はHTMLとCSSについて解説しました。これから勉強してみたいと考えている人や興味を持っている人の参考になれば嬉しいです。
HTMLもCSSも時間は掛かりますが独学で習得出来ます。効率的に習得するならスクールも有りだと思いますよ。
