Webサイトの作り方

HTMLとCSSを使った基礎的なWebサイト作成の解説です。

デモサイトを表示（新しいタブで開きます）

0. 事前準備

GitHubのアカウントを作成する

GitHub · Change is constant. GitHub keeps you ahead. · GitHub
（新しいタブで開きます）

メールアドレス、パスワード、アカウント名を入れて終わりです。簡単ですね。

アカウント名はこんな感じでプロジェクト名と共にサイトのURLになります。

VisualStudioCodeを入れる（PCのみ）

Download Visual Studio Code - Mac, Linux, Windows（新しいタブで開きます）

それぞれの環境に合ったものをダウンロードしてください。

ダウンロード後、VScodeを起動します。
画面左端のアクティビティバーにあるのアイコンを押し、以下の拡張機能を導入しましょう。

Live Server

…ローカル環境で実際の動作を確認することができるようになります。
　画面下部のステータスバーにあるから使用できます。

Japanese Language Pack for Visual Studio Code

… VScodeを日本語で使えるようになります。

補足：追加で導入すると便利な拡張機能

Auto Rename Tag

…タグを編集した際に対のタグを自動的に編集してくれるやつ

Code Spell Checker

…誤った記述をハイライトしてくれるやつ

indent-rainbow

…インデントが見やすくなるやつ

Path Intellisense

…参照しているファイルの場所が分かりやすくなるやつ

Prettier - Code formatter

…内容によって文字の色が変わるやつ

1. サイトの作成

ルートフォルダを作成する

デスクトップでもどこでも、お好みの場所で右クリックしフォルダを作成します。
デスクトップだと家族に見られそうでなんか心配！という場合は

C:\Users\（ユーザー名）

…にwebsitesフォルダを作成し、
その中にサイト名のフォルダ（mysiteとか）を作成するとよいかもしれません。

こんな感じでユーザー名と共にサイトのURLになります。

robots.txtを作成する

検索エンジンやデータ収集Botに対して巡回の許可/不許可を定めるやつ。

検索エンジンにも載せたくない、Botの巡回もされたくない、という場合は

User-agent: *
Disallow: /

…robots.txtというファイルを作成してこの2行をコピペでOK。

補足：検索エンジンに載せてもいいが？の場合

（ある程度基本的な構成ができるまで&ある程度セキュリティについて知見を得るまでは載せない方がいいという前提として、）例えばGoogle検索に出してやってもいいが？という感じなら

User-agent: Googlebot
Allow: *

…とか書いたりすればいいと思います。ちなみにこのコードを書くとGoogleのBotくんは「ほな…✋😎」って感じでサイトの"全て"を漁りだします。𝕏のrobots.txtを読解できるようになったら色々弄ればいいんじゃないですかね。

蛇足：AI対策がどうたら

「AI学習に関してはBlueskyの方が危ない」という声があったのはこれが理由。
bsky.app/robots.txt と検索すればわかるのですがBlueskyのrobots.txtは、

# By default, may crawl anything on this domain.
User-Agent: *
Allow: /

…という記述の通り基本的には全てのデータ収集Botに対して巡回を許可しています（2025/12/25時点）。一方でx.com/robots.txt を確認してみると、

# Every bot that might possibly read and respect this file

            # ========================================================

            User-agent: *

            Disallow: /

…という感じで、
研究目的だろうがAIだろうが𝕏の巡回や情報収集はさせないよ、Grokはするけど
と言っているわけです（2025/12/25時点）。

とはいえrobots.txtも100%確実なわけではないので、まあ。

index.htmlを作成する

いちばん最初に表示される玄関口のページ。


            <head>

            

                <!--このページなら「Webサイトの作り方」がここに入る -->

                <title>ここにタイトルを入力</title>

            

                <!-- 使用するcssファイルがある場所の相対リンクを記入する -->

                <link rel="stylesheet" href="（ファイル名）.css">

            

                <!-- 検索避けをしたい場合 -->

                <meta name="robots" content="noindex">

            

            </head>

            

            <body>

            

                <p>Hello, world!</p>

            

            </body>