「ホームページってどうやって作るんだろう？」って思ったことありますよね。
文字の色を変えたり、写真を入れたり、そんなページを自分で作れたら楽しいと思いませんか？
今回は、Webページ作りの基本となる「CSS」と「HTML」の使い方について、わかりやすく説明していきます。
このふたつの言葉が分かれば、自分だけのオリジナルWebページを作れるようになりますので、ぜひ最後まで読んで参考にしてください。
難しい専門用語は使わず、小学生でも読めるやさしい言葉で書いています。
CSSとHTMLの違いと役割を理解する
HTMLとは何か
HTMLは「エイチティーエムエル」と読み、Webページの土台となる言語です。
文章の構造や意味を伝えるために使われていて、見出しや段落、画像やリンクなどをページに配置します。
HTMLを使えば、どの部分がタイトルで、どこが本文かを正しくブラウザに伝えることができます。
HTMLの特徴をわかりやすくまとめると、以下のようになります。
- Webページの骨組みを作る
- 文字や画像の位置を決める
- タグと呼ばれる記号で囲んで使う
- リンクやボタンなどの操作も書ける
- 意味を伝えるために「セマンティックタグ」もある
HTMLは見た目を整えるためではなく、情報の整理や伝え方を決めるのが役割です。
つまり、ページの中身をどう伝えるかを考える時に使います。
CSSとは何か
CSSは「シーエスエス」と読み、HTMLで作ったWebページの見た目をデザインするための言語です。
文字の色を変えたり、画像のサイズを調整したり、ボタンの形をカスタマイズしたりすることができます。
CSSを使えば、ページがおしゃれで見やすくなるのです。
CSSの主な役割を簡単にまとめると、次のようになります。
- 文字の色や大きさを変えられる
- 背景の色や画像を設定できる
- 枠や影をつけて強調できる
- ボタンやリンクの形や動きを変えられる
- スマホやパソコンでの表示を調整できる
このように、CSSはページの装飾やレイアウトを担当する大切な役割を持っています。
見た目がきれいになると、読む人が内容を理解しやすくなります。
HTMLとCSSの役割の違い
HTMLとCSSはセットで使われますが、それぞれ役割がまったく違います。
HTMLは「何を書くか」、CSSは「どう見せるか」を決めるものです。
たとえば、HTMLで「これは見出しです」と書き、CSSで「赤い文字で大きく表示しよう」と指定します。
この違いを覚えるために、以下のようなイメージを持っておくと分かりやすいです。
- HTML＝骨組みや文章の意味（建物で言えば設計図）
- CSS＝色や形、配置（建物の外観やインテリア）
このように、HTMLとCSSは別々のことを担当していますが、一緒に使うことで初めて魅力的なWebページが完成します。
なぜHTMLとCSSを一緒に使うのか
HTMLとCSSを一緒に使う理由は、見やすく、使いやすいページを作るためです。
HTMLだけでもページは作れますが、見た目はとてもシンプルで、読む人にとって分かりにくい場合もあります。
CSSがあると、情報をより魅力的に、効果的に伝えることができます。
一緒に使うことで得られるメリットは次の通りです。
- 情報が整理され、読みやすくなる
- 見た目の統一感が出る
- 操作しやすいボタンやフォームが作れる
- スマホやタブレットでも見やすくなる
- デザインを変えるだけで印象が大きく変わる
このように、HTMLとCSSを組み合わせることがWeb制作の基本です。
どちらか一方では不十分なので、必ず両方の知識が必要になります。
Webページ制作における基本構成
Webページは、HTMLとCSSを組み合わせることで成り立っています。
まずHTMLで文章の構造を決め、その後でCSSでデザインを整えます。
この順番がとても大事です。
いきなりCSSから書いても、表示する内容がなければ意味がありません。
Webページを作るときの基本構成は以下の通りです。
- HTMLで見出し、段落、画像、リンクなどを書く
- CSSで色、文字サイズ、配置などを指定する
- HTMLとCSSをファイルで分けて管理する
- ブラウザで結果を確認する
- 必要があれば修正や調整をする
このような手順を守ることで、きれいで分かりやすいページを作ることができます。
HTMLとCSSをしっかり理解して使えば、だれでも素敵なWebページを作ることができます。
HTMLとCSSの連携方法
HTMLとCSSを連携させるには、いくつかの方法があります。
どの方法を使うかは、ページの目的や規模によって変わります。
ここでは3つの基本的な方法をご紹介します。
- HTML内に直接CSSを書く（インラインスタイル）
- HTMLのheadタグ内にstyleタグを使って書く（内部スタイルシート）
- CSSを別ファイルにしてlinkタグで読み込む（外部スタイルシート）
それぞれに特徴がありますが、多くのWebサイトでは外部スタイルシートが使われています。
これはCSSをHTMLから分けて管理できるため、修正や再利用がしやすくなるからです。
HTMLとCSSの連携ができるようになると、デザイン性の高いページを効率よく作れるようになります。
初めは簡単な連携方法から覚えて、少しずつステップアップしていきましょう。
HTMLの基本的な書き方と構造
HTML文書の基本構造
HTML文書には、必ず守るべき基本の形があります。
この構造を理解していないと、正しくWebページが表示されません。
HTMLの基本構造は、いくつかのタグを決まった順番で使うことで成り立っています。
HTMLの基本構造は以下のようなタグでできています。
<!DOCTYPE html>：このページはHTMLですと宣言する<html>：ページ全体を囲むタグ<head>：タイトルやスタイルの情報を入れる場所<body>：実際に画面に表示される内容を書く場所</html>：HTMLの終わりを示す
これらを正しい順番で書くことで、ブラウザはページの内容を正しく読み取り、表示することができます。
最初はこの基本の形を繰り返し書いて覚えることが大切です。
主要なHTMLタグの使い方
HTMLにはたくさんのタグがありますが、まずはよく使うタグを覚えることから始めましょう。
タグとは、<h1>や<p>などの記号で囲まれた命令のことです。
これを使ってページの中身を作ります。
よく使われる基本的なHTMLタグは以下の通りです。
<h1>～<h6>：見出しを作る（数字が小さいほど大きな見出し）<p>：段落の文章を表示する<a>：リンクを作る<img>：画像を表示する<br>：改行を入れる
これらのタグはどのWebページにもよく使われている基本中の基本です。
タグの意味と使い方を正しく覚えておくことで、HTMLをスムーズに書けるようになります。
見出し・段落・リンクの記述方法
文章を読みやすく整理するためには、見出しや段落、リンクを正しく使うことが大切です。
HTMLではそれぞれ専用のタグが用意されていて、簡単に書くことができます。
それぞれの使い方は以下の通りです。
- 見出しは
<h1>～<h6>を使う（例：<h2>タイトル</h2>） - 段落は
<p>を使って文を書く（例：<p>これは段落です。）
- リンクは
<a href="URL">リンクの文字</a>で作る
見出しで内容を分け、段落で説明し、リンクで他のページへ誘導することで、分かりやすくて使いやすいページになります。
画像やリストの挿入方法
HTMLでは画像やリストも簡単に表示することができます。
これにより、より見た目の豊かなページが作れるようになります。
画像やリストは情報を伝えるのにとても便利です。
画像とリストの基本的な書き方を紹介します。
- 画像は
<img src="画像のURL" alt="説明文">で表示する - 順番ありのリストは
<ol>タグを使う - 順番なしのリストは
<ul>タグを使う - リストの中身は
<li>で囲む
これらを使いこなせるようになると、写真入りのページや、箇条書きで説明するページが作れるようになります。
フォームやボタンの基本構文
フォームやボタンは、ユーザーから情報を入力してもらうときに使います。
例えば名前やメールアドレスを入力したり、送信ボタンを押してもらうような場面です。
HTMLではこれらもタグで簡単に作ることができます。
フォームとボタンの代表的な書き方は次の通りです。
- フォーム全体を
<form>タグで囲む - テキスト入力欄は
<input type="text"> - 送信ボタンは
<input type="submit">または<button> - ラベルは
<label>で入力欄の説明を書く - ドロップダウンは
<select>と<option>で作る
このようなフォーム要素を使うと、ユーザーとやりとりができるページを作ることができます。
お問い合わせページなどでよく使われる機能です。
セマンティックタグの重要性
セマンティックタグとは、「意味を持ったHTMLタグ」のことです。
たとえば、<header>はページの上の部分、<footer>は下の部分というように、場所や内容の意味を表すタグのことを指します。
これを使うと、ページがさらに読みやすくなります。
セマンティックタグの例をいくつか紹介します。
<header>：ページの上部に使う<nav>：ナビゲーションメニューを囲む<main>：そのページの中心となる内容<section>：意味のあるまとまりを作る<article>：記事やブログ投稿など独立した内容
これらを使うと、ブラウザだけでなく検索エンジンや読み上げソフトもページの構造を正しく理解できるようになります。
意味を伝えるHTMLを書くことは、とても大事なことです。
HTMLで注意すべき書き方のポイント
HTMLを書くときには、いくつかの基本的なルールや注意点があります。
これを守らないと、思った通りにページが表示されなかったり、検索エンジンで正しく評価されないこともあります。
注意しておきたいポイントは以下の通りです。
- タグは正しく開いて正しく閉じる
- 半角スペースや記号に注意する
- タグを入れ子にする順番を間違えない
- 必要な属性を省略しない（例：alt属性）
- 大文字小文字を統一する（基本は小文字）
これらを意識するだけで、ミスが減り、読みやすいHTMLが書けるようになります。
最初は何度も間違えるかもしれませんが、練習していけば自然と身につきます。
CSSの基本的な書き方と適用方法
CSSの記述場所と種類
CSSは、Webページの見た目を整えるために使います。
その書き方には3つの方法があり、使う場所や目的によって使い分けることが大切です。
正しい方法でCSSを書くと、ページの管理もしやすくなります。
CSSの記述方法は以下の3つがあります。
- インラインスタイル：HTMLタグの中に直接書く
- 内部スタイルシート：HTML内の
<style>タグの中に書く - 外部スタイルシート：別のCSSファイルに書いて
<link>で読み込む
それぞれの特徴を知っておくことで、場面に応じたスタイルの書き方が選べます。
初心者の方には、内部スタイルシートや外部スタイルシートから覚えるのがオススメです。
セレクタとプロパティの基本
CSSを書くときには、どの部分にどんなスタイルを当てるかをセレクタとプロパティで指定します。
これはCSSの中でもとても大切な考え方です。
セレクタとプロパティの基本の形は次のようになります。
セレクタ { プロパティ: 値; }
たとえば、段落の文字色を赤にしたい場合は、次のように書きます。
p { color: red; }
よく使うセレクタの例を紹介します。
- タグ名セレクタ（例：
h1やp） - クラスセレクタ（例：
.box） - IDセレクタ（例：
#main） - 複数指定（例：
h1, h2） - 子要素・隣接要素のセレクタ（例：
ul > liやh1 + p）
セレクタとプロパティの仕組みを理解することで、CSSでできることの幅がぐんと広がります。
カラー・文字・背景の指定方法
Webページでは、色や文字のスタイル、背景の見た目などをCSSで細かく指定できます。
これによって、読みやすくてきれいなページが作れるようになります。
まずは色や文字、背景のよく使うプロパティを覚えましょう。
color：文字の色を変えるfont-size：文字の大きさを指定するfont-family：使うフォントを決めるbackground-color：背景色をつけるbackground-image：背景に画像を入れる
これらを使って、たとえば文字を青くしたり、背景に画像を表示したりできます。
見た目が整うと、ページが読みやすくなって印象も良くなります。
レイアウトを整えるためのプロパティ
CSSには、要素の配置や大きさ、余白などを調整するためのプロパティがたくさんあります。
これを使うと、情報が整理された美しいレイアウトが作れます。
レイアウトのために使う主なプロパティは次の通りです。
width：横幅を指定height：高さを指定margin：外側の余白padding：内側の余白display：表示の方法（例：block, inline, flex）position：位置の指定
レイアウトが整うと、ページの情報が見やすくなり、ユーザーがストレスなく使えるページになります。
ボックスモデルの理解
CSSでは、すべての要素が「箱（ボックス）」として扱われます。
これをボックスモデルといいます。
この考え方を知ることで、レイアウトのズレや余白の扱い方がわかるようになります。
ボックスモデルは以下の4つの部分でできています。
- content：中身の部分
- padding：中身のまわりの余白
- border：枠線
- margin：外側の余白
それぞれのサイズを調整することで、ちょうどよい間隔や大きさに整えることができます。
見た目にこだわるときは、このボックスモデルの理解がとても大切です。
外部CSSファイルの読み込み方
外部CSSファイルを使うと、HTMLとCSSを別々に管理できて便利です。
これは大きなWebサイトや複数のページを作るときにとても役立ちます。
外部CSSファイルを読み込むには、<head>タグの中に<link>タグを入れます。
書き方は次の通りです。
<link rel="stylesheet" href="style.css">
このようにすると、HTMLに書かなくてもCSSが適用されるので、コードがスッキリして読みやすくなります。
CSSを書くときの注意点とコツ
CSSを書くときにも、気をつけるポイントがあります。
ちょっとしたミスでデザインが崩れたり、反映されなかったりすることがあるからです。
正しくCSSを書くコツを覚えておくと、作業がスムーズになります。
特に注意したい点は次の通りです。
- セレクタやプロパティ名のスペルミスに注意
- セミコロン「;」を忘れない
- CSSは上から順に読み込まれるので順番が大事
- 同じスタイルを何度も書かず、クラスを使ってまとめる
- 無理に装飾を詰め込まず、シンプルに整える
このような基本を守るだけで、CSSのトラブルを減らすことができ、デザインも整いやすくなります。
まずは一つひとつ丁寧に書くことから始めましょう。
HTMLとCSSを使った簡単なWebページ作成例
シンプルなページの設計手順
Webページを作るときは、いきなりコードを書くのではなく、まずどんなページにするかを考えることが大切です。
設計をきちんとすることで、あとからの修正が少なくなり、完成までの時間も短くなります。
ページを作る前に考えておくべきポイントは以下の通りです。
- どんな情報を伝えたいかを決める
- ページの見た目のイメージを考える
- どんな見出しや段落が必要かを整理する
- どこに画像やリンクを置くかを決める
- スマホやパソコンでも見やすくする
このように、まず内容とレイアウトのイメージをまとめておくことで、HTMLとCSSをスムーズに書き始められます。
HTMLで骨組みを作成する方法
設計ができたら、次はHTMLを使ってページの土台（骨組み）を作ります。
文字の配置や画像の場所、リンクの設定などをHTMLタグで書いていきます。
基本的なHTMLの書き方は以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これはサンプルの段落です。
</p>
<a href=”https://example.com”>リンクはこちら</a>
</body>
</html>
このようにHTMLだけでも文字やリンクを表示する基本の形を作ることができます。
最初は簡単な内容で試してみましょう。
CSSでデザインを整える手順
HTMLで土台ができたら、次はCSSを使って見た目を整えます。
色や文字サイズ、配置を調整することで、見た目がきれいで読みやすいページになります。
CSSでデザインを整える基本の手順は以下の通りです。
- まずは
<head>内に<style>タグを追加する - HTMLのタグに合わせてセレクタを書く
- 色やサイズ、余白などのプロパティを指定する
- 必要に応じてクラス名やIDを使う
たとえば、見出しの色を青くしたいときは次のように書きます。
h1 { color: blue; }
このようにCSSを使うと、自分好みのデザインが作れるようになります。
文字や画像のレイアウト調整
ページの中で文字や画像をバランスよく並べるには、CSSのレイアウト調整が必要です。
うまく調整することで、見る人にとって見やすく、わかりやすいページになります。
よく使うレイアウト調整のテクニックは以下の通りです。
text-align：文字の位置を調整marginやpadding：余白を調整display: flex;：横並びや縦並びを調整widthやheight：サイズを調整float：画像を文字の横に配置
レイアウトを整えると、ページの内容が自然に目に入りやすくなります。
少しずつプロパティを試して、配置の感覚を覚えていきましょう。
レスポンシブ対応の基本
パソコンだけでなくスマートフォンやタブレットでもきれいに見えるページを作るためには、レスポンシブ対応が必要です。
これは画面の幅に合わせて表示を変えるテクニックです。
レスポンシブにするための基本は次の通りです。
<meta name="viewport" content="width=device-width, initial-scale=1">をHTMLに追加- 横幅を固定せず
width: 100%;などで柔軟に指定 media queriesで画面幅ごとにCSSを切り替える- 画像には
max-width: 100%;をつける
このようにレスポンシブ対応をすると、どんな端末でも見やすいページになります。
スマホでの表示を確認しながら進めると失敗しにくいです。
完成したWebページの確認方法
Webページを作ったら、正しく表示されているかを確認することがとても大切です。
見た目やリンク、文字の位置などを細かくチェックしましょう。
確認のときに見るポイントは以下の通りです。
- ブラウザで正常に表示されるか
- スマホでも読みやすいか
- リンクが正しく動くか
- 余白や文字のサイズがバランスよいか
- CSSがちゃんと反映されているか
もしおかしいところがあれば、HTMLやCSSのコードをもう一度見直すことが大切です。
何度も確認することで、ページの完成度がどんどん高くなります。
初心者におすすめの練習方法
HTMLとCSSを学び始めたばかりの人は、少しずつステップを踏んで練習することが大切です。
いきなり難しいことをやろうとせず、シンプルなページからスタートしましょう。
おすすめの練習方法は次のようになります。
- 1ページだけのシンプルなサイトを作る
- 見出しと段落、画像を入れてみる
- 色や文字サイズを変更するCSSを書いてみる
- クラスを使って複数の要素にスタイルを適用する
- できたら自分でテーマを決めてページを作ってみる
このように、少しずつできることを増やしていけば、自然にWebページの作り方が身についていきます。
楽しみながら、たくさん練習してみましょう。
まとめ
HTMLとCSSの基本を学ぶことで、Webページを自分で作れるようになります。
今回の内容をふりかえって、特に大切なポイントをもう一度確認しておきましょう。
- HTMLはページの骨組みを作る言語
- CSSは見た目をデザインするための言語
- HTMLタグには決まった使い方がある
- CSSはセレクタとプロパティで書く
- 外部CSSでスタイルを整理すると便利
- レスポンシブ対応でスマホにも見やすくできる
- まずは簡単なページ作りから練習するとよい
これからは、自分でもHTMLとCSSを使ってオリジナルのWebページを作ってみましょう。
少しずつで大丈夫なので、楽しく練習を続けてください。
