Webページを作成したいものの、
・HTMLやCSS、JavaScriptの役割が分からない…。
・それぞれのコードの書き方が知りたい…。
という方も多いのではないでしょうか。そこでこの記事では、
・HTML・CSS・JavaScriptの役割や記述方法
・おすすめの学習方法
について具体例を交えながらご紹介します。
Webページの作成が初めての方でも、この記事を読めばHTML・CSS・JavaScriptの基本について理解できます。
＼文字より動画で学びたいあなたへ／
Udemyで講座を探す ＞INDEX
HTML・CSS・JavaScriptの役割の違い
HTML・CSS・JavaScript ではWebページを構築するうえで、HTMLでWebページのテキストなどの基礎をかため、CSSで文字の装飾やレイアウトなどデザイン部分を設定します。フォームなど動きのあるものはJavascriptで構築するといったそれぞれの役割があります。
HTMLは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」の略称で、Webページの構造を決める役割があります。HTMLのタグによって、見出しや段落、表、リンクといったWebページの文章が持つ機能を検索エンジンが把握できるようになります。
CSSは「カスケーディングスタイルシート（Cascading Style Sheets）」の略称です。文字の色や大きさ、背景、テキストや画像の配置といったWebページの見た目を設定する役割があります。
JavaScript「ジャバスクリプト」とは、Webサイト上で動的な機能を実現するためのプログラミング言語です。例えば、ボタンや申込みフォームの作成時にJavaScriptを使います。
HTML・CSS・JavaScriptのそれぞれについて詳しく知りたい方は、以下の記事も参考にしてください。
▶HTMLとは？初心者向けに基本構造からタグの使い方まで解説！
▶CSSとは？初心者向けにわかりやすく基本の書き方を解説！
▶JavaScriptとは？言語の特徴を初心者向けに解説！
＼文字より動画で学びたいあなたへ／
Udemyで講座を探す ＞HTML：Webページの構造を設定する
HTMLにはWebページ上に表示する各要素やページのレイアウトなどを指定するためのタグが複数用意されています。ここではHTMLの主なタグや基本的な書き方について解説します。
HTMLの主なタグ
Webページの制作でよく使われるHTMLのタグは以下の通りです。
| タグの種類 | 用途 |
|---|---|
| <html> | コードがHTMLファイルであることを示す |
| <head> | Webページの設定について記述する（タイトルや説明文など） |
| <meta> | Webページの設定などに関する情報をブラウザに伝える |
| <title> | ブラウザのタブに表示されるページタイトルを指定する |
| <body> | Webページとして実際に表示される部分を指定する |
| <h1> ～ <h6> | 文章の見出しを指定する |
| <p> | 文章の段落を指定する |
| <a> | 文章にリンクを設定する |
| <img> | 画像を表示する |
| <br> | 文章の途中で改行する |
| <div> | 複数の段落や文章などの要素をまとめる |
| <ul> | 箇条書きのリストを作る |
| <ol> | 番号付きリストを作る |
| <li> | リスト内に項目を追加する |
| <form> | 入力フォームを作る |
| <input> | 入力欄やボタンなどを作る |
これら以外にも、Webページの構造を指定するための様々なタグがあります。
HTMLの基本構造と書き方
HTMLはマークアップ言語（表示形式を指定するコンピュータ言語）の一種で、タグと呼ばれる記号付きの文字でテキストを囲うことでWebページの構造を表現します。1つのWebページを作成する際の基本構造は以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> ここにWebページの設定に関する内容を書く </head> <body> ここにWebページ（ブラウザ）で実際に表示される内容を書く </body> </html> |
最初にこのファイルがHTMLであることをブラウザに伝えるための宣言として、「<!DOCTYPE html>」と書きます。
次に「head」の開始タグ（<head>）と終了タグ（</head>）の間に、タイトルや説明文といったWebページの設定に関する内容を書きます。「head」内の内容はWebページに表示されません。
Webページにアクセスしたユーザーが実際に目にする文章や画像などの内容は「body」の開始タグ（<body>）と終了タグ（</body>）の間に記載します。
「head」と「body」に情報を追記したHTMLコードの例は以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>見出しと箇条書きのサンプル</title> </head> <body> <h1>学習メモ</h1> <p>今日はHTMLの基本を学びました。ポイントは以下の通りです。</p> <ul> <li>HTMLはタグで構造を表す</li> <li>見出しはh1～h6を使う</li> <li>箇条書きはulとliで作る</li> </ul> </body> </html> |
このコードをメモ帳やノートパッドなどのテキストエディタで入力し、「sample.html」として保存しましょう。ファイル形式を表す末尾の拡張子が「.html」であれば、ファイル名は自由に付けて構いません。
保存したHTMLファイルをGoogle ChromeやMicrosoft Edge、Safariなどのブラウザで開くと以下のように表示されます。
上記のソースコード内にある「html lang=”ja”」や「meta charset=”UTF-8″」は、プログラミング言語や文字コードを指定する情報です。このようにタグに情報を追記するための部分を「属性」や「値」と呼びます。
例えば「html」タグに「lang」属性として「”ja”」を指定すると、このHTMLファイルが日本語で書かれていることを示します。
また「meta」タグに「charset」属性として「”UTF-8″」を指定すると、文字コードが「UTF-8」に設定されます。
HTMLの各タグの詳細については、以下の記事もあわせて参考にしてください。
▶HTMLのdiv classとは？5分でわかる事例付き解説
▶HTML tableタグを初心者向けに解説&便利な知識5選
▶imgタグの使い方がHTML初心者でもわかる！3つのよくある疑問も解消しよう！
▶HTMLリンクタグの使い方が一目でわかる！3つの便利な知識も紹介
Web開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！
Node.js/React/MySQL/Bootstrap/Git/GitHub等ウェブ開発に必要な様々なスキルを沢山学ぼう！カフェのウェブサイト、フォトギャラリー、ポートフォリオサイト、天気情報アプリ等の開発に挑戦！
＼無料でプレビューをチェック！／
講座を見てみるCSS：Webページの見た目（デザイン）を設定する
CSSは、Webページの見た目を設定するコードです。CSSを活用してユーザーにとって見やすく分かりやすいWebページを作成することで、SEOの対策もおこなうことができます。
ここでは、CSSの主な種類や基本的な書き方について解説します。
CSSの主なプロパティ
CSSでは、「color」や「font-size」などのプロパティと呼ばれるコードを使って、Webページのデザインを調整できます。役割ごとの主なプロパティは以下の通りです。
【文字のデザインに関する主なプロパティ】
| プロパティ | 用途 |
|---|---|
| color | 文字の色を変える |
| font-size | 文字の大きさを変える |
| font-family | フォントの種類を指定する |
| font-weight | 文字の太さを指定する |
| line-height | 行の高さ（行間）を調整する |
| text-align | テキストの位置をそろえる |
【背景・色に関する主なプロパティ】
| プロパティ | 用途 |
|---|---|
| background-color | 背景の色を指定する |
| background-image | 背景に画像を表示する |
【余白・枠線に関する主なプロパティ】
| プロパティ | 用途 |
|---|---|
| margin | 要素の外側の余白を指定する |
| padding | 要素の内側の余白を指定する |
| font-family | フォントの種類を指定する |
| border | 枠線の太さ・色・種類を指定する |
| width | 要素の横幅を指定する |
| height | 要素の高さを指定する |
【レイアウトに関する主なプロパティ】
| プロパティ | 用途 |
|---|---|
| display | 要素の表示形式を指定する |
| position | 要素の配置方法を指定する |
| top / left / right / bottom | 要素を配置するときの位置を指定する |
CSSの基本構造と書き方
HTMLで書かれた文字や画像などのデザインをCSSで記述する方法には、以下の3種類があります。
・インライン形式：HTMLの中に直接CSSのプロパティを記述する
・ヘッダー埋め込み形式：head要素内にstyle要素を使ってCSSを一括で記述する
・外部ファイル参照：HTMLファイルとは別にCSSファイルを作成し、リンク要素として添付する
インライン形式でのCSSの書き方の例は以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>インラインCSSの例</title> </head> <body> <h1 style="color: blue; text-align: center;">こんにちは！</h1> <p style="font-size: 18px; color: green;"> この段落はインラインCSSで文字色を緑、サイズを18pxにしています。 </p> </body> </html> |
同様のCSSをヘッダーに埋め込む場合、以下のように書けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>ヘッダー埋め込み形式の例</title> <style> h1 { color: blue; text-align: center; } p { font-size: 18px; color: green; } </style> </head> <body> <h1>こんにちは！</h1> <p>この段落は内部CSSで文字色を緑、サイズを18pxにしています。</p> </body> </html> |
CSSを外部ファイルとして参照して読み込む場合、HTMLファイルとCSSファイルを別で作成しましょう。
CSSファイル（style.css）
|
1 2 3 4 5 6 7 8 9 10 |
h1 { color: blue; text-align: center; } p { font-size: 18px; color: green; } |
HTMLファイル（index.html）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>外部CSSの例</title> <!-- 外部CSSファイルを読み込む --> <link rel="stylesheet" href="style.css"> </head> <body> <h1>こんにちは！</h1> <p>この段落は外部CSSで文字色を緑、サイズを18pxにしています。</p> </body> </html> |
今回はCSSのファイル名を「style.css」としましたが、拡張子が「.css」であれば名前は任意に付けることが可能です。別のファイル名を付ける場合は、HTMLファイルで外部CSSファイルを読み込むための部分「href=”style.css”」のファイル名もあわせて変更しましょう。
CSSの詳しい書き方については、以下の記事も参考にしてください。
▶図解で簡単！CSSの書き方4つが初心者でも5分で理解できる！
▶CSS line-heightの書き方３つを初心者向けに図で解説！
▶CSS paddingが初心者でもわかる！＋αの知識も紹介
▶CSS floatプロパティの基礎をわかりやすく解説！CSS初心者必見
JavaScript：Webページの動作を制御する
JavaScriptの役割は、ボタンやフォームといったWebページの動作を制御することです。「JavaScript」とプログラミング言語の「Java」は名前が似ていますが、全くの別物のため混同しないようにしましょう。
JavaScriptのコードはブラウザ上で実行できるため、開発環境の準備が簡単です。
JavaScriptの特徴やフレームワークについて詳しく知りたい方は、以下の記事も参考にしてください。
▶JavaScriptとは？言語の特徴を初心者向けに解説！
▶JavaScriptフレームワークとは何か？最新おすすめ5選を比較
JavaScriptの基本構造と書き方
JavaScriptの書き方には、HTMLファイルに直接書き込む方法と、外部ファイルを参照する方法の2種類があります。
HTMLファイルに直接書き込む場合のサンプルコードは以下の通りです。このコードでは、ボタンをクリックすると表示される文字が変わるという動きをJavaScriptで実装しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>JavaScriptサンプル</title> <script> function changeText() { document.getElementById("message").innerText = "テキストが変更されました！"; } </script> </head> <body> <h1>JavaScriptでテキストを変更</h1> <p id="message">ここに表示される文字が変わります。</p> <button onclick="changeText()">文字を変える</button> </body> </html> |
この方法では、次のようなJavaScriptのコードを「head」タグ内に記載しています。
|
1 2 3 4 5 6 |
<script> function changeText() { document.getElementById("message").innerText = "テキストが変更されました！"; } </script> |
これは「message」というID属性が付いている要素を対象に、中身のテキストを変更するためのコードです。このとき「changeText()」という関数を作り、以下のボタンを表示するHTMLタグの中で「changeText()」を指定することで、上記で設定した作業を呼び出しています。
|
1 |
<button onclick="changeText()">文字を変える</button> |
同じ機能を持ったJavaScriptを外部ファイルとして参照する場合は、以下のようにHTMLファイルとJavaScriptファイルを別々に作成します。
JavaScriptファイル（script.js）
|
1 2 3 4 |
function changeText() { document.getElementById("message").innerText = "テキストが変更されました！"; } |
HTMLファイル（javascript_howto2.html）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>外部JavaScriptの例</title> <!-- 外部JavaScriptファイルを読み込む --> <script src="script.js" defer></script> </head> <body> <h1>JavaScriptでテキストを変更</h1> <p id="message">ここに表示される文字が変わります。</p> <button onclick="changeText()">文字を変える</button> </body> </html> |
JavaScriptファイルにテキストを変更するためのコードを書き、HTMLファイルの「head」内でそのJavaScriptファイルを読み込むことで、直接書き込んだ場合と同じ機能を実装できます。JavaScriptファイルは、拡張子が「.js」であれば任意の名前を付けることが可能です。
JavaScriptの構文について詳しく知りたい方は、以下の記事も参考にしてください。
▶JavaScriptのswitch〜caseの基礎が例で誰でも即わかる！
▶初心者必見！JavaScript if~elseが即わかる！andやorなどの論理演算子も紹介
▶JavaScriptのwhile文が誰でもわかる！初心者が知りたい情報満載！
▶簡単！JavaScript for文の基礎が即わかる！breakとcontinueの違いとは？
【実践編】HTML・CSS・JavaScriptの3つを使ってWebページを作成しよう
ここでは簡単な例として、押したボタンによってテキストの色が変わるWebページの作り方を解説します。
まずは、同じフォルダ内に以下の3つのファイルをメモ帳などのテキストエディタで作成してください。
HTMLファイル（index.html）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テキストの色を変えるページ</title> <link rel="stylesheet" href="style.css"> <script src="script.js" defer></script> </head> <body> <h1 id="message">この文字の色が変わります</h1> <button id="redBtn">赤にする</button> <button id="blueBtn">青にする</button> </body> </html> |
CSSファイル（style.css）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f9f9f9; } h1 { margin-bottom: 30px; } button { margin: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; } #redBtn { background-color: red; color: white; } #blueBtn { background-color: blue; color: white; } |
JavaScriptファイル（script.js）
|
1 2 3 4 5 6 7 8 9 10 |
const message = document.getElementById("message"); document.getElementById("redBtn").addEventListener("click", function() { message.style.color = "red"; }); document.getElementById("blueBtn").addEventListener("click", function() { message.style.color = "blue"; }); |
HTMLファイルの以下のコードでは、「h1」に「”message”」というID属性を付けています。ID属性とは、コード内の特定のタグに対して、目印となる名前を付けるためのものです。
|
1 |
<h1 id="message">この文字の色が変わります</h1> |
同様に、以下の部分では赤・青のボタンにそれぞれ「”redBtn”」「”blueBtn”」というID属性を付けています。
|
1 2 |
<button id="redBtn">赤にする</button> <button id="blueBtn">青にする</button> |
CSSファイルではHTMLファイル内の各要素の見た目を指定しています。例えば、以下の部分は「button」の要素に対して、周囲の余白や文字サイズ、ボタンにマウスを置いた時のカーソルの形などを指定するコードです。
|
1 2 3 4 5 6 7 |
button { margin: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; } |
また、以下の部分は「redBtn」というID属性に対して、背景色を赤、文字色を白にするコードです。このように、特定のID属性に対してスタイルを設定する場合は「#」を付けます。
|
1 2 3 4 5 |
#redBtn { background-color: red; color: white; } |
JavaScriptファイルの1行目にある以下のコードは、プログラミング用語で「変数」と呼ばれる、データを入れておく箱のようなものを用意するための記述です。このコードにより、「message」という変数に、「”message”」というIDが付いた要素が格納されます。
|
1 |
const message = document.getElementById("message"); |
今回の場合は、HTMLファイル内にある「<h1 id=”message”>」が、「message」という変数に保存される対象です。このように、変数にデータを入れておくことで、JavaScriptのプログラム上で自由にデータを扱えるようになります。
また、JavaScriptファイルの以下の部分は「”redBtn”」というID属性が付いている要素を見つけて、クリックされた時に「message」に格納されている文字の色を「”red”」、つまり赤色に変更するためのコードです。
|
1 2 3 4 |
document.getElementById("redBtn").addEventListener("click", function() { message.style.color = "red"; }); |
同様に「”blueBtn”」というID属性が付いているボタンをクリックすると、文字色が「”blue”」に変わります。
これらのファイルを作成し、Webページの本体となる「index.html」をブラウザで開いてみましょう。
このように、HTML・CSS・JavaScriptを使うとユーザーの操作に反応して内容が動的に変わるWebページの作成が可能です。
HTML・CSS・JavaScriptの学習方法
HTMLやCSS、JavaScriptについて学ぶ方法には、本や参考書、オンラインの学習サイトなどがあります。各学習方法の特徴やおすすめの教材は以下の通りです。
本や参考書で学習する
HTML・CSS・JavaScriptに関する初心者ユーザー向けの書籍は数多く出版されています。
例えば、『1冊ですべて身につくHTML & CSSとWebデザイン入門講座[第2版]』や『1冊ですべて身につくJavaScript入門講座』は、解説が丁寧なため初心者にもおすすめです。
ただし、書籍は内容が古くなりやすく、手を動かしながら学ぶのが難しいこともあります。
資格の取得を通じて知識高める
学習のモチベーションを保ち、学んだ知識が「どれだけ身についているか」を客観的に証明するのに役立つのが資格試験です。
資格取得を目標にすることで、学習範囲に偏りがなくなり、体系的に知識を身につけることができます。また、スキルを客観的に証明するのにも役立ちます。
HTMLに関するスキルを証明できる資格については、以下の記事を参考にしてください。
▶HTMLに関する資格とは？資格の内容や資格取得のメリットなどを解説！
オンラインの学習サイトで学習する
最新のコンテンツを実際の操作画面と照らし合わせながら学びたい人には、オンラインの学習サイトがおすすめです。
オンラインの学習サイトなら、HTMLやCSS、JavaScriptのコード例やブラウザでの挙動を画面上で確認できるため理解が深まります。また、モチベーションを維持しやすいこともオンラインの学習サイトの特徴です。
特にUdemyの動画講座なら、分かりやすい解説でHTML・CSS・JavaScriptのスキルを習得できます。目的別におすすめのUdemy講座を知りたい方は、以下の記事もあわせて参考にしてください。
▶駆け出しエンジニア必見！HTML/CSS・JavaScriptからAWSまで目的別プログラミング講座おすすめ5選
HTML・CSS・JavaScriptを勉強してWebページの基礎を理解しよう！
HTMLやCSS、JavaScriptは、Webページを作成するための言語です。HTMLはWebページの構造の作成、CSSは見た目の調整、JavaScriptは動作の制御とそれぞれ役割が異なります。
HTMLやCSS、JavaScriptを使った動的なWebページの開発について詳しく学びたい方には、以下の講座がおすすめです。
◆Web開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！
レビューの一部をご紹介
評価：★★★★★
コメント：理論も丁寧に教えていただけるので、分かる範囲でのアウトプットにも積極的になれる。とても良い教材です。
評価：★★★★★
コメント：分かりやすい内容でした。また、内容を定期的に更新されていて、講師の方の努力に感激しました。
HTML・CSS・JavaScriptの書き方を学び、思い通りのWebページを作成する力を身に付けましょう！
RANKING
RECOMMENDED COURSE
最新情報・キャンペーン情報発信中