HTMLとCSSとは? それぞれの役割を理解しよう。
インターネット上で公開されているWebサイト（ホームページ）はHTMLやCSSと呼ばれる言語を使って作られています。
HTML→HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）
CSS→Cascading Style Sheets（カスケーディング・スタイル・シート）
どちらもWebサイトを制作するために開発された言語で、ルールに沿って記述する必要があります。このページではHTMLとCSSの役割や基本的な書き方を解説します。
実際にHTMLやCSSを確認してみよう
Webブラウザ（ChromeやFirefoxなどのインターネット閲覧ソフト）の機能を使うと、Webサイトの中身を開いてHTMLやCSSを確認することが出来ます。実際に確認してみましょう。
サンプルページを開く
Chromeを起動し下記のリンクをクリックしてサンプルページを開いてください。図のようなページが開きます。
HTMLを確認する
このページの中身のHTMLを確認してみましょう。ページの左上、白い箇所で【右クリック】→【ページのソースを表示】をクリックします。（画像の上で右クリックするとこの項目が表示されないので気をつけてください。）
すると、下図のような文字が沢山並んだ画面が表示されます。これがこのページのHTMLです。
<html lang="ja">や<head><title>のように<>で囲まれた文字が沢山あります。これらをHTMLタグと呼びます。タグには様々な種類があり、それらが沢山集まってページ全体を構成しています。
HTMLタグにはそれぞれ役割があり、文字を表示するタグや画像を表示するタグなど、様々な機能を持ったタグが存在します。
CSSを確認する
次はCSSを確認してみましょう。
CSSはHTMLとは別の場所に保存されている事が多く、確認するためには、HTML内に記述されているCSSファイル名を探す必要があります。10行目を見てみると「style.css」と書かれています。これがcssファイルへのリンクです。「style.css」をクリックしてみましょう。
下図のようなCSSが表示されました。HTMLとは雰囲気が違いますね。HTMLとCSSでは役割が違うので書き方も異なります。確認ができたらブラウザのタブを閉じましょう。先程のHTMLのタブも閉じてください。
HTMLとCSSの役割
HTMLの役割
HTMLには大きく2つの役割があります。
ひとつめは、文字や画像といった部品をページに配置することです。配置するだけなので、上から下に順番に並んでいきます（横に並ぶものもあります）。また、部品が増えてきたときに、部品をまとめてグループ化することもできます。
ふたつめは、各部品に意味をもたせることです。HTMLタグはそれぞれ「タイトル」「見出し」「段落」といった意味を持っているので、各部品が適切な意味を持つようにHTMLタグで囲んでいきます。タグで囲むことをマークアップと呼びます。
CSSの役割
CSSは、部品の大きさや色やレイアウトなど、見た目のデザインを細かく調整する役割を持っています。HTMLのみで部品を表示させた場合は、HTMLが元々もっている大きさや色の設定が使用されますが、CSSを使うことで細かいサイズや色を指定することができます。
その他にも枠線をつけたりボタン風に加工したり、さらにはPC用とスマートフォン用に表示を切り替えるなど様々な事ができます。
CSSを無効にしてみる
Chromeの機能を使うとCSSを無効にすることができます。そうすることで、CSSがどのような役割を持っているのか、HTMLのみだとどのように表示されるのかを確認することができます。もう一度先程のサンプルページで確認してみましょう。
空いている場所で【右クリック】→【検証】を選択します。
画面の右側にHTMLやその他様々な情報が表示されました。この画面ではより詳しくHTMLやCSSの内容を確認することができます。
右画面の上の方に表示されているHTMLの中から<head>…</head>と書かれている箇所を探します。先頭に三角形が表示されているのでクリックします。
すると<head>の中身が表示されるので、"style.css"と書かれた箇所を探しましょう。
“style.css"と書かれた箇所で【右クリック】→【Delete element】を選択します。
するとCSSが削除され、Webサイトの表示が画像のようになりました。文字や画像などはある程度表示されていますが、並び順がおかしくなっていますね。
CSSに書いてあったデザインに関する設定が消えてしまったのでこのような表示になってしまいました。つまりHTMLのみの表示になったということです（厳密には他にもCSSが設定されているので、完全にHTMLのみになったわけではありません）。
スマホ版のデザインを確認する
CSSを使うと画面サイズに合わせてデザインを変更することもできます。PCで見ている場合はPC版のデザイン、スマートフォンで見ている場合はスマホ版デザインといったように、見ている人の環境に合わせて表示ができるのです。ここではスマートフォンで見たときにどのように表示されるかを確認をしてみましょう。
まずは、先程削除したCSSをもとに戻したいと思います。ブラウザウィンドウの左上にある再読み込みボタンをクリックすると、CSSが再び読み込まれてもとのデザインに戻ります。再読み込みはF5キーでもできます。
次に右側の検証画面で、図のボタンをクリックします。すると左側のデザイン画面の幅が狭くなります。
左側のデザイン画面上に「サイズ：」と表記された箇所があるので、クリックしてスマートフォンなどの機種名を選択します。
選択した機種での表示が再現されました。ただしPCで擬似的に再現しているだけなので、実際の表示とは異なる場合があります。
HTMLやCSSを入力するアプリ
HTMLやCSSはどのようなアプリで入力するのでしょうか。
HTMLもCSSも文字を入力するだけなのでメモ帳さえあれば作ることができます。しかしメモ帳だけでは最低限の機能しか無いため、入力するのがとても大変です。そこで「エディタ」と呼ばれる専用アプリケーションを使うのが一般的です。
エディタを使用すれば、入力補助機能ですばやく間違いもなく入力ができますし、ブラウザでのプレビュー（テスト表示）も可能なので作業を効率的に行うことができます。
Visual Studio Code
無料で使えるMicrosoftのアプリケーションです。HTML以外にも様々な言語に対応しています。「拡張機能」で様々な機能を追加して高度な作業をすることもできます。
Visual Studio Code – コード エディター | Microsoft Azure
Dreamweaver
Photoshopなどのデザイン系アプリで有名なAdobeのアプリケーションです。月額制なので利用するにはややハードルは高いですが、はじめから様々な機能が備わっています。
webデザインソフトウェア | Adobe Dreamweaver
他にも様々なエディタがあるので使いやすいものを選んでみましょう。
【参考】【2024年版】HTMLエディタのおすすめ9選を徹底比較！（無料あり）
よく使うHTMLタグ
よく使うHTMLタグには以下のようなものが挙げられます（あくまで一部です。他にも必ず使用するタグなどは存在します）。まずはこれらの意味や使い方を覚えてから、他のタグも少しづつ覚えていきましょう。
| <h1>〜<h6> | 見出し（記事の内容がわかるように本文の前に配置する短めの文章） |
| <p> | 段落（記事本文など） |
| <img> | 画像 |
| <ul><li> | リスト（箇条書きなど） |
| <a> | リンク |
| <section><div> | グループ分け |
HTMLタグの書き方
HTMLタグは基本的に「開始タグ」「終了タグ」をセットで使用します。この2つで文字をはさむことでその文字がブラウザ上で正しく表示されるようになります。imgタグのように終了タグが必要ないものや、終了タグが省略可能なものなどもあります。
またhtmlタグを入力する際は「半角」で入力しましょう。全角で入力するとhtmlタグとして認識されません。ただし、htmlタグにはさまれる文字（本文など）や、imgタグ内に記載するalt属性（代替テキスト）など、全角が使用できる箇所もあります。
CSSの書き方
CSSはHTMLとは役割が違うため書き方が全く異なります。図のように「どこの」「なにを」「どうする」この3つを記載する必要があります。それぞれ「セレクタ」「プロパティ」「値」と呼びます。
