【CSSコード解説】ToDoリストアプリ作成（3/5）

WEBブラウザで動くToDoリストアプリのコード解説（CSS）
1. コード概要
CSSファイル (styles.css)の解説
まとめ
1. コードの特徴

WEBブラウザで動くToDoリストアプリのコード解説（CSS）

前回作成したWEBアプリのコード解説（CSS）です。

ToDoリストアプリ（1/5）
ToDoリストアプリ（2/5）
ToDoリストアプリ（3/5）
ToDoリストアプリ（4/5）
ToDoリストアプリ（5/5）

https://www.programming-make-and-learn.tech/todo-list-app-part3

WEBアプリのURL
GitHubのURL

GitHubのPagesで公開しているのでToDoリストアプリを使用できます。

ToDoリストアプリ

GitHubでソースコードを公開しています。

GitHub - make-and-learn/todo-app

Contribute to make-and-learn/todo-app development by creating an account on GitHub.

コード概要

ToDoリストアプリケーションのCSSスタイルシート
カスタムプロパティを使用したカラーテーマの定義
レスポンシブデザインに対応したレイアウト
フォーム、ボタン、タスクリスト、カレンダーのスタイリング
エラーメッセージやタスクの状態に応じたスタイル変更

CSSファイル (styles.css)の解説

カスタムプロパティ（変数）の定義

:root {
    --primary-color: #5cb85c;
    --primary-hover-color: #4cae4c;
    --secondary-color: #d9534f;
    --secondary-hover-color: #c9302c;
    --edit-color: #337ab7;
    --edit-hover-color: #286090;
    --background-color: #f4f4f4;
    --text-color: #333;
    --error-color: #d9534f;
    --date-button-color: #6c757d;
    --date-button-hover-color: #5a6268;
}

:root セレクタを使用して、グローバル変数を定義
各色に対してカスタムプロパティ（変数）を設定
色はすべて16進数で指定

このコードブロックでは、ウェブサイト全体で使用される色を定義しています。:root セレクタは、文書のルート要素（通常は <html> タグ）を指します。ここで定義された変数は、CSSファイル全体で使用できます。これにより、色の一貫性を保ち、後で簡単に色を変更できるようになります。例えば、--primary-color を変更するだけで、サイト全体の主要な色を変更できます。

リセットスタイル

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

すべての要素（*）に適用されるスタイル
box-sizing: border-box を設定
マージンとパディングをゼロにリセット

このコードは、ブラウザのデフォルトスタイルをリセットし、一貫したレイアウトを作成するための基礎を提供します。box-sizing: border-box は、要素の幅と高さの計算にパディングとボーダーを含めます。これにより、レイアウトの予測がしやすくなります。マージンとパディングをゼロにすることで、すべての要素が同じ開始点から始まり、一貫したスタイリングが可能になります。

ボディ要素のスタイル

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: var(--background-color);
    color: var(--text-color);
}

body 要素全体に適用されるスタイル
フォントファミリーを設定
行の高さを1.6に設定
背景色とテキスト色にカスタムプロパティを使用

このコードは、ウェブページの基本的な外観を設定します。font-family はテキストのフォントを指定し、line-height はテキストの行間を設定します。background-color と color には、先ほど定義したカスタムプロパティを使用しています。これにより、全体的な色調を簡単に変更できます。

コンテナのスタイル

.container {
    width: 90%;
    max-width: 500px;
    margin: 2rem auto;
    padding: 1rem;
}

.container クラスに適用されるスタイル
幅を90%に設定し、最大幅を500pxに制限
上下のマージンを2rem、左右のマージンをautoに設定
内側の余白（パディング）を1remに設定

このコードは、ページのメインコンテンツを中央に配置し、適切な幅を持たせるために使用されます。width: 90% と max-width: 500px の組み合わせにより、小さな画面では幅が90%になり、大きな画面では500pxを超えないようになります。margin: 2rem auto は、上下に2remの余白を作り、左右を自動的に中央揃えにします。これにより、レスポンシブなデザインが実現されます。

見出し1のスタイル

h1 {
    text-align: center;
    margin-bottom: 1rem;
}

h1 要素に適用されるスタイル
テキストを中央揃えに設定
下側のマージンを1remに設定

このコードは、ページの主要な見出し（h1）のスタイルを定義します。text-align: center によって見出しが中央に配置され、ページの視覚的なバランスが良くなります。margin-bottom: 1rem は、見出しの下に適度な空間を作り出し、次のコンテンツとの間に視覚的な区切りを設けます。

タスクフォームのスタイル

#task-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

#task-form IDを持つ要素に適用されるスタイル
フレックスボックスレイアウトを使用
子要素を縦方向に配置
子要素間の間隔を0.5remに設定
フォームの下側のマージンを2remに設定

このコードは、タスク入力フォームのレイアウトを定義します。display: flex と flex-direction: column の組み合わせにより、フォーム内の要素が縦に並びます。gap: 0.5rem は、フォーム内の各要素間に均等な間隔を設けます。margin-bottom: 2rem は、フォームと次のコンテンツ（タスクリスト）との間に十分な空間を確保します。

入力グループのスタイル

.input-group {
    display: flex;
    gap: 0.5rem;
}

.input-group クラスを持つ要素に適用されるスタイル
フレックスボックスレイアウトを使用
子要素間の間隔を0.5remに設定

このコードは、入力フィールドとボタンなどを横並びにするためのスタイルを定義します。display: flex により、子要素が横方向に配置されます。gap: 0.5rem は、これらの子要素間に適切な間隔を設けます。これにより、例えばテキスト入力フィールドと送信ボタンを並べて配置することができます。

タスク入力フィールドのスタイル

#task-input {
    flex-grow: 1;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#task-input IDを持つ要素（入力フィールド）に適用されるスタイル
flex-grow: 1 で利用可能なスペースを最大限に使用
内側の余白を0.5remに設定
フォントサイズを1remに設定
薄いグレーのボーダーを設定
角を4pxの半径で丸く

このコードは、タスク入力フィールドの外観を定義します。flex-grow: 1 により、入力フィールドが利用可能な幅いっぱいに広がります。パディングとフォントサイズの設定により、ユーザーが快適に入力できるようになります。ボーダーと角の丸みは、入力フィールドを視覚的に識別しやすくし、全体的なデザインの美しさを向上させます。

日付選択ボタンと送信ボタンの共通スタイル

#date-select-btn, button[type="submit"] {
    padding: 0.5rem;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

日付選択ボタンと送信ボタンに適用される共通スタイル
内側の余白を0.5remに設定
フォントサイズを1remに設定
ボーダーをなしに設定
角を4pxの半径で丸く
カーソルをポインターに変更
背景色の変更に0.3秒のトランジションを適用

このコードは、日付選択ボタンと送信ボタンの基本的な外観を定義します。パディングとフォントサイズにより、ボタンが十分なサイズになり、クリックしやすくなります。border: none と border-radius: 4px により、モダンでクリーンな外観が得られます。cursor: pointer は、ユーザーにこれがクリック可能な要素であることを視覚的に示します。transition プロパティは、ホバー時の背景色変更をスムーズにアニメーション化します。

日付選択ボタンのスタイル

#date-select-btn {
    background-color: var(--date-button-color);
    color: white;
}

#date-select-btn:hover {
    background-color: var(--date-button-hover-color);
}

日付選択ボタンの特定のスタイル
背景色と文字色を設定
ホバー時の背景色を変更

このコードは、日付選択ボタンの色を設定します。背景色と文字色にカスタムプロパティを使用することで、全体的な色調を簡単に調整できます。:hover 疑似クラスを使用して、ユーザーがマウスをボタン上に置いたときの外観を定義し、インタラクティブな感覚を与えています。

送信ボタンのスタイル

button[type="submit"] {
    background-color: var(--primary-color);
    color: white;
}

button[type="submit"]:hover {
    background-color: var(--primary-hover-color);
}

送信ボタンの特定のスタイル
背景色を主要な色（緑）に設定
文字色を白に設定
ホバー時の背景色を変更

このコードは、送信ボタンの色を設定します。主要な色（通常は緑色）を使用することで、ユーザーの注意を引き、アクションを促します。ホバー効果により、ボタンがインタラクティブであることを示し、ユーザーエクスペリエンスを向上させます。

エラーコンテナのスタイル

.error-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

エラーメッセージを表示するコンテナのスタイル
フレックスボックスレイアウトを使用
子要素を縦方向に配置
子要素間の間隔を0.25remに設定

このコードは、エラーメッセージを表示するための領域のレイアウトを定義します。flex-direction: column により、複数のエラーメッセージが存在する場合、それらが縦に積み重なって表示されます。gap: 0.25rem は、各エラーメッセージ間に適度な間隔を設け、読みやすさを向上させます。

エラーメッセージのスタイル

.error-message {
    color: var(--error-color);
    font-size: 0.875rem;
}

エラーメッセージテキストのスタイル
文字色をエラー用の色（通常は赤）に設定
フォントサイズを0.875remに設定

このコードは、個々のエラーメッセージの外観を定義します。エラー用の色（通常は赤）を使用することで、ユーザーの注意を引き、問題があることを明確に示します。フォントサイズを少し小さくすることで、エラーメッセージが目立ちつつも、全体的なデザインのバランスを崩さないようにしています。

選択された日付コンテナのスタイル

#selected-date-container {
    font-size: 0.875rem;
    color: var(--date-button-color);
}

選択された日付を表示するコンテナのスタイル
フォントサイズを0.875remに設定
文字色を日付ボタンの色に設定

このコードは、ユーザーが選択した日付を表示する領域のスタイルを定義します。小さめのフォントサイズと特定の色を使用することで、選択された日付が目立ちすぎないようにしつつ、視認性を確保しています。

タスクリストのスタイル

#task-list {
    list-style-type: none;
}

タスクリストのスタイル
リストマーカー（箇条書きの点）を非表示に設定

このコードは、タスクリストの基本的なスタイルを設定します。list-style-type: none により、デフォルトの箇条書きマーカーが削除され、クリーンな外観のリストが作成されます。

タスクアイテムのスタイル

.task-item {
    background-color: #fff;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

個々のタスクアイテムのスタイル
背景色を白に設定
下側のマージンを0.5remに設定
内側の余白を0.5remに設定
角を4pxの半径で丸く
フレックスボックスレイアウトを使用
子要素を垂直方向に中央揃え
子要素間の間隔を0.5remに設定

このコードは、各タスクアイテムの外観とレイアウトを定義します。白い背景と角の丸みにより、各タスクが視覚的に区別しやすくなります。フレックスボックスレイアウトを使用することで、タスクのテキストとアクションボタン（編集、削除など）を横並びに配置し、整理された外観を実現しています。

完了済みタスクのテキストスタイル

.task-item.completed .task-text {
    text-decoration: line-through;
    opacity: 0.6;
}

完了済みタスクのテキストに適用されるスタイル
テキストに取り消し線を追加
不透明度を0.6に設定（やや透明に）

このコードは、完了済みのタスクを視覚的に区別するためのスタイルを定義します。取り消し線と低い不透明度により、タスクが完了したことが一目で分かるようになります。

タスクテキストのスタイル

.task-text {
    flex-grow: 1;
    word-break: break-word;
    max-width: calc(100% - 120px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

タスクのテキスト部分のスタイル
利用可能なスペースを最大限に使用
長い単語を折り返す
最大幅を設定（全体から120pxを引いた幅）
テキストを1行に表示
はみ出た部分を隠す
はみ出た部分を省略記号で表示

このコードは、タスクのテキスト表示を最適化します。flex-grow: 1 でスペースを最大限利用しつつ、max-width で適切な幅を維持します。長いテキストは省略記号で表示されるため、レイアウトが崩れることを防ぎます。

タスクアクションのスタイル

.task-actions {
    display: flex;
    gap: 0.5rem;
}

タスクに対するアクション（編集、削除ボタンなど）のコンテナスタイル
フレックスボックスレイアウトを使用
子要素間の間隔を0.5remに設定

このコードは、タスクに対するアクションボタンを横並びに配置し、適切な間隔を設定します。

タスクアクションボタンの共通スタイル

.task-actions button {
    padding: 0.25rem 0.5rem;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

タスクアクションボタン（編集、削除など）の共通スタイル
パディング、文字色、ボーダー、カーソルスタイルを設定
フォントサイズを0.75remに設定
角を4pxの半径で丸く
背景色の変更に0.3秒のトランジションを適用

このコードは、タスクに対するアクションボタンの基本的な外観を定義します。小さめのサイズと丸みを帯びた角により、コンパクトでモダンな外観を実現しています。

編集ボタンと削除ボタンのスタイル

.edit-btn {
    background-color: var(--edit-color);
}

.edit-btn:hover {
    background-color: var(--edit-hover-color);
}

.delete-btn {
    background-color: var(--secondary-color);
}

.delete-btn:hover {
    background-color: var(--secondary-hover-color);
}

編集ボタンと削除ボタンの個別のスタイル
それぞれに異なる背景色を設定
ホバー時の背景色を変更

このコードは、編集ボタンと削除ボタンの色を個別に設定します。異なる色を使用することで、各ボタンの機能を視覚的に区別しやすくしています。ホバー効果により、ユーザーのインタラクションを促進します。

カスタムカレンダーのスタイル

.custom-calendar {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 1000;
}

カスタムカレンダーのスタイル
初期状態では非表示
絶対位置指定
背景色、ボーダー、ボックスシャドウを設定
z-indexを高く設定して他の要素の上に表示

このコードは、日付選択用のカスタムカレンダーの基本的なスタイルを定義します。position: absolute と高い z-index により、カレンダーが他の要素の上に正しく表示されます。

カレンダーヘッダーとグリッドのスタイル

.calendar-header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    padding: 10px;
}

カレンダーのヘッダーとグリッド部分のスタイル
ヘッダーはフレックスボックスで両端に寄せて配置
グリッドは7列のレイアウトを作成

このコードは、カレンダーの構造を定義します。ヘッダーには通常、前月・次月への移動ボタンが配置されます。グリッドは7列（曜日の数）で構成され、日付が整然と並びます。

レスポンシブデザイン

@media (max-width: 600px) {
    .container {
        width: 95%;
    }
}

画面幅が600px以下の場合に適用されるスタイル
コンテナの幅を95%に変更

このコードは、小さな画面（主にモバイルデバイス）向けのレスポンシブデザインを実現します。画面が小さくなった際に、コンテンツがより画面幅いっぱいに表示されるようになり、可読性と使いやすさが向上します。

以上で、提供されたCSSコードの全体的な解説が完了しました。このCSSは、モダンでユーザーフレンドリーなタスク管理アプリケーションのインターフェースを作成するために設計されています。

まとめ

コードの特徴

:rootセレクタを使用したグローバル変数の定義
フレックスボックスとグリッドレイアウトの活用
トランジション効果によるインタラクティブな要素
メディアクエリを用いたモバイル対応
アクセシビリティを考慮したコントラストと文字サイズ
BEMに似たクラス命名規則の採用
ホバー効果による視覚的フィードバック
エリプシス（text-overflow: ellipsis;）を使用したテキストの省略表示

このCSSコードは、モダンでユーザーフレンドリーなToDoリストアプリケーションのスタイリングを提供しています。カスタムプロパティを活用することで、一貫性のあるカラースキームを実現し、将来的な変更や拡張を容易にしています。

レスポンシブデザインの原則に従い、様々な画面サイズに適応するレイアウトを実装しています。フレックスボックスやグリッドレイアウトなどの最新のCSS技術を駆使し、複雑なレイアウトを効率的に構築しています。

また、トランジション効果やホバー状態のスタイリングにより、ユーザーインタラクションの質を高めています。アクセシビリティにも配慮し、適切なコントラストと文字サイズを維持しつつ、視覚的に魅力的なデザインを実現しています。

エラー表示やタスクの完了状態など、アプリケーションの機能的な側面もスタイリングによってサポートされています。全体として、このCSSコードは機能性と美しさを兼ね備え、ユーザー体験を向上させる効果的なスタイリングを提供しています。

未経験でもWEBスキルを取得したい方