HTMLは文書の構造を、CSSはその見た目を作る言語で、2つを組み合わせてWebページを表示します。まずは役割の違いと、書いて表示するまでの流れを押さえましょう。
HTMLとCSSとは - それぞれの役割
HTMLは見出しや段落といった文書の構造を定義し、CSSは色やレイアウトなどの見た目を指定する言語です。役割がはっきり分かれているため、2つをセットで使うのがWeb制作の基本です。
HTMLは文書の構造を作る
HTML(HyperText Markup Language)は、文章に「ここが見出し」「ここが段落」という意味を付けるマークアップ言語です。マークアップ言語とは、タグと呼ばれる記号でテキストを囲み、意味付けしていく言語のことです。
ブラウザはタグを読み取って見出しや段落を表示します。HTMLだけでもページは表示できますが、装飾のない素朴な見た目になります。
CSSは見た目を装飾する
CSS(Cascading Style Sheets)は、HTMLで作った構造に対して、文字の色や大きさ、余白、配置などの見た目を指定するスタイルシート言語です。
たとえば、文字の色や背景色の変更、文字サイズの調整、余白の追加、縦に並んだメニューの横並び化などをCSSで実現できます。
同じHTMLでも、CSSを差し替えるだけでデザインを大きく変えられます。
HTMLとCSSの関係と読み方
読み方は、HTMLが「エイチティーエムエル」、CSSが「シーエスエス」です。求人や教材では「HTML/CSS」「HTML・CSS」とまとめて表記されることが多く、どちらも2つの言語のセットを指します。
両者はプログラミング言語ではなく、HTMLが骨組み、CSSが化粧を担当する分業の関係です。
HTMLとCSSの基本的な書き方
HTMLはタグで文章を囲んで書き、CSSは「どこに・何を適用するか」をセレクタとプロパティで書きます。この2つを組み合わせれば、ブラウザで表示を確認できます。
HTMLの基本の書き方(タグと要素)
HTMLは<p>のような開始タグと</p>のような終了タグで文章を囲み、囲んだひとまとまりを要素と呼びます。次のコードは、見出しと段落だけの最小のHTMLです。
<h1>プロフィール</h1>
<p>Web制作を学んでいます。</p>ブラウザで表示すると、<h1>の部分が大きな見出しに、<p>の部分が通常の段落になります。
CSSの基本の書き方(セレクタとプロパティ)
CSSは「セレクタ { プロパティ: 値; }」という形で書きます。セレクタは適用先、プロパティは変えたいスタイルの種類で、次のコードはh1要素の文字色とサイズを変える指定です。
<style>
h1 {
color: #2563eb;
font-size: 24px;
}
</style>
<h1>CSSで色とサイズが変わる見出し</h1>この指定で、ページ内の全ての<h1>が青色・24pxで表示されます。CSS単体では動かず、HTMLと組み合わせて初めて画面に反映されます。
HTMLとCSSでコーディングして表示する
CSSをHTMLに適用する最も手軽な方法は、<head>内の<style>タグにまとめて書く方法です。次のコードをテキストエディタに貼り付けて「index.html」という名前で保存し、ブラウザで開くと表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのページ</title>
<style>
body { font-family: sans-serif; }
h1 { color: #2563eb; }
p { background-color: #eff6ff; padding: 8px; }
</style>
</head>
<body>
<h1>はじめてのページ</h1>
<p>HTMLで構造を作り、CSSで見た目を整えました。</p>
</body>
</html>青い見出しと、薄い青背景の段落が表示されれば成功です。実務ではCSSを別ファイルに分けて<link>タグで読み込む方法が主流ですが、まずは1ファイル構成で「書いて表示する」流れをつかみましょう。
HTMLとCSSで覚えておきたい基礎知識
最初に覚えるタグとプロパティは少数で足ります。使用頻度の高いものから、実際に書きながら覚えるのが近道です。
HTMLの主要タグの使い方
使用頻度の高い主要タグは、以下の通りです。
| タグ | 役割 |
|---|---|
<h1>〜<h6>
|
見出し(数字が小さいほど上位) |
<p> |
段落 |
<a> |
リンク |
<img> |
画像の表示 |
<ul>・<li>
|
箇条書き |
<div> |
要素のグループ化 |
この6種類の組み合わせで、文章中心のページは一通り組み立てられます。
CSSの主要プロパティの使い方
最初に覚えたい主要プロパティは、以下の通りです。
| プロパティ | 指定できる内容 |
|---|---|
color |
文字の色 |
font-size |
文字の大きさ |
background-color |
背景の色 |
margin |
要素の外側の余白 |
padding |
要素の内側の余白 |
text-align |
文字の配置(左寄せ・中央など) |
先ほどのサンプルコードの<style>内を書き換えて、動きを確かめながら覚えましょう。
HTMLとCSSに関するよくある質問
HTMLとCSSはどちらから学ぶべき?
HTMLが先です。CSSはHTMLの要素に対して装飾を指定する言語のため、対象となるHTMLがないと練習できません。
HTMLとCSSだけでWebサイトは作れる?
会社案内やプロフィールのような静的なサイトなら作れます。検索やログインのような動きを付けるには、JavaScriptとの組み合わせが必要です。
HTMLとCSSの学習に必要な期間は?
個人差がありますが、基礎の読み書きは数週間程度が目安です。確保できる学習時間によって前後するため、期間よりも実際に手を動かした量が上達を左右します。
