プロジェクトフォルダの作り方

入門 | 10分 で読める | 2026.06.14

公式ドキュメント
実演初心者フォルダ構成プロジェクト管理

今回やること

この記事では、Web学習用の小さなプロジェクトフォルダを作ります。

プロジェクトは、関連するファイルを1つの親フォルダにまとめて管理します。

Step 1: 親フォルダを作る

まず学習用の親フォルダを作ります。

mkdir profile-site
cd profile-site

この profile-site が1つのプロジェクトです。

Step 2: 基本ファイルを作る

Webページの最小構成を作ります。

touch index.html styles.css main.js README.md

PowerShellでは次のように作れます。

New-Item index.html, styles.css, main.js, README.md

Step 3: assetsフォルダを作る

画像や素材をまとめるフォルダを作ります。

mkdir assets
mkdir assets/images

構成は次のようになります。

profile-site/
  index.html
  styles.css
  main.js
  README.md
  assets/
    images/

Step 4: HTMLからCSSとJSを読み込む

index.html にCSSとJSの読み込みを書きます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>プロフィール</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <h1>プロフィールサイト</h1>
    <script src="./main.js"></script>
  </body>
</html>

ブラウザで開き、見出しが表示されるか確認します。

Step 5: READMEに概要を書く

README.md に、何のプロジェクトかを書きます。

# プロフィールサイト

HTML、CSS、JavaScriptの基本練習として作成したプロフィールサイトです。

## 使用技術

- HTML
- CSS
- JavaScript

GitHubに上げると、READMEはリポジトリの説明として表示されます。

ファイル名のルール

ルール理由
半角英数字を使う環境差を減らす
スペースを避けるコマンド操作で扱いやすい
小文字でそろえる大文字小文字のミスを減らす
役割が分かる名前にする後から探しやすい

注意: My Site.html のようなスペース入りファイル名は、初心者のうちは避けます。コマンドやURLで扱いにくくなります。

よくあるエラー

困る状態よくある原因確認する場所
CSSが効かないhref のパス違いlink タグ
JSが動かないscript src のパス違いConsole
READMEが表示されないファイル名が違うREADME.md

次にやること

ブラウザとDevToolsで画面・Console・Networkを見る で、作ったページを調査する方法を確認します。

まとめ

プロジェクトフォルダは、1つの作品やアプリに関係するファイルをまとめる場所です。最初は index.html、styles.css、main.js、README.md、assets/images の構成から始めると整理しやすくなります。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR