1. ターミナル開く
-
まず、MacやLinuxでは「ターミナル」、Windowsでは「コマンドプロンプト」または「PowerShell」を開きます。ターミナルは、コマンドを入力して操作するためのツールで、コードの実行やファイル操作などを行います。
-
画面に表示されるスクリーンショットのように、アプリケーションフォルダ（Macの場合）やスタートメニュー（Windowsの場合）からターミナルを起動します。
- 上記の画像は、Macの「ターミナル」を開いた際の画面です。
- WindowsでターミナルやPowerShellを使用する場合の画面例です。
2. 新規ファイル作成
次に、プロジェクトフォルダを作成して、必要なファイルを準備します。
-
作業ディレクトリに移動
作業を行うフォルダに移動します。以下のコマンドを実行して、
workspaceフォルダに移動します。cd workspace -
新しいプロジェクトフォルダを作成
新しいプロジェクトを保存するためのフォルダ
todo-app-v-2を作成します。mkdirコマンドでディレクトリを作成します。mkdir todo-app-v-2 -
HTMLファイルを作成
プロジェクトのメインHTMLファイルである
index.htmlを作成します。touchコマンドで空のファイルを作成できます。touch index.html -
JavaScriptファイルを作成
index.jsという名前のJavaScriptファイルを作成し、このファイルにプログラムのロジックを記述します。touch index.js -
CSSファイルを作成
index.cssというCSSファイルを作成して、スタイルシートとして利用します。Webページのデザインやレイアウトを指定するために使います。touch index.css
3. HTMLファイルに基本構造を追加
-
HTML構造の作成
index.htmlファイルに以下のコードを追加して、TODOリストアプリの基本的なHTML構造を作成します。このコードは、リスト表示の領域と、スタイルシートやJavaScriptファイルのリンクを設定しています。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TODO-List</title> <link rel="stylesheet" href="index.css"> <!-- CSSファイルをリンク --> </head> <body> <h1>TODO-List-v2</h1> <!-- タイトル部分 --> <div id="table"> <!-- タスクリストを表示するための領域 --> <h2>Current Tasks</h2> <ul class="task_list"></ul> <!-- タスクが表示されるリスト --> </div> <script src="index.js"></script> <!-- JavaScriptファイルをリンク --> </body> </html>-
<h1>: メインのタイトルとして「TODO-List-v2」を表示。 -
<ul class="task_list">: タスクをリスト形式で表示する領域を作成します。タスクの項目はJavaScriptを使って動的に追加します。
-
4. CSSファイルにスタイルを追加
次に、index.css ファイルに基本的なスタイルを追加して、ページの外観を整えます。
body, html {
font-family: 'Arial', sans-serif; /* フォントの設定 */
background-color: #f4f7f6; /* 背景色を淡いグレーに設定 */
color: #333; /* 文字色を濃いグレーに設定 */
margin: 0;
padding: 0;
display: flex;
justify-content: center; /* コンテンツを中央に配置 */
align-items: center; /* 垂直方向でも中央に配置 */
height: 100vh; /* ページ全体の高さを100%に設定 */
}
h1 {
text-align: center; /* タイトルを中央に配置 */
color: #4CAF50; /* タイトルの文字色を緑に設定 */
margin-bottom: 20px; /* 下にスペースを設定 */
}
-
body, htmlのスタイル:- ページ全体をセンタリングし、背景色を淡いグレー（
#f4f7f6）に、文字色を濃いグレー（#333）に設定しています。また、height: 100vhでページ全体をフルスクリーンに対応させています。
- ページ全体をセンタリングし、背景色を淡いグレー（
-
h1のスタイル:- タイトル（
TODO-List-v2）は、緑色（#4CAF50）にし、中央揃えにします。また、下に20pxのスペースを設け、見やすくしています。
- タイトル（
5. まとめ
これで、以下の3つのステップが完了しました：
- ターミナルで新しいプロジェクトフォルダと基本ファイル（HTML、CSS、JavaScript）を作成。
-
index.htmlに、TODOリストアプリの基本的なHTML構造を追加。 -
index.cssに、アプリの基本スタイルを設定し、見やすくしました。
次のステップとして、index.js にタスクの追加や削除などのロジックを記述して、TODOリストの機能を実装します。