1. なぜHTMLでサイトを作るの？
ウェブ開発の魅力的な世界へようこそ！今日はシンプルな静的HTMLサイトを作成し、前回の講義でセットアップしたウェブサーバーにアップロードします。たとえ今までHTMLコードを書いたことがなくても心配しないでね – すべて超わかりやすいよ。ここでの目標はHTMLの基本を理解するだけでなく、ウェブサーバーを使って自分のサイトを世界に公開する方法を学ぶことだよ。
じゃあ次のステップに進もうか – 自分だけのHTMLサイトを作って、ウェブサーバーで表示できるよう設定しよう。ウェブ空間を攻略する準備はできてる？それじゃ始めよう！
HTML (HyperText Markup Language) は、すべてのウェブページの基盤となるものだよ。HTMLはサイトの構造と内容を司るんだ。標準的なHTMLでは、見出し、テキスト、画像、リンク、さらにテーブルまで記述できるんだよ。学びやすいけど、どんなサイトにも基盤となれるほど強力なんだ。
現実の世界では、静的HTMLページを扱うスキルは色々な場面で役に立つよ:
- ウェブアプリケーションのプロトタイプを迅速に作成する。
- ドキュメント用の静的ページを作成してテストする。
- サーバーアプリケーション向けの基本的なインターフェースを準備する。
それに、HTMLはウェブページ形式の履歴書を作るのにも便利だよ（そうそう、リクルーターたちはそれを好むことがあるよ）。そして、プログラマーとして、HTMLの基本を知っておくことは必要不可欠だよ。
2. ステップ1. HTMLの基本: 最初のページを作ろう
プログラミングはLEGOみたいなもんだよね：年齢問わず楽しめるお気に入りの活動だ。まずは小さな「ブロック」から始めよう–最初のウェブページだ。
最小限のHTMLドキュメントの例
index.htmlという名前でファイルをどんなテキストエディタ（例えば、nano、vim、もしくはちょっとグラフィカルな感じがいいならgeditでもOK）で作成し、次のコードを書こう：
<!DOCTYPE html>
<html>
<head>
<title>私の最初のサイト</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これは私の最初のHTMLウェブページです。</p>
</body>
</html>コードの説明
<!DOCTYPE html>– ブラウザにHTML5を使っていると教える。<html>– ドキュメント全体を開く。このタグ内にページのすべての内容が含まれる。<head>– サイトのメタ情報（例えばページのタイトルやスタイル・スクリプトのリンクなど）のセクション。<title>– ブラウザのタブに表示されるページのタイトル。<body>– メインセクションで、目に見えるコンテンツをすべて配置する。<h1>– ページの第一レベルの見出し（数字が小さいほど大きな見出し）。<p>– テキストの段落。
たったの7行だけど、これが君のサイトの基盤になるぞ！
3. ステップ 2. HTMLサイトをサーバーに配置する
さて、ページが完成したので、世界に見せる時がきたね。そのために私たちのWebサーバーを使うよ。
サイトフォルダの準備
サイトのファイルを保存するためのディレクトリを作成しよう。例えば、仮想ホストのexample.comドメインにサイトを置きたい場合は、以下を実行しよう:
sudo mkdir -p /var/www/example.com
次に、index.htmlファイルをそのフォルダに移動しよう:
sudo cp index.html /var/www/example.com/
ここからが本当の魔法の始まりだね - ファイルが動作する準備ができたよ。
4. ステップ3. サイトを提供するためのWebサーバーの設定
Nginxの設定
仮想ホストの設定ファイルを開いてください:
sudo nano /etc/nginx/sites-available/example.com次の設定を挿入してください:
server { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; } }仮想ホストを有効にしてサーバーを再起動してください:
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx
Apacheの設定
仮想ホストの設定ファイルを開いてください:
sudo nano /etc/apache2/sites-available/example.com.conf次の設定を挿入してください:
<VirtualHost *:80> ServerName example.com DocumentRoot /var/www/example.com <Directory /var/www/example.com> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>仮想ホストを有効にしてサーバーを再起動してください:
sudo a2ensite example.com.conf sudo systemctl restart apache2
サイトの確認
さて、ブラウザを開いてhttp://example.com（またはサーバーのIPアドレス）を入力し、結果を楽しんでください。素敵な「こんにちは、世界！」が見えたら、おめでとうございます。すべてが正しく動作しています！
5. ステップ 4. サイトをデザインする
静的なものも悪くないけど、少しCSSを追加すればもっと良くなるよね。少しデザインを追加しよう。
/var/www/example.com/フォルダに新しいファイルstyle.cssを追加してみてね:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #ff5722;
}次に、あなたのindex.htmlを更新してCSSへのリンクを追加しよう:
<!DOCTYPE html>
<html>
<head>
<title>私の最初のサイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これはHTMLで作った私の最初のウェブページです。</p>
</body>
</html>ページをリロードすると、スタイルが少し変更されたことがわかるよ。これであなたのサイトが少し可愛くなったね！
6. よくある問題とその解決方法
ウェブサイトの作業中にいくつかの問題に遭遇する可能性があるけど、心配しなくて大丈夫！ちゃんと対処法を準備しておいたよ：
"403 Forbidden"エラー. サイトフォルダの権限を確認してみて。以下を使おう：
sudo chmod -R 755 /var/www/example.com"404 Not Found"エラー. サイトファイルが正しいフォルダ内にあって、名前が正しいか確認してね。
サイトが表示されない. Webサーバーのサービスが起動しているか確認しよう：
sudo systemctl status nginx sudo systemctl status apache2
これで、あなたのサイトはアドレスを知っている全ての人がアクセスできるようになったよ。ワクワクしない？次の講義ではもっと多くのことを学ぶよ：セキュリティのためのHTTPSを追加したり、サーバー設定を管理したりする方法ね。
GO TO FULL VERSION