読み込み中...
HTML/CSS入門：おしゃれなカフェの紹介ページを作ろう！
はじめに
この講座へようこそ！
Web制作の世界に、最初の大きな一歩を踏み出してみませんか？この講座では、プログラミングの経験がまったくない方でも、HTMLとCSSという2つの言語を使って、自分だけの素敵なカフェ紹介ページをゼロから作り上げる方法を学びます。
完成する頃には、Webページの仕組みがわかり、自分でデザインしたページを公開する楽しさを実感できるはずです。
学習目標
完成予定のページ
前提知識
むずかしい知識は一切不要です！「プログラミングって何？」という段階から、一緒に楽しく学んでいきましょう。
開発時間
約3時間（ご自身のペースで進められます）
第1章：準備をしよう！
1.1 HTMLとCSSってなんだろう？
Webページは、主にHTMLとCSSという2つの言語でできています。
- Webページの「骨格」を作る言語です。
- 「ここは見出し」「これは段落」「ここに画像を配置」といった、文章の構造や情報の意味を定義します。
- Webページの「見た目」をデザインする言語です。
- 文字の色や大きさを変えたり、背景に色をつけたり、要素の配置を調整したりします。
例えるなら、HTMLが「建物の構造（柱や壁）」で、CSSが「内装やインテリア」のようなものです。この2つを組み合わせることで、Webページは作られています。
1.2 開発環境の準備
Web制作を始めるのに、特別なソフトは必要ありません。以下の2つがあれば大丈夫です。
1. Webブラウザ: Google ChromeやSafariなど、普段お使いのものでOKです。
2. テキストエディタ: コードを書くためのソフトです。Windowsの「メモ帳」やMacの「テキストエディット」でも可能ですが、プログラミング用の無料エディタ Visual Studio Code (VSCode) を使うのがおすすめです。コードが色付けされて見やすくなったり、入力補助機能があったりして、とても便利です。
1.3 ファイルの準備
まず、作業用のフォルダをデスクトップなどのわかりやすい場所に作りましょう。フォルダ名は「cafe-site」など、好きな名前で構いません。
次に、そのフォルダの中に、以下の2つのファイルを作成します。
index.html （HTMLファイル）style.css （CSSファイル）これで準備は完了です！
第2章：HTMLでページの骨格を作ろう
2.1 HTMLの基本構造
まず、index.htmlに、すべてのHTMLファイルの基本となる「お決まりのコード」を書きましょう。
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Fuwafuwa Cafe</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10
11 <!-- ここにページの中身を書いていく -->
12
13</body>
14</html><!DOCTYPE html>: このファイルがHTML文書であることを宣言しています。<html>: すべてのHTML要素の親となる要素です。lang="ja"は、このページが日本語であることを示します。<head>: ページの設定情報を書く部分です。タイトルやCSSの読み込みなど、ブラウザには直接表示されない情報が入ります。<title>: ブラウザのタブに表示されるページのタイトルです。<link>: style.cssファイルを読み込んで、HTMLにCSSを適用させます。<body>: 実際にブラウザに表示される、ページの中身を書く部分です。2.2 ヘッダーを作ろう
ページの最も上にある部分、ヘッダーを作成します。ここには、お店のロゴとナビゲーションメニューを配置します。
<body>タグの中に、以下のコードを書いてみましょう。
1<header>
2 <h1><a href="#">Fuwafuwa Cafe</a></h1>
3 <nav>
4 <ul>
5 <li><a href="#">HOME</a></li>
6 <li><a href="#">MENU</a></li>
7 <li><a href="#">ACCESS</a></li>
8 </ul>
9 </nav>
10</header><header>: ヘッダー（ページ上部）であることを示すタグです。<h1>: 見出しを作るタグです。数字が小さいほど大きな見出しになります。<nav>: ナビゲーションメニューであることを示すタグです。<ul> と <li>: リストを作るためのタグです。ulがリスト全体を囲み、liが各リスト項目になります。<a>: リンクを作るタグです。href="#"の部分に、リンク先のURLを入れます。index.htmlをGoogle Chromeで開くと、以下のようになります。
続きを見るには
無料プレビューはここまでです。お疲れ様でした！
続きの講座では、以下の内容を学習していきます。
この講座を最後まで終えれば、HTMLとCSSの基礎がしっかりと身につき、自分だけのオリジナルページを公開できるようになります。ぜひ一緒に、Web制作の楽しさを体験しましょう！
HTML/CSS入門：おしゃれなカフェの紹介ページを作ろう！
はじめに
この講座へようこそ！
Web制作の世界に、最初の大きな一歩を踏み出してみませんか？この講座では、プログラミングの経験がまったくない方でも、HTMLとCSSという2つの言語を使って、自分だけの素敵なカフェ紹介ページをゼロから作り上げる方法を学びます。
完成する頃には、Webページの仕組みがわかり、自分でデザイン...
おすすめのコース
AIでWebアプリを開発して公開するまでの全体像
AIを使ってWebアプリを作り、実際にインターネットに公開するまでの全体像をわかりやすく解説します。企画→開発→デプロイの流れ、使うツールや技術の選び方、初心者が陥りやすい落とし穴まで、バイブコーディング時代の開発プロセスを俯瞰できるコラムです。
無料
Claude Codeってなに？導入から使い方まで完全ガイド
AIがコードを書いてくれる「Claude Code」を徹底解説。Claude Codeとは何か、何ができるのか、インストール方法から基本的な使い方まで、初心者にもわかりやすくステップバイステップで紹介します。バイブコーディングを始めたい方の最初の一歩に最適な無料講座です。
無料
Claude Codeを使う前に！Node.js導入ガイド
Claude CodeなどのAI開発ツールを使うにはNode.jsが必要です。この無料講座では、Node.jsとは何か、なぜ必要なのかをわかりやすく解説し、Windows・Macそれぞれのインストール手順をステップバイステップで紹介します。npmの基本的な使い方も学べます。
無料
JSONってなに？データ形式の基本をわかりやすく解説
JSONはWeb開発やAI連携で最も使われるデータ形式です。API通信、設定ファイル、データ保存など、あらゆる場面で登場します。この無料講座では、JSONの基本ルールから、PythonやJavaScriptでの読み書き方法、よくあるミスの対処法まで、初心者にもわかりやすく解説します。
無料