- HTML?CSS?それともJavaScript?どれから勉強すればいいの?
- プログラミングとコーディングって何が違うの?
- 独学でできるのか、スクールに通うべきか迷っている…
HTMLやCSS、JavaScript…聞いたことはあるけれど、画面にエラーが出るたびに心が折れそうになる。ネットで調べても情報がバラバラで、何を信じればいいのかわからない。
でも、大丈夫。コーディングは最初の一歩さえ踏み出せば、必ずできるようになります!
このブログでは、「初心者でもスムーズに理解できる」 をテーマに、シンプルでわかりやすい基礎知識をお届けします。
「できるかも!」と自信が持てる瞬間を、一緒に増やしていきましょう!
コーディングとは?
ここではコーディングとはどういったものなのかについてお話ししていきます。
- コーディングの定義
- コーディングとプログラミングの違い
コーディングの定義
コーディングとは、コンピューターに「何をどう動かすか」を指示するために書く作業のことです。
プログラムを書くこととも言えますが、特にWebサイトやアプリの見た目や動きを作るときによく使われます。
世界で最も人気のあるプログラミング言語のランキング「TIOBEインデックス（2024年1月）」によると、コーディングでよく使われる言語の一つであるJavaScriptは、上位にランクインしています。
これは多くのWebサイトで使われており、コーディングが現代のインターネット社会に欠かせない技術だからです。
コーディングは「料理のレシピ」に似ています。
料理を作るとき、レシピには「材料」「作り方」が書かれていますよね?
それと同じように、コンピューターに「何をどう動かすか」を伝えるためにコードを書きます。
例えば、Webサイトなら「見出しを大きくする」「ボタンを押したら画像が変わる」などの動きを決めることができます。
つまり、コーディングとは「コンピューターへの指示書」を作ること。Webサイトやアプリを作るために欠かせない技術で、学べば自分でサイトを作ったり、自動で動くプログラムを作れたりするようになります!
コーディングとプログラミングの違い
コーディングとプログラミングは似ていますが、少し違います。
- コーディング → コンピューターに指示を書く作業（コードを書くこと）
- プログラミング → コードを書くこと＋設計やテストなども含めた全体の作業
世界的なプログラミング教育団体「Codecademy」によると、コーディングは「プログラムを書くこと」、プログラミングは「問題を解決するためのシステム全体を作ること」とされています。
つまり、プログラミングはコーディングを含むもっと広い作業を指します。
コーディングとプログラミングの関係は「本を作る作業」に似ています。
- コーディング → 文章を書く作業（実際にコードを書く）
- プログラミング → 物語を考える、登場人物を決める、編集する作業（全体の設計やテストも含める）
コーディングはプログラミングの一部です。ただコードを書くだけでなく、プログラム全体を設計し、テストし、問題を解決するのがプログラミングです。
なぜコーディングを学ぶべきか?
ここではどうしてコーディングを学ぶべきなのか、次の2つのことについてお話ししていきます。
- コーディングの重要性
- Web技術におけるHTML・CSS・JavaScriptの必要性
コーディングの重要性
コーディングは、コンピューターに指示を出して、Webサイトやアプリを作るためにとても重要です。
これを学ぶことで、便利なものを作ったり、将来の仕事に役立てたりできます。
今、世界中の仕事の約50％以上がデジタル技術に関わっています（OECD調査より）。
プログラムが動くことで、ゲーム、SNS、銀行のシステムなど、私たちの生活が便利になっています。
コーディングは「レシピを書くこと」に似ています。
- レシピなし → どんな料理ができるか分からない
- コーディングなし → コンピューターは何もできない
だから、正しいコーディングが大切なんです!
コーディングを学ぶことで、自分のアイデアを形にできます。小さなプログラムから始めて、楽しく学びましょう!
Web技術におけるHTML・CSS・JavaScriptの必要性
Webサイトを作るには、HTML・CSS・JavaScriptの3つが必要です。それぞれ役割が違い、どれも欠かせません。
W3Techsの調査によると、全Webサイトの99%以上がHTML、96%以上がCSS、98%以上がJavaScriptを使用しています。
これらがそろうことで、見やすく、動きのあるWebページが作れます。
例えばWebサイトを「家」に例えると、以下のようになります。
- HTML → 家の骨組み（部屋や壁の配置）
- CSS → 内装やデザイン（壁紙や家具の色）
- JavaScript → 電気や水道（ボタンを押すと動く仕組み）
どれかが欠けると、快適な家にならないのと同じです。
Webサイトを作るには、この3つをバランスよく使うことが大切です。少しずつ学んで、楽しく作っていきましょう!
HTML・CSS・JavaScriptの役割
ここでは、コーディングの中身についてお話ししていきます。
- HTMLとは?
- HTMLとCSSの違い
- CSSとは?
- JavaScriptとは?
HTMLとは?
HTML（HyperText Markup Language）は、ウェブページを作るための言語です。ウェブサイトに文字や画像、リンクを表示するために使います。
ウェブページがどのように表示されるかを決めるのはHTMLだからです。
例えば、スマホやパソコンで見ているページの「文字の大きさ」や「画像の場所」などは、すべてHTMLが指示しています。
信頼できる情報源によると、世界中のウェブサイトのほとんどがHTMLで作られているんですよ！
HTMLは「家を建てるための設計図」とも言えます。設計図がなければ家は作れませんよね？同じように、HTMLがないとウェブページも表示されません。
だから、ウェブページを作るにはまずHTMLを学ぶことが大切なんです。
HTMLとCSSの違い
HTMLはWebページの「骨組み」、CSSはその「デザイン」を担当します。
この2つが組み合わさることで、美しく見やすいWebページが作れます。
GoogleのWeb開発ガイドラインによると、HTMLはコンテンツの構造を決め、CSSはレイアウトや色を指定する役割を持っています。
これを分けることで、効率よくデザインを変更できるのです。
例えばHTMLが「家の設計図」なら、CSSは「インテリアや外観のデザイン」です。設計図だけでは家は完成しませんが、デザインが加わることで素敵な家になります。
| 役割 | HTML | CSS |
| 何をする? | 構造を作る | デザインを整える |
| 例 | 見出し、文章、画像の配置 | 色、フォント、レイアウト |
Webページを作るなら、HTMLとCSSの役割をしっかり理解することが大切です!
CSSとは?
CSS（Cascading Style Sheets）は、Webページのデザインを決めるためのルールです。文字の色や大きさ、レイアウトを自由にカスタマイズできます。
Googleの公式ドキュメントによると、CSSを使うことで「ページの見た目を統一し、使いやすくする」ことができます。
これにより、デザイン変更が簡単になり、より多くの人にとって見やすいページが作れるのです。
例えばCSSは「服やインテリアのコーディネート」です。
家（HTML）を建てただけでは味気ないですが、カーテンや家具（CSS）を選ぶことで、おしゃれで快適な空間になります。
| 役割 | CSSでできること |
| 色 | 文字や背景の色を変える |
| サイズ | 文字の大きさを調整する |
| 配置 | 画像や文章の位置を決める |
CSSを学べば、Webページを自由にデザインできるようになります!
JavaScriptとは?
JavaScript（ジャバスクリプト）は、Webページに動きをつけるプログラミング言語です。
ボタンを押すとメニューが開いたり、スクロールすると画像が変わるなどの動作を作れます。
Statistaの調査によると、2023年時点で世界中のWebサイトの98%以上がJavaScriptを使用しています。
それだけ多くのWebサイトで必要とされている技術なのです。
JavaScriptは「ロボットの頭脳」のようなものです。
HTMLが体、CSSが服やデザインなら、JavaScriptは体を動かす仕組みです。
たとえば、自動ドアのように「人が近づいたら開く」という動きも作れます。
| 言語 | 役割 |
| HTML | ページの構造を作る |
| CSS | デザインを整える |
| JavaScript | 動きをつける |
JavaScriptを学べば、Webページをもっと楽しく、便利にできます!
コーディングを始める前に準備すべき3つのもの
これからコーディングを始めるためには、次の3つのものを準備しましょう。
- フォルダとファイルを準備する
- コーディングに必要な基本スキル
- コーディングにおすすめのエディタ
フォルダとファイルを準備する
Webサイトを作るときは、フォルダとファイルをしっかり整理することが大切です。
ファイルがバラバラだと、どこに何があるのかわからなくなり、作業が大変になります。
プロのWeb開発でも、フォルダを整理することで、作業のスピードが約30%向上するというデータもあります（Stack Overflow調査）。
例えばフォルダとファイルの整理は、「学校のカバンの中身を整える」のと同じです。
ノートや教科書がバラバラだと、授業中にすぐ見つかりませんよね?
Webサイトも同じで、ファイルをわかりやすく整理すると、作業がスムーズになります。
基本的なフォルダ構成
/my-website （プロジェクトのフォルダ）
├── index.html （Webページの本体）
├── style.css （デザインを決めるCSS）
├── script.js （動きをつけるJavaScript）
├── /images （画像を入れるフォルダ）
├── /assets （フォントやアイコンなどを入れるフォルダ）
フォルダとファイルを整理すると、作業がしやすくなり、ミスも減ります。最初にしっかり準備するのが大切です!
コーディングに必要な基本スキル
コーディングをするには、ルールを理解する力・正しく書く力・問題を解決する力が必要です。
Web開発では、決まったルール（HTML・CSS・JavaScriptの文法）を守らないと正しく動きません。
また、エラーが出たときに修正する力も大切です。
実際、プログラマーの約75%が、毎日エラーの修正をしていると報告されています（Stack Overflow調査）。
コーディングは「料理」と似ています。
- レシピを知る（ルールを理解）
- 材料を正しく使う（コードを書く）
- 味見をして調整（エラーを修正）
レシピ（ルール）を守らないと、美味しい料理（動くWebサイト）は作れません!
基本スキル一覧
| スキル | 重要なポイント |
| HTML | ページの骨組みを作る |
| CSS | デザインを整える |
| JavaScript | 動きをつける |
| エラー解決 | 原因を探して修正する力 |
コーディングを学ぶには、ルールを知り、書いて、試して、直すことが大切です!
コーディングにおすすめのエディタ
コーディングをするなら、**Visual Studio Code（VS Code）**がおすすめです!
VS Codeは、世界中のプログラマーに人気のあるエディタです。
Stack Overflowの調査によると、2023年には約74%の開発者がVS Codeを使用していると報告されています。無料で使えて、便利な機能も豊富です。
例えばエディタは「ノート」と同じです。
- 普通のノート（メモ帳） → 何も機能がない
- 特別なノート（VS Code） → 自動で間違いを教えてくれる、カラフルに表示して見やすい
VS Codeを使えば、よりスムーズにコーディングができます!
おすすめのエディタ一覧
| エディタ名 | 特徴 |
| VS Code | 初心者向け、無料、多機能 |
| Atom | シンプルで使いやすい（※開発終了） |
| Sublime Text | 軽量で速い |
| Notepad++ | Windows向けでシンプル |
結論
コーディングを快適にするために、VS Codeのような便利なエディタを使いましょう!
HTML・CSS・JavaScriptの書き方と記述例
ここではコーディングの記述の仕方について具体的にお話ししていきます。
- HTMLのタグとは?
- HTMLのバージョン紹介
- HTMLタグの種類
- HTMLを書く方法
- CSSのバージョン紹介
- JavaScriptを書く方法
HTMLのタグとは?
HTMLのタグとは、Webページの「骨組み」を作るための命令のことです。
文章の見出しや画像の表示などを決める役割があります。
HTMLは、世界中のWebページで使われている言語です。
W3Techsの調査によると、全Webサイトの約99%がHTMLを使用しています。
タグを適切に使うことで、ページが正しく表示されます。
HTMLのタグは、料理のレシピにある「指示」のようなものです。
- <h1>は「タイトルを書く」と指示するタグ
- <p>は「文章を書く」と指示するタグ
- <img>は「画像を表示する」と指示するタグ
これらを組み合わせることで、Webページが完成します。
| タグ | 役割 |
| <h1> | 見出しを作る |
| <p> | 文章を書く |
| <img> | 画像を表示する |
HTMLのタグを覚えれば、自分でWebページを作ることができるようになります!
HTMLのバージョン紹介
HTMLにはいくつかのバージョンがあり、最新のものほど新しい機能が追加されています。
今使われているのは「HTML5」というバージョンです。
HTMLは、1991年に最初のバージョンが作られて以来、何度も改良されてきました。
HTML5は2014年に正式発表され、多くの新機能が追加されています。
たとえば、動画や音声を簡単にWebページに埋め込めるようになりました。
HTMLのバージョンは、スマホのアップデートのようなものです。
- HTML1.0（1993年）：最初のバージョン
- HTML4.01（1999年）：デザインを調整できるように
- HTML5（2014年）：動画や音声を簡単に追加可能
| バージョン | 特徴 |
| HTML1.0 | 一番最初のシンプルなWebページ |
| HTML4.01 | デザインやレイアウトができる |
| HTML5 | 動画・音声が簡単に使える |
今のWebサイトはほとんどがHTML5で作られています。HTMLの進化を知ると、Webの仕組みがもっと楽しくなりますよ!
HTMLタグの種類
HTMLタグにはたくさんの種類があり、それぞれがWebページの構造を作る役割を持っています。タグを正しく使うことで、見やすく整理されたページが作れます。
HTMLタグは、大きく分けて次の3つの種類があります。
| タグの種類 | 役割 | 例 |
| 構造系タグ | ページの基本を作る | <html>, <head>, <body> |
| テキスト系タグ | 文字を装飾する | <h1>, <p>, <strong> |
| メディア系タグ | 画像や動画を入れる | <img>, <video> |
HTMLタグは、料理のレシピのようなものです。
- 構造系タグ：お皿やお盆（全体の形を決める）
- テキスト系タグ：料理の名前や説明（文字を装飾）
- メディア系タグ：写真や動画（見た目を豊かにする）
HTMLタグを理解すると、Webページの作り方がスムーズになります。基本のタグから覚えて、実際に書いてみましょう!
HTMLを書く方法
HTMLを書くには、メモ帳のようなテキストエディタを使い、.htmlという拡張子で保存すればOKです。あとはブラウザで開くだけで、Webページが表示されます。
HTMLは特別なソフトがなくても書けます。基本的な流れは以下の通りです。
- テキストエディタを開く（例：メモ帳、VS Code）
- HTMLコードを書く（例：<h1>こんにちは</h1>）
- ファイルを .html で保存
- ブラウザで開く
HTMLを書くことは「手紙を書く」のと似ています。
- テキストエディタ → 紙とペン
- HTMLコード → 手紙の内容
- .htmlで保存 → 封筒に入れる
- ブラウザで開く → 相手が手紙を読む
最初はシンプルなHTMLを書いて、実際にブラウザで確認してみましょう!実践すればどんどん上達しますよ。
CSSのバージョン紹介
CSSにはいくつかのバージョンがあり、今使われているのは「CSS3」です。新しいバージョンになるたびに、デザインの表現力が増しています。
CSS（Cascading Style Sheets）は、Webサイトの見た目を整える言語です。
バージョンごとに新しい機能が追加され、より便利になっています。
例えば、CSS3ではアニメーションやグラデーションなど、より自由なデザインが可能になりました。
CSSの進化は「クレヨンのセットが増えること」に似ています。
- CSS1（1996年）：基本の色（単純なデザイン）
- CSS2（1998年）：色鉛筆が追加（レイアウトが強化）
- CSS3（現在）：水彩やマーカーも使える（アニメーションや影）
CSSは進化し続けています。今はCSS3が主流ですが、新しい技術もどんどん登場しています。興味を持って学ぶことが大切です!
JavaScriptを書く方法
JavaScriptは、Webページに動きをつけるプログラミング言語です。
書く方法は大きく分けて2つあり、HTML内に直接書く方法と、外部ファイルとして保存して使う方法があります。
JavaScriptは、Webサイトにインタラクティブな機能（ボタンを押すと色が変わるなど）を追加できます。
W3Cによると、ほとんどのWebサイトでJavaScriptが使われています。
適切な書き方を学ぶことで、コードが整理され、開発がしやすくなります。
JavaScriptを書く方法は「レシピを書く場所」に似ています。
- HTML内に直接書く方法：メモ帳にレシピを書く（短いコード向き）
- 外部ファイルとして書く方法：レシピノートを作る（管理しやすい）
JavaScriptは簡単な書き方から始めて、少しずつ学ぶのが大切です。まずはHTMLの中に書いて、動作を試してみましょう!
HTMLコーディングの基本手順と実際のコーディング例
ここからはHTMLコーディングの基本手順と、実際のコーディング例をご紹介していきます。
- レイアウトを作成する
- HTMLの型を記述
- HTMLの基本構造
- HTMLタグの使い方
- HTML・CSSを書く
- 実際のコーディング例
レイアウトを作成する
Webページのレイアウトを作るには、HTMLとCSSを使うことが大切です!
HTMLはページの骨組みを作り、CSSは見た目や配置を整えます。
特にCSSのFlexboxやGridを使うと、自由にレイアウトができます。
Googleの開発者向けサイトでも、FlexboxとGridは現代のWebデザインに必須の技術と紹介されています。
例えばWebページのレイアウトは、「家の設計」と同じです。
- HTML → 家の骨組み（柱や壁）
- CSS → インテリア（家具の配置や色）
例えば、Flexboxを使うと横並びや中央寄せが簡単にできます。
CSSのレイアウト方法
| 方法 | 特徴 |
| Flexbox | 要素を横や縦に整列しやすい |
| Grid | 複雑なレイアウトを組みやすい |
| Position | 要素の位置を自由に決められる |
Webページを見やすくするには、HTMLで骨組みを作り、CSSでレイアウトを整えましょう!
HTMLの型を記述
HTMLを書くときは、「DOCTYPE宣言」と「基本の構造」を守ることが大切です!
「DOCTYPE宣言」は、ブラウザにどのHTMLのバージョンを使うかを伝える役割があります。最新のHTML5では、次のように書きます。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body>
</html>
HTMLの型は、建物の設計図と同じです。
- DOCTYPE宣言 → 「建築基準」（ルール）
- 基本の構造（head・body） → 「設計図」（家の形を決める）
HTMLを書くときは、正しい型を守って書くことで、ブラウザが正しく表示してくれます!
HTMLの基本構造
HTMLの基本構造は、「DOCTYPE宣言・head・body」の3つが大切です!
HTMLは、ウェブページを作るためのルールを決めたものです。正しい構造で書くことで、ブラウザが正しく表示してくれます。
基本の構造は以下のようになります。
<!DOCTYPE html> <!– ① HTMLのバージョンを指定 –>
<html lang=”ja”> <!– ② HTMLの開始 –>
<head>
<meta charset=”UTF-8″> <!– ③ 文字コードの指定 –>
<title>ページのタイトル</title> <!– ④ タイトル –>
</head>
<body>
<h1>見出し</h1> <!– ⑤ ページの内容 –>
<p>本文</p>
</body>
</html>
例えばHTMLの基本構造は、家を建てるときの土台のようなものです。
- DOCTYPE宣言 → 建築基準（ルール）
- head部分 → 家の設計図（目に見えない情報）
- body部分 → 家の中の部屋や家具（実際に見える部分）
HTMLの基本構造を理解することで、ウェブページを正しく作ることができます!
HTMLタグの使い方
HTMLタグは、ウェブページの「文章の意味」を決めるために使います!
ウェブページは、単なる文字の集まりではなく、見出しや段落、リンクなどの意味を持っています。
HTMLタグを使うことで、ブラウザがその意味を理解し、正しく表示してくれます。
例えば、以下のようなタグがあります。
| タグ | 役割 |
| <h1> | 見出し |
| <p> | 段落（本文） |
| <a> | リンク |
| <img> | 画像 |
例えばHTMLタグは、料理のレシピのようなものです。
- <h1>見出し</h1> → メニューのタイトル
- <p>本文</p> → 料理の説明
- <img>画像</img> → 料理の写真
正しいタグを使うことで、分かりやすく整理されたページになります!
HTMLタグを適切に使うことで、見やすく意味のあるウェブページを作ることができます!
HTML・CSSを書く
HTMLとCSSを書くことで、ウェブページを作ることができます!
- HTML はページの「骨組み」を作ります。見出し、文章、画像などを配置する役割があります。
- CSS はページの「デザイン」を決めます。文字の色やサイズ、背景、レイアウトを整えます。
例えば、次のようにHTMLとCSSを書きます。
html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>私のページ</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>こんにちは!</h1>
<p>これはサンプルのページです。</p>
</body>
</html>
css
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
}
例えばHTMLとCSSは、「家づくり」と似ています!
- HTML → 家の骨組み（柱や壁）
- CSS → 内装や家具（色やデザイン）
HTMLだけではシンプルな家ですが、CSSを加えるとおしゃれで快適な空間になります!
HTMLでページの中身を作り、CSSでデザインを整えることで、見た目のよいウェブページが完成します!
実際のコーディング例
コーディングは、HTML・CSS・JavaScriptを使って、ウェブページを作ることです!
- HTML → ページの骨組みを作る
- CSS → ページのデザインを整える
- JavaScript → ページに動きをつける
例えば、次のコードでシンプルなページを作れます!
html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>サンプルページ</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>こんにちは!</h1>
<button onclick=”greet()”>クリックしてね</button>
<script src=”script.js”></script>
</body>
</html>
css
h1 {
color: blue;
text-align: center;
}
button {
background-color: orange;
padding: 10px;
}
js
コピーする編集する
function greet() {
alert(“こんにちは!”);
}
コーディングは「料理」に似ています!
- HTML → 食材を準備する
- CSS → お皿にきれいに盛り付ける
- JavaScript → 温めたり味を変えたりする
ここにテキストを入力実際のコーディングでは、HTML・CSS・JavaScriptを組み合わせて、見た目も機能もあるページを作ります!
CSSの書き方と基本デザイン
ここではCSSの書き方と基本デザインについてお話しします。
- HTMLタグに直接書く（インラインCSS）
- <style>タグを使う（内部CSS）
- CSSファイルを使う（外部CSS）
- 文字のスタイルを変える
- 背景色をつける
- 要素を中央に配置する
HTMLタグに直接書く（インラインCSS）
インラインCSSを使うと、HTMLタグの中に直接スタイル（デザイン）を指定できます!
インラインCSSは、以下のようにタグのstyle属性を使って書きます。
html
<p style=”color: red; font-size: 20px;”>こんにちは!</p>
📌 メリット
- 特定のタグだけデザインを変更できる
- 外部のCSSファイルを作らなくてもすぐに使える
📌 デメリット
- コードが長くなりやすい
- 他のタグにも同じデザインを適用したいときに手間がかかる
インラインCSSは、「メモ帳に直接書き込む」のと同じです。
でも、大きなノート（外部CSS）を使う方が後で編集しやすいです。
インラインCSSは手軽だけど、たくさんのスタイルを適用するときは外部CSSを使った方が便利です。
<style>タグを使う（内部CSS）
<style>タグを使うと、HTMLファイルの中でまとめてデザインを設定できます!
内部CSSは、<head>の中に<style>タグを使って書きます。
これにより、同じページ内の複数のタグにスタイルを適用できます。
html
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>こんにちは!</p>
</body>
📌 メリット
- 1つのファイルにHTMLとCSSをまとめられる
- 複数のタグに同じデザインを適用できる
📌 デメリット
- ページが増えると管理が大変になる（他のページには適用できない）
内部CSSは、「ノートの見出しをページごとに整理する」ようなものです。
でも、たくさんのページがある本（Webサイト）なら、別のノート（外部CSS）を作る方が便利です。
<style>タグを使えば、ページごとにまとめてデザインを設定できるます。 でも、複数のページに使うなら外部CSSがオススメです!
CSSファイルを使う（外部CSS）
外部CSSを使うと、複数のページに同じデザインを適用できます。
外部CSSは、HTMLとは別のファイル（例：style.css）にデザインをまとめ、すべてのページで共通のスタイルを使える方法です。
HTMLに次のように書いてリンクします。
html
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
📌 メリット
- 複数のページで同じCSSを使える
- HTMLファイルがスッキリする
📌 デメリット
- CSSファイルを別で管理する必要がある
外部CSSは、「学校の制服」のようなものです。みんな同じデザインで統一できるから、毎回決めなくても統一感が出ます。
でも、制服のデザインを変えたいときは、ルール（CSS）を変更しなくてはなりません。
外部CSSを使えば、たくさんのページを一度に管理できて便利です! 大きなWebサイトを作るなら必須のテクニックになります!
文字のスタイルを変える
CSSを使うと、文字のスタイルを自由に変えられます!
Webページの文字は、CSSで色や大きさ、太さなどを調整できます。たとえば、次のようなコードを書きます。
css
p {
color: blue; /* 文字の色を青にする */
font-size: 20px; /* 文字の大きさを20pxにする */
font-weight: bold; /* 文字を太字にする */
}
よく使うプロパティ
| プロパティ名 | 説明 | 例 |
| color | 文字の色を変更する | color: red; |
| font-size | 文字の大きさを変更する | font-size: 24px; |
| font-weight | 文字の太さを変更する | font-weight: bold; |
| font-style | 文字を斜め（イタリック）にする | font-style: italic; |
CSSで文字のスタイルを変えるのは、ノートの文字をカラーペンで目立たせるのと同じです。
例えば、大事な部分を赤で書いたり、大きくしたりすると、読みやすくなりますよね!
文字のスタイルを変えると、Webページが読みやすくなり、伝えたいことがしっかり伝わります!
背景色をつける
CSSのbackground-colorを使うと、Webページに背景色をつけられます。
背景色をつけると、文字が見やすくなったり、デザインをおしゃれにしたりできます。
実際、多くのサイトでは、適切な背景色を設定して読みやすさを向上させています。
基本の書き方
css
body {
background-color: lightblue; /* ページ全体の背景を水色にする */
}
p {
background-color: yellow; /* 段落の背景を黄色にする */
}
背景色の指定方法
| 方法 | 例 |
| 色の名前 | background-color: red; |
| 16進数 | background-color: #ffcc00; |
| RGB | background-color: rgb(255, 200, 0); |
背景色をつけるのは、ノートの大事な部分にマーカーを引くのと同じです。
例えば、黄色のマーカーを引くと目立ちますよね?
同じように、Webページでも目立たせたい部分の背景色を変えると、わかりやすくなるんですよ!
背景色をつけることで、見やすくて、楽しいデザインのWebページを作れます。
要素を中央に配置する
要素を中央に配置するには、CSSのtext-alignやflexbox、marginを使うと便利です。
中央に配置すると、バランスがよくなり、見やすくなります。
たとえば、多くのWebサイトではタイトルやボタンを中央に配置して、ユーザーの目を引くデザインにしていますよ。
中央配置の方法（よく使われる3つ）
| 方法 | 使い方 | 用途 |
|---|---|---|
text-align: center; | テキストを中央にする | 見出しや文章 |
margin: 0 auto; | ブロック要素を中央にする（横方向） | 画像やボックス |
display: flex; | 要素を上下・左右中央にする | レイアウト全体 |
実際のコード例
要素を中央に配置するのは、ポスターを壁の真ん中に貼るのと同じ。
ちょっと端っこに寄っているとバランスが悪いですよね？
Webページも同じで、中央に配置するとキレイに見えるんです！
CSSを使えば、簡単に要素を中央に配置できます!レイアウトを整えて、見やすいページを作りましょう!
高度なHTML・CSSの活用
ここでは高度なHTMLとCSSの活用方法についてお話ししていきます。
- JavaScriptで動きをつける
- レスポンシブ対応を行う
JavaScriptで動きをつける
JavaScriptを使うと、ボタンを押したら画像が変わる、スクロールでアニメーションするなど、Webページに動きをつけることができます。
HTMLとCSSだけではページの見た目を作れるけど、動き（インタラクション）をつけるにはJavaScriptが必要になります。
例えば、Googleの検索候補がリアルタイムで表示されるのもJavaScriptのおかげなんでうすよ!
JavaScriptでできることの例
| 機能 | 説明 |
| ボタンをクリックすると色が変わる | ユーザーのアクションに反応 |
| スクロールするとアニメーション | ページに動きを追加 |
| 自動で画像を切り替える | スライドショーのような効果 |
実際のコード例（ボタンで文字を変える）
html
<button onclick=”changeText()”>押してね!</button>
<p id=”text”>ここが変わるよ!</p>
<script>
function changeText() {
document.getElementById(“text”).innerText = “変わったよ!”;
}
</script>
JavaScriptは、Webページの「リモコン」みたいなものです。
ボタンを押すとテレビのチャンネルが変わるのと同じで、JavaScriptを使うとWebページもボタンやスクロールに反応して動くようになるんですよ!
JavaScriptを使えば、Webサイトに楽しい動きをつけられます!少しずつ学んで、もっと面白いページを作ってみましょう!
レスポンシブ対応を行う
レスポンシブ対応をすると、スマホ・タブレット・パソコンなど、どんな画面サイズでも見やすいWebサイトを作れますよ!
今では世界中のWebページの約60％以上がスマホで閲覧されています（Statista, 2023）。
レスポンシブ対応をしないと、スマホで見たときに画面が崩れてしまうことも…。
そこで、CSSの「メディアクエリ」を使うと、画面サイズごとにデザインを調整できるんですよ!
メディアクエリの基本例
css
/* スマホサイズ（幅600px以下）で文字を大きく */
@media (max-width: 600px) {
body {
font-size: 18px;
}
}
レスポンシブ対応は「変形するお弁当箱」みたいなものです。
お弁当箱が大きいときは仕切りを広く、小さいときはコンパクトにすることで、どんなサイズでもピッタリ収まるんですよ!
レスポンシブ対応をすれば、どんなデバイスでも快適にWebサイトを見られる!スマホやタブレットでもデザインが崩れないように工夫しよう!
コーディングのコツとルール
ここではコーディングをするコツやルールについてお話ししていきます。
- HTML5を使用する
- 画像には代替テキストをつける
- 段落内に見出しを入れない
- インデントを統一する
- タグは小文字で
HTML5を使用する
HTML5を使うと、Webページが分かりやすく整理され、より便利な機能を簡単に追加できますよ。
HTML5は、2014年に正式に公開された最新のHTMLのバージョン。
<header> や <article> などの新しいタグが追加され、ページの構造が分かりやすくなりました。
さらに、<video> や <audio> タグを使うと、外部のプラグインなしで動画や音声を再生できます。
これにより、Webサイトの読み込みが速くなり、使いやすくなります!
HTML4とHTML5の違い（例）
| 機能 | HTML4 | HTML5 |
| ページ構造 | <div> ばかり | <header>, <section> などで整理 |
| 動画・音声 | Flashが必要 | <video>, <audio> でOK |
| フォーム | シンプルな入力欄 | placeholder, date など便利機能あり |
例えばHTML5は**「ラベル付きの引き出し」のようなものです。
昔は何でも同じ引き出しに入れていましたが、HTML5なら「タイトル用」「記事用」「メニュー用」など、ちゃんと分けられるから、整理しやすくなります。
HTML5を使えば、分かりやすく、使いやすいWebページを作れます! 最新のタグを活用して、もっと便利なサイトを作りましょう!
画像には代替テキストをつける
画像には「alt（代替テキスト）」をつけましょう。
そうすることで、画像が表示されないときでも内容が伝わるし、目が見えない人にも優しいWebサイトになります!
代替テキスト（alt）は、画像が見えないときに内容を説明する文字です。
例えば、インターネットの接続が悪いときや、視覚障がいのある人が画面読み上げソフトを使うときに役立ちます。
Googleもaltがある画像を評価するので、検索エンジン対策（SEO）にも効果的です!
代替テキストのメリット
| メリット | 具体例 |
| 画像が見えなくても内容が伝わる | ネットが遅くても、何の画像かわかる |
| アクセシビリティが向上する | 目が見えない人も、音声で情報を得られる |
| SEO対策になる | Googleが画像の内容を理解しやすくなる |
altは「写真のキャプション」みたいなものです。
写真がなくても、説明文があればどんな写真かわかりますよね。
altもそれと同じで、画像の内容をしっかり伝えてくれるんです。
画像には必ずaltをつけて、誰にとっても見やすいWebページを作ろう!
段落内に見出しを入れない
段落の中に見出し（h1～h6）を入れるのはNGです!
見出しは文章を整理するためのものだから、適切な場所に使いましょう!
見出し（hタグ）は、ページの構成をわかりやすくするために使うものです。
もし段落の途中に見出しを入れてしまうと、文章の流れが不自然になり、読みにくくなります。
また、Googleの検索エンジンもページの構造を正しく理解できなくなるので、SEOにも悪影響です!
適切な見出しの使い方
| ✅ 良い例 | ❌ 悪い例 |
| 見出しの後に関連する内容を書く | 文章の途中に見出しを入れる |
| 段落ごとに内容を整理する | 1つの段落に複数の見出しを入れる |
見出しは「本の章タイトル」みたいなものです。
もし、1つの段落の途中に章タイトルがあったら、変な感じになりますよね?
Webページも同じで、見出しは適切な場所に入れるのが大事なんです。
見出しは文章の「タイトル」として使い、段落の途中には入れないようにしよう!
インデントを統一する
コードのインデント（字下げ）を統一すると、読みやすくなり、ミスを減らせます。
インデントをバラバラにすると、どのコードがどこにつながっているのか分かりにくくなり、バグの原因になることも。
特にHTMLやCSS、JavaScriptでは、入れ子の構造が重要だから、見た目が整っているとすぐにコードの関係が分かります。
また、多くの開発者が2スペースや4スペースで統一するのが一般的ですよ!
インデントの統一方法
| ✅ 良い例（4スペース） | ❌ 悪い例（バラバラ） |
| <div> の中をそろえる | インデントがバラバラで読みにくい |
| チームでルールを決める | いろんなスペースやタブが混在 |
インデントを統一しないと、ぐちゃぐちゃなノートみたいになります!
例えば、先生が黒板に文字を適当に書いたら、どこから読めばいいのか分からいですよね?
コードも同じで、きれいにそろえれば、誰が見てもすぐ理解できますよ!
インデントを統一すると、コードが読みやすくなり、ミスも減る!
タグは小文字で
HTMLのタグは小文字で書くのが正しいルールです!
HTMLの仕様では、タグは小文字で書くことが推奨されています（W3C HTML仕様より）。
昔のHTMLでは大文字も使えたけど、今のHTML5では小文字に統一されています。
小文字にすることで、間違いが減り、コードの見た目が統一されて読みやすくなるんですよ!
タグの書き方の比較
| ✅ 良い例（小文字） | ❌ 悪い例（大文字） |
| <html> <body> <p>こんにちは!</p> </body> </html> | <HTML> <BODY> <P>こんにちは!</P> </BODY> </HTML> |
| ルールに沿っていて正しい | 旧式で今は推奨されない |
タグを小文字に統一するのは、学校のノートをきれいに書くのと同じです。
全部同じ書き方にすると、見直しやすくてミスが減りますよね?
逆に、大文字や小文字がバラバラだと、どこに何が書いてあるのか分かりにくくなるんです!
HTMLのタグは小文字で統一しよう!
チームでサイト制作をするときの注意点
ここでは次の2つの注意点についてお話しします。
- コーディング規約とは
- 優れたHTML・CSSのコーディング規約の共通点
コーディング規約とは
コーディング規約とは、プログラムを書くときのルールのことです。
コーディング規約を守ると、誰が見ても分かりやすく、間違いが少ないコードになります。
例えば、GoogleやAppleなどの大企業でも、自社のコーディング規約を作り、それに沿って開発しています（Googleのコーディング規約など）。
ルールを決めることで、チーム全員が統一されたコードを書けるようになるんですよ!
よくあるコーディング規約の例
- インデント（字下げ）を統一する（例：スペース2個 or 4個）
- 変数名を分かりやすくする（例：x ではなく totalPrice）
- タグは小文字で書く（例：<html>、<body>）
コーディング規約は、学校のノートの書き方のルールと同じです。
字をそろえたり、見やすく書くと、先生や友達が読みやすいですよね?
コーディングも同じで、決まったルールがあると、誰でもすぐに理解できるんですよ。
コーディング規約を守ると、誰が見ても分かりやすいコードが書けるようになります。
優れたHTML・CSSのコーディング規約の共通点
優れたHTML・CSSのコーディング規約には、「読みやすさ」「一貫性」「修正のしやすさ」という共通点があります。
コーディング規約を守ると、チームでの開発がスムーズになり、バグが減ります。
GoogleやAirbnbなどの大手企業も、自社のコーディング規約を公開し、それに沿って開発をしているんです（Google HTML/CSS Style Guide など）。
主な共通点
| 共通点 | 具体例 |
| 読みやすさ | インデントを統一する（例：スペース2つ） |
| 一貫性 | クラス名は–（ハイフン）でつなぐ（例：main-title） |
| 修正のしやすさ | CSSのコメントを入れる（例：/* ボタンのデザイン */） |
コーディング規約は、レシピの書き方と同じ!レシピに決まったルールがあると、誰が読んでも分かりやすく、同じ味を再現できますよね?
HTML・CSSの規約も、それと同じです。
ルールを守れば、誰が見ても分かりやすく、修正もしやすいコードが書けます。
コーディングを学び続けるには?
コーディングを学び続けるため方法は次の3つです。
- 独学で勉強する
- オンライン講座で学ぶ
- 模写コーディングやプロジェクト学習
独学で勉強する
独学で勉強することは可能だけど、効率よく学ぶにはコツが必要です。
インターネットには、無料で学べるプログラミング教材がたくさんあります。（例：MDN Web Docs やProgate）
ただし、一人で学ぶと「どこが間違っているか分からない」「挫折しやすい」という問題があります。
だから、目標を決めたり、分からないことを質問できる環境を作ったりするのが大切なんです。
独学を成功させるコツ
| コツ | 具体例 |
| 小さな目標を作る | 「1週間でHTMLの基礎を学ぶ」など、細かく目標を設定する |
| 実際に手を動かす | ただ読むだけでなく、コードを書いて試す |
| 分からないことは質問する | フォーラム（例：Stack Overflow）を活用 |
独学は、地図を持たずに冒険するようなものです。
地図（教材）を使い、道に迷ったら誰かに聞くことで、効率よく進めることができますよ。
独学でもプログラミングは学べます。でも、計画を立てて、質問できる環境を作ることが成功のカギです!
オンライン講座で学ぶ
オンライン講座を使えば、好きな場所・時間で効率よく学ぶことができます!
オンライン講座では、動画やクイズを使って分かりやすく解説してくれるため、初心者でも学びやいからです。
また、プラットフォームによっては、分からないことを質問できる機能もあります。
例えば、Udemy や Progate などのサービスは、短時間で効率的に学べるよう工夫されている。
オンライン講座のメリット
| メリット | 説明 |
| 自分のペースで学べる | 学校の授業と違い、何度も繰り返し見られる |
| わかりやすい教材 | 動画やクイズで理解しやすい |
| 質問できる環境 | コースによっては、講師や他の学習者と交流できる |
オンライン講座は、自動で説明してくれる先生がいる塾のようなものです。! わからないところは何回でも復習できるし、スキマ時間にも勉強できるのが強みなんです。
オンライン講座を使うと、時間や場所に縛られずに効率よく学習できます。 自分に合った講座を選ぶことが大切だよ。
模写コーディングやプロジェクト学習
コーディングを上達させるには、模写やプロジェクトを作るのが効果的です!
模写コーディングは、実際のWebサイトをそっくりそのまま再現する練習方法。
これによって、プロの書いたコードの流れや構造を理解できます。
また、プロジェクト学習では、自分で1つの作品を作ることで、実践的なスキルが身につきますよ。
ある調査によると、実際に手を動かして学ぶと記憶に残りやすいとも言われています。
模写とプロジェクト学習の違い
| 学習方法 | 内容 | メリット |
| 模写コーディング | 既存のサイトをそっくり再現する | コードの書き方やレイアウトを学べる |
| プロジェクト学習 | 自分で考えてWebサイトを作る | 実践的なスキルが身につく |
例えばスポーツも、プロのプレーを真似して練習すると上達が早いですよね?
コーディングも同じで、プロのサイトを真似しながら作ると、自然とスキルが身につきます。
模写で基礎を学び、プロジェクトで応用することで、実践的なコーディングスキルが身につきます。 どちらもバランスよく取り入れましょう。
まとめ：コーディングの基礎をしっかり身につけよう!
コーディングの基礎は、 「HTML・CSSの基本を理解すること」 から始まります。
次に、 「シンプルなWebページを作る」 ことで、学んだ知識を実践しながら身につけることが重要です。
さらに、 「模写コーディング」 を行うことで、実際のプロの書き方を学び、スキルを磨いていきましょう。
学習方法としては、以下の3つがおすすめです。
- 独学：無料の教材や書籍を活用してマイペースに進められる
- オンライン講座：動画で学びながら実践できるので、効率よく学習できる
- プロジェクト学習：実際にWebサイトを作りながら学ぶことで、即戦力が身につく
最初は難しく感じるかもしれませんが、 「基礎を固めることが、将来の成長につながる」 ことを忘れないでください。
コーディングは、学び続けることで確実にスキルが向上します。 今の一歩が、未来の大きな成長につながります。
まずは、手を動かして始めてみましょう!
