HTMLとCSSを学び始める前に、「何が作れるの？」「2つだけでWebサイトは完成するの？」と気になる方も多いのではないでしょうか。
結論からいうと、HTMLとCSSがあれば、文章や画像を載せたWebページを作り、色・余白・配置を整えて、スマートフォンにも対応できます。プロフィールサイト、店舗案内、ランディングページ、ブログの画面などが具体例です。
一方、ログインやデータ保存など、利用者の操作に応じて本格的な処理をするにはJavaScriptやサーバー側の技術も必要です。この記事では、HTML・CSSでできることとできないことを、実際のコードと画像を使って初心者向けに解説します。
HTML・CSSでできることを一覧で確認
HTMLとCSSを組み合わせると、Webページの内容から見た目までを作れます。まずは、できることの全体像を確認しましょう。
| できること | 主に使う技術 | 具体例 |
|---|---|---|
| 文章や画像を配置する | HTML | 見出し、段落、画像、リンク、表を表示する |
| ページの構造を示す | HTML | ヘッダー、メインコンテンツ、フッターを分ける |
| 色や文字を整える | CSS | 文字色、背景色、フォント、行間を指定する |
| 余白や配置を調整する | CSS | カードを横に並べる、中央へ配置する |
| 画面幅に合わせる | HTML＋CSS | パソコンとスマートフォンでレイアウトを変える |
| 簡単な動きを付ける | CSS | ボタンの色を変える、要素をゆっくり動かす |
| 入力欄を用意する | HTML＋CSS | 問い合わせフォームの見た目を作る |
HTMLはページの内容と構造を担当し、CSSはその内容を読みやすくデザインします。どちらか一方ではなく、2つを組み合わせるのがWeb制作の基本です。
HTML・CSSで作れるものの具体例
プロフィールサイトやポートフォリオ
自己紹介、スキル、制作物、連絡先を1つのサイトへまとめられます。就職・転職活動で作品を見せるポートフォリオも、HTMLとCSSの練習題材に向いています。
会社や店舗の案内ページ
会社概要、営業時間、サービス内容、アクセス情報など、内容が頻繁に変わらないページを作れます。電話番号や地図へのリンクもHTMLで配置できます。
ランディングページ
商品やサービスを1ページで紹介するランディングページも作れます。HTMLで説明の順番を組み立て、CSSでボタン、料金表、よくある質問などを見やすく整えます。
ブログやニュースの記事画面
記事の見出し、本文、画像、引用、関連記事の表示を作れます。ただし、管理画面から記事を投稿・保存する仕組みには、WordPressのようなCMSやサーバー側の技術が必要です。
HTMLとCSSの役割の違い
HTMLとCSSは役割がはっきり分かれています。家にたとえると、HTMLは柱や部屋などの構造、CSSは壁紙、色、家具の配置などの見た目です。
HTMLは内容と構造を作る
HTMLは「HyperText Markup Language」の略で、Webページに載せる情報へ意味を付けるマークアップ言語です。見出しにはh1、段落にはp、リンクにはaというように、内容に合ったタグを使います。
<article>
<h1>はじめてのWeb制作</h1>
<p>HTMLとCSSを学習しています。</p>
<a href="#works">制作物を見る</a>
</article>ブラウザはタグを読み取り、どの文字が見出しで、どこが文章やリンクなのかを判断します。タグを適切に選ぶことは、検索エンジンや音声読み上げソフトへ内容を伝えるうえでも大切です。
CSSは見た目を整える
CSSは「Cascading Style Sheets」の略で、HTMLへ色、文字サイズ、余白、枠線、配置などを指定するスタイルシート言語です。
article {
max-width: 640px;
margin: 40px auto;
padding: 24px;
color: #1f2937;
background-color: #eff6ff;
border-radius: 12px;
}HTMLの文章を変えなくても、CSSを変更すればページ全体の雰囲気を変えられます。複数ページで同じCSSを読み込めば、デザインをまとめて管理することも可能です。
CSSの仕組みや基本構文を詳しく確認したい場合は、次の記事で初めての方にも分かるように解説しています。
なお、HTMLとCSSは一般的な意味でのプログラミング言語ではありません。理由を知りたい方は、次の記事も参考にしてください。
HTMLだけのページをCSSで見やすくする手順
ここからは、小さなプロフィールカードを作ります。「変更前の状態→追加するCSS→変更後の状態」の順で、2つの役割を体験してみましょう。
変更前のHTMLを用意する
index.htmlを作り、次のコードを書きます。link要素でstyle.cssを読み込んでいますが、まだCSSを書いていないため、ブラウザ標準の見た目で表示されます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>プロフィール</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="profile">
<p class="profile-label">PROFILE</p>
<h1>山田 太郎</h1>
<p>HTMLとCSSを学習中です。見やすいWebページ作りを練習しています。</p>
<a href="#works">制作物を見る</a>
</main>
</body>
</html>HTMLだけでも、見出し、文章、リンクは表示されます。ただし、カードの幅や背景色、ボタンらしい見た目はまだありません。
style.cssへデザインを追加する
同じフォルダへstyle.cssを作り、次のコードを追加します。余白、色、幅、角丸を指定し、リンクをボタンのように整えます。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
color: #1f2937;
background-color: #f4f7fb;
font-family: sans-serif;
}
.profile {
max-width: 640px;
margin: 40px auto;
padding: 32px;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}
.profile-label {
color: #0f766e;
font-weight: bold;
}
.profile h1 {
margin-top: 8px;
color: #0f172a;
}
.profile a {
display: inline-block;
margin-top: 12px;
padding: 12px 20px;
color: #ffffff;
background-color: #2563eb;
border-radius: 8px;
text-decoration: none;
}
.profile a:hover {
background-color: #1d4ed8;
}max-widthでカードが広がりすぎないようにし、margin: 40px autoで中央へ配置しています。:hoverは、マウスをリンクへ重ねたときだけ背景色を変える指定です。
変更後の表示を確認する
ブラウザを再読み込みすると、同じHTMLが白いカードとして表示され、リンクは青いボタンの見た目になります。HTMLが内容を保ったまま、CSSによって読みやすさと印象が変わることを確認できます。
CSSが反映されない場合は、ファイル名、保存場所、link要素のhrefを確認してください。HTMLからCSSを読み込む手順は、次の記事でファイル構成から解説しています。
CSSでできるレイアウト・スマホ対応・簡単な動き
FlexboxやGridで要素を配置できる
CSSのFlexboxやGridを使うと、カードを横に並べる、左右に領域を分ける、一定の間隔を空けるといったレイアウトを作れます。
以前のように固定の幅や高さだけで無理に配置するのではなく、内容や画面幅に合わせて伸び縮みする設計が基本です。
スマートフォンに合わせて表示を変えられる
メディアクエリーを使うと、画面幅に応じてCSSを切り替えられます。パソコンでは3列、スマートフォンでは1列にする、といったレスポンシブ対応が可能です。
.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 767px) {
.card-list {
grid-template-columns: 1fr;
}
}@mediaの中は、画面幅が767px以下のときに適用されます。横に並んでいたカードが縦1列になるため、小さな画面でも読みやすくなります。
CSSだけで簡単なアニメーションを作れる
transitionやanimationを使うと、色をなめらかに変える、要素を少し移動する、フェードインさせるなどの動きを付けられます。
ただし、クリック回数に応じて内容を変えるなど、利用者の操作を判断する複雑な動きにはJavaScriptを使うのが一般的です。
HTML・CSSだけではできないこと
HTMLとCSSはWebページの土台ですが、Webサービスのすべてを担当するわけではありません。目的によって、次の技術を組み合わせます。
| 実現したいこと | HTML・CSS以外に必要な技術の例 |
|---|---|
| ボタン操作でメニューや画面を切り替える | JavaScript |
| 入力内容を確認してエラーを表示する | JavaScript、サーバー側の処理 |
| 問い合わせ内容を送信・保存する | PHPなどのサーバー側言語、メールやデータベース |
| 会員登録やログインを行う | サーバー側言語、データベース、セキュリティ対策 |
| 管理画面から記事を投稿する | WordPressなどのCMS、PHP、データベース |
HTMLでフォームの入力欄を作り、CSSで見た目を整えるところまでは可能です。しかし、送信された内容をメールで届けたりデータベースへ保存したりする処理は、HTMLとCSSだけでは実行できません。
最初からすべてを学ぶ必要はありません。まずHTMLとCSSで1ページを完成させると、その後にJavaScriptやPHPを学んだときも、それぞれの役割を理解しやすくなります。
HTML・CSSを学ぶとできる仕事
HTMLとCSSの知識があると、デザイン見本をWebページとして組み立てるコーディングや、既存サイトの文章・色・余白・レイアウトの修正に役立ちます。
- ランディングページのコーディング
- 会社・店舗サイトのページ追加
- スマートフォン表示の調整
- 既存ページの文字、画像、色、余白の修正
- WordPressテーマの見た目の調整
- HTMLメールの作成
実務では、HTML・CSSに加えて、Gitなどの制作ツール、アクセシビリティ、表示速度、ブラウザごとの確認も必要です。WordPressの機能を変更する仕事では、PHPやWordPress固有の知識も求められます。
初心者がHTML・CSSを学ぶ順番
HTMLとCSSは、読むだけでなく実際にファイルを作ると理解しやすくなります。次の順番で小さなページを完成させてみてください。
- コードを書くエディタを用意する
index.htmlを作り、見出し・段落・画像・リンクを書くstyle.cssを作り、色・文字・余白を指定する- HTMLからCSSを読み込む
- ブラウザで表示し、変更結果を確認する
- 1ページ完成したら、見本を見ながら別のページを作る
エディタをまだ決めていない方は、初心者向けの選び方と導入手順を次の記事で確認できます。
書いたHTMLファイルは、特別なサーバーを用意しなくてもブラウザで確認できます。開き方が分からない場合は、次の記事を見ながら試してみましょう。
基本を書けるようになったら、練習サイトや教材を使って手を動かす段階です。無料で始められる教材も、次の記事で紹介しています。
HTML・CSSでできることのよくある疑問
HTMLとCSSだけでWebサイトを公開できますか？
はい。作成したHTML、CSS、画像をWebサーバーへ置けば、静的なWebサイトとして公開できます。独自ドメインを使う場合は、ドメインとサーバーの準備も必要です。
HTMLだけでもWebページは作れますか？
HTMLだけでも文章や画像を表示できます。ただし、ブラウザ標準の見た目になるため、読みやすい余白、色、配置、スマートフォン向けの調整にはCSSを組み合わせます。
CSSだけでWebページは作れますか？
基本的には作れません。CSSはHTMLなどの文書へ見た目を適用するための言語なので、先に内容と構造を持つHTMLが必要です。
HTML・CSSだけでアニメーションはできますか？
CSSを使えば、色の変化、拡大・縮小、移動、回転、フェードなどの視覚的なアニメーションを作れます。利用者の入力やデータに応じて処理を変える場合は、JavaScriptも使います。
まとめ
HTMLはWebページの内容と構造を作り、CSSは色、文字、余白、配置、スマートフォン表示などの見た目を整えます。2つを組み合わせれば、プロフィールサイト、店舗案内、ランディングページ、ブログ画面などを作れます。
ログイン、データ保存、複雑な操作にはJavaScriptやサーバー側の技術も必要です。まずは小さな1ページをHTMLとCSSで完成させ、ブラウザで変化を確認するところから始めてみてください。