【実践】JavaScriptでTODOアプリを作成しよう！ 第２回 CSSで「見た目」を整える

JavaScript学習ガイド

こんにちは、Reiです！

前回は、HTMLを使って
TODOアプリの 骨組み（構造） を作りました。

今回はその続きとして、
画面の見た目を整えていきます。


CSSで見た目を整える

ここからは、HTMLに対して
CSS（シーエスエス）を適用していきます。

CSSは、色・余白・配置・大きさ などを指定して、
ページの見た目をデザインするための言語です。

HTMLが「骨組み」だとすると、
CSSは「見た目（デザイン）」を担当する役割になります。


また、CSSはHTMLとは別のファイルに分けて管理することができます。

そのため今回は、

  • デザインを書く style.css
  • ページの構造を書く index.html

というように、役割ごとにファイルを分けて 進めていきます！


このように分けておくことで、

・見た目だけを後から調整しやすくなる
・コードが整理されて読みやすくなる

といったメリットがあります。

TODOアプリの見た目を順番に整えていくまえに、
まずはCSSファイルを読み込む準備から始めましょう！


準備：CSSファイルを読み込む設定

まずは、CSSを書くためのファイルを用意します。

先ほど作成した index.html と同じ場所に、
style.css という新しいファイルを作成してください。


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

プロジェクトフォルダ（ルート）
├ index.html（ルート直下）
└ style.css（ルート直下）


次に、このCSSファイルを
HTMLから読み込む設定を行います。

<head> タグの中に、次の1行を追加してください。

【編集ファイル：index.html】

<link rel="stylesheet" href="style.css" />

この設定を書くことで、
「このページのデザインは style.css に書かれています」ということをブラウザに伝えることができます！


1. 全体の基本設定

まずは、ページ全体の文字の見た目を整えます。

【編集ファイル：style.css】

body {
  color: #445566;
  font-family: sans-serif;
}

それぞれの指定には、次のような役割があります。

  • body
    ページ全体にスタイルを適用したいときは、このようにHTMLタグを指定して設定します。
    body はページ全体に影響し、div や p など他のタグにも同様に指定できます。

  • color
    文字の色を指定します。デフォルトは黒（#000）です。
    少しグレーに近い色に変更しておくことで 目が疲れにくい表示 にできます。

  • font-family
    文字のフォントを指定するプロパティです。
    sans-serif を指定すると、ブラウザ標準の 読みやすいゴシック体 が使われます。

ページ全体のフォントを最初に決めておくと、
各パーツごとに設定する必要がなくなり、統一感のあるデザインにすることができます！


2. 入力エリアの装飾

次に、TODOを入力するエリアを整えます。

入力欄とボタンが並ぶ部分を、
少し目立つエリアとしてデザインしていきます。

【編集ファイル：style.css】

input {
  border: 1px solid #d1dae3;
  border-radius: 4px;
  padding: 6px 12px;
}

.input-area {
  background-color: #e3f2fd;
  width: 420px;
  padding: 12px;
  margin: 10px;
  border-radius: 10px;
}

それぞれの指定には役割がありますが、よく使う指定に絞って確認していきます。

  • border-radius
    角の丸みを指定します。
    少し丸みをつけることで、柔らかい印象のデザイン にするできます。

  • padding
    内側の余白です。
    文字と枠線の間に余白を作ることで、読みやすさやクリックのしやすさ が向上します。

  • background-color
    背景色を指定します。
    操作するエリアに色をつけることで、「ここで操作する場所」だと分かりやすくすることができます。

入力欄と周辺の余白を整えることで、
ユーザーが「どこに何を入力すべきか」を直感的に判断できるレイアウトを構築できます。


この .input-area を適用するため、
HTML側にもクラスを追加しておきます。

【編集ファイル：index.html】

<div class="input-area">
  <input placeholder="TODOを入力">
  <button>追加</button>
</div>

このように <div> にクラス名を付けることで、
その中の要素を ひとつのグループとして装飾できるようになります。


3. ボタンのデザインと動き

次に、ボタンの見た目を整えていきます。

【編集ファイル：style.css】

button {
  background-color: #64b5f6;
  color: #fff;
  border-radius: 6px;
  border: none;
  padding: 5px 14px;
  margin: 0 4px;
  transition: 0.3s;
}

button:hover {
  background-color: #2196f3;
  cursor: pointer;
}

ここでも、よく使う指定に絞って確認していきます。

  • transition
    色の変化にかかる時間を指定します。
    これにより、色がパッと変わるのではなく滑らかに変化するアニメーションをつけられます。

  • :hover
    マウスカーソルが乗ったときの状態です。
    少し色を濃くしたり、薄くすることで、ボタンが反応していることをユーザーに伝えられます。

  • cursor: pointer
    マウスカーソルを指の形に変更します。
    クリックできる場所だと分かりやすくなり、操作ミスを防ぐ効果があります。

「通常時のデザイン」と「マウスを乗せた時の動き」をセットで設定することで、
ユーザーは「今、自分はこのボタンを操作しようとしている」という感覚を正しく得ることができます。


4. 未完了・完了エリアの装飾

次に、TODOが並ぶエリアを整えます。

未完了と完了の2つのエリアを
大きな箱として分かりやすく表示します。

【編集ファイル：style.css】

.incomplete-area {
  width: 420px;
  min-height: 240px;
  padding: 12px;
  margin: 10px;
  border: 3px solid #bbdefb;
  border-radius: 12px;
}

.complete-area {
  width: 420px;
  min-height: 240px;
  padding: 12px;
  margin: 10px;
  border: 3px solid #bbdefb;
  border-radius: 12px;
  background-color: #f0f4f8;
}

.title {
  margin-top: 0;
  text-align: center;
  font-weight: bold;
  color: #1e88e5;
}

よく使う指定に絞って確認しましょう。

  • min-height
    最小の高さを指定します。
    TODOがまだ無い状態でも一定のスペースを確保することができます。

  • border
    枠線を指定するプロパティです。
    枠線をつけることで、エリアの区切りが視覚的に分かりやすくなります。

  • text-align
    文字の揃え方を指定するプロパティです。
    center を指定することで、タイトルが中央に配置されます。

  • font-weight
    文字の太さを指定します。
    bold を指定すると、タイトルが太字で表示されます。

エリアごとに背景色や枠線を変えておくと、

  • 未完了のTODO
  • 完了したTODO

を 見た目だけで区別しやすくなります。

また、タイトルを中央に配置し、文字を少し強調することで、
「未完了」と「完了」のエリアが視覚的に分かりやすくなります。


エリアごとにスタイルを適用するため、
HTML側にもクラス名を追加しておきます。

【編集ファイル：index.html】 

<div class="incomplete-area">
  <p class="title">未完了のTODO</p>
  <ul>
    <li>
      <p>TODOです</p>
      <button>完了</button>
      <button>削除</button>
    </li>
  </ul>
</div>

<div class="complete-area">
  <p class="title">完了のTODO</p>
  <ul>
    <li>
      <p>完了したTODO</p>
    </li>
  </ul>
</div>

このようにエリアごとにクラス名を付けておくと、
CSSで未完了と完了のエリアを 別々のデザインに調整できるようになります。


5. リスト内部のレイアウト

最後に、TODOの1行を整えます。
テキストとボタンを横一列に並べるレイアウトを作ります。

【編集ファイル：style.css】

.list-row {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed #d1dae3;
  margin-bottom: 8px;
}

.todo-item {
  margin: 0 10px 0 0;
  flex-grow: 1;
}

よく使う指定に絞って確認しましょう！

  • display: flex
    要素を横並びにするためのレイアウトです。

  • align-items: center
    高さの違う要素を縦方向の中央に揃えることができます。

  • flex-grow: 1
    残りのスペースを使う指定です。

これにより、
TODOの文章が広がり、
ボタンが右端に配置されます。

このようにレイアウトのルールを決めておくと、
JavaScriptでTODOが追加されたときも
自動的に整った表示になります。


TODOの1行（<li>）とその中のテキスト（<p>）に、横並び用のクラス名を追加します。

【編集ファイル：index.html】

<div class="incomplete-area">
  <p class="title">未完了のTODO</p>
  <ul>
    <li class="list-row">
      <p class="todo-item">TODOです</p>
      <button>完了</button>
      <button>削除</button>
    </li>
  </ul>
</div>

<div class="complete-area">
  <p class="title">完了のTODO</p>
  <ul>
    <li class="list-row">
      <p class="todo-item">完了したTODO</p>
    </li>
  </ul>
</div>

リストの項目にクラス名を指定することで、TODOが増えた際もすべての行に対して一括で「横並び」のルールを適用させることができます。


最終的なファイルの状態

最終的に、次のような形になっていればOKです。

  • index.html
    　ページの構造と、CSSの読み込み設定
  • style.css
    　各パーツの見た目を定義するコード

このように、

  • HTML → 構造
  • CSS → 見た目

という形で役割を分けておくと、
あとから修正もしやすくなります。

【完成ファイル：index.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>TODOアプリ（JS）</title>
    <link rel="stylesheet" href="style.css" />
  </head>
<body>
    <div class="input-area">
      <input placeholder="TODOを入力">
      <button>追加</button>
    </div>

    <div class="incomplete-area">
      <p class="title">未完了のTODO</p>
      <ul>
        <li class="list-row">
          <p class="todo-item">TODOです</p>
          <button>完了</button>
          <button>削除</button>
        </li>
      </ul>
    </div>

    <div class="complete-area">
      <p class="title">完了のTODO</p>
      <ul>
        <li class="list-row">
          <p class="todo-item">完了したTODO</p>
        </li>
      </ul>
    </div>
  </body>
</html>

【完成ファイル：style.css】

body {
  color: #445566;
  font-family: sans-serif;
}

input {
  border: 1px solid #d1dae3;
  border-radius: 4px;
  padding: 6px 12px;
}

.input-area {
  background-color: #e3f2fd;
  width: 420px;
  padding: 12px;
  margin: 10px;
  border-radius: 10px;
}

button {
  background-color: #64b5f6;
  color: #fff;
  border-radius: 6px;
  border: none;
  padding: 5px 14px;
  margin: 0 4px;
  transition: 0.3s;
}

button:hover {
  background-color: #2196f3;
  cursor: pointer;
}

.incomplete-area {
  width: 420px;
  min-height: 240px;
  padding: 12px;
  margin: 10px;
  border: 3px solid #bbdefb;
  border-radius: 12px;
}

.complete-area {
  width: 420px;
  min-height: 240px;
  padding: 12px;
  margin: 10px;
  border: 3px solid #bbdefb;
  border-radius: 12px;
  background-color: #f0f4f8;
}

.title {
  margin-top: 0;
  text-align: center;
  font-weight: bold;
  color: #1e88e5;
}

.list-row {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed #d1dae3;
  margin-bottom: 8px;
}

.todo-item {
  margin: 0 10px 0 0;
  flex-grow: 1;
}

今回のまとめ

今回は、CSSを使って
TODOアプリの 見た目（レイアウト） を整えました。

＼＼　今回のポイント　／／

・ link タグで外部CSSファイルを読み込む
・ div ごとに背景色や枠線を設定してエリアを分ける
・ display: flex を使って要素をきれいに横並びにする
・ hover 設定で操作に対する視覚的な反応を作る


見た目が整ったことで、
「どのエリアに」「どの要素を追加するのか」

が分かりやすくなりました。

次はいよいよ、
JavaScriptを使ってアプリに動きを付けていきます。

TODOを追加したり削除したりできる
本格的な動きを作っていきましょう！

コメント

タイトルとURLをコピーしました