みなさんは「HTML・CSS」の違いや役割を明確に説明することはできますか？

なんとなくは知っているつもりでも、具体的にどんなものなのかはっきりと分からない方もいるのではないでしょうか？

HTMLとCSSといえば、ホームページ制作・WEBデザイン初心者の方が一番最初に学ぶものですよね。

この記事では、まだHTML・CSSを知らない初心者の方でも分かるように、ホームページ・WEBデザインの基礎である「HTML・CSS」についてわかりやすくご紹介できればと思っています☆

HTMLとは？

HTMLというのは、文（テキスト）の一つ一つをどんな役割で表示するのか、目印をつけるためのものです。

現在のインターネット上で見れるWEBページのほとんどがHTMLを使って制作されており、WEBページを作るための最も基本的なマークアップ言語として使用されています。

正式名称は「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」

それぞれの意味をご紹介します。

・ HyperText

図表・画像・音声・動画を含むテキストデータを共有して閲覧できるシステム。単なるテキスト (文字）を超えたテキストデータ。テキストを結びつける仕組み。

・Markup　

目印をつける。コンピュータが読み取れるタグをつけること。

・Language

言語

意味はこんな感じです。

つまり「HTML」とは『さまざまなデータをコンピューターが読み取れるようにタグ付けする言語』

Webページの骨組みとなる文字列のこと、Webページの文章構造を定義するものです。

HTMLの役割としては、Web上で文章の表示をどうやってするか、印づけすることです。

HTMLを記述することで、「文字の大きさを変える」「文字を強調させる」「タイトルを作る」「見出しを作る」「画像を貼る」などの効果が反映されます。

HTMLを使ってできることは、主に以下の4つです。

①Webページ制作

ホームページの作成には、必ずHTMLが用いられます。また、WEBのブラウザでを経由して閲覧するページのほとんどはHTMLで作られているため、WEBページの作成にはHTMLの知識が必須となります。

②Webデザイン

WEBデザインは、クライアントの要望に応じてWEBサイトの見た目を整えることです。HTMLを正しく理解し、適切なコンテンツを表示させることが重要になります。また、デザインにはHTMLの他にCSSも必要になりますが、CSSについては後に紹介します。

③アプリ制作

WEBアプリの中には、HTMLが使われているものが数多くあります。WEBアプリには複数のコンテンツがあり、それらを組み合わせて構成されています。それら1つ1つのページにどのようなコンテンツを表示させるかを決めているのがHTMLです。

④HTMLメール

メールにもHTMLが用いられています。通常のテキストメールだけでなく、文字が装飾されていたり画像が貼ってあるメールを「HTMLメール」と呼びます。

ホームページ制作の他にもHTMLを使ってできることがありますね。

HTMLは、<　>（カッコ）でアルファベットなどを囲って、それそのものは「タグ」「HTMLタグ」なんて呼ばれています。わたしたちがWeb上で文章をみているときは見えていません。

代表的なものをいくつか紹介します。

<p>〇〇</p>：pで囲まれた〇〇は「段落」の意味をもつ

<h1>〇〇</h1>：h1で囲まれた〇〇は「見出し1」の意味をもつ

<a>〇〇</a>：aで囲まれた〇〇は「リンク」の意味をもつ

他にもたくさんのタグがありますが、種類が多いのでこの記事では例としてこの３つをご紹介しました。

CSSとは？

CSSは、Cascading Style Sheets（カスケーディング スタイル シート）の略称です。

ホームページやブログサイトなどで使われているプログラミング言語の一種で、スタイルシート言語という種類に分類されます。

HTMLがタグづけをして文章表示を整えてくれる骨組みだとすると、

CSSはホームページの見た目を整えるための装飾です。

CSSはHTMLと組み合わせて使います。HTMLだけだと、Wordに文字を打つような表示だけになりますが、CSSを加えると、文の色を変えたり、背景の色や表示を変えたりしてくれます。

CSSでは、「どこ」の、「何」を、「どうする」かを、それぞれ「セレクタ」「プロパティ」「値」の3要素で示します。

例）「タイトル」の、「文字」を、「大きくする」

「このページ」の、「背景の色」を、「赤にする」

などなど…….。

CSSを加えることでページのデザインができるようになるということです。CSSでは、文字の色や大きさ、フォント、背景色の変更などを記述します。

さらに、「文字や画像を左寄せにするか、中央揃えにするか」「2段組みにするか」「文字と文字の間隔はどれくらいにするか」等といったレイアウトの調整もCSSで行います。

CSSのプロパティをいくつかご紹介します。

color	色
font-size	文字サイズ
width	横幅
height	高さ
background-color	背景色
font-weight	文字の太さ

HTML同様他にもたくさんのタグがありますが、種類が多いのでこの記事では例としての６つをご紹介しました。

HTML・CSSを学習するメリットはあるの？

ご存知の方がほとんどだと思いますが、ここまで読んで下さった方の中には「HTMLやCSSに興味がある」「WEB制作者になるために勉強したい」とみてくれていた方もいるかと思います。

では、HTMLやCSSを学習するメリットにはどんなことがあるのでしょうか。

以下にまとめてみました。

【学習メリット】

・Webページの仕組を理解できる。

・HTMLを理解しておく事で、今後他のプログラミング言語を勉強していく上での基本的な感覚を得ることにつながる。

・HTML・CSSの観点からSEO対策を施すことが出来る。

・ユーザーにとって読みやすく、使いやすいWEBサイトを制作することができるようになる。

・Webサイト作成用に配布されている無料テンプレートを、自分の用途に合わせてカスタマイズできるようになるので自由度が高まる。

・WordPressなどのブログサイトを利用している場合には、他のブログのデザインを自分のサイトに取り入れることもできる。

・論理的な思考が身に付く。（論理的思考は、プログラミングを学習することで身に付くとされていますが、HTMLやCSSのようなマークアップ言語を使用する作業においても養われるようです(^ ^)）

などなどこんなにたくさんのメリットがありました。

Webページの仕組みについて理解できるだけでなく、学習することでWebサイトやブログ制作の幅が大きく広がり、論理的思考まで身に付きます。そして、SEO対策にも関係しているんです！

興味がある方はぜひ学習して知識を深めていきましょう！

まとめ

HTML・CSSについてざっくりとですがご紹介させていただきました！

それぞれがどんなものか、どんな役割があるかはご理解いただけましたでしょうか。

ここまでの解説で両者がどういった働きをしているのか、、何となくでもイメージできれば幸いです。

HTMLやCSSの知識を身につけることで、ご自身で簡単なWeb制作が可能になるだけではなく、日々のWebマーケティング業務にも活かすことができたりと、ご紹介したようなメリットがたくさんあります。どちらとも、Webサイト制作においてなくてはならない重要な存在です。

ホームページの制作を考えている方、企業のホームページ担当に抜擢された方、自社でのホームページ更新をお考えの方も、まずは第一歩として、HTMLやCSSの学習をしてみてはいかがでしょうか。

日々知識を深め、スキルを磨いてお客様や自分の理想とするWebサイトを作り上げていきましょう！