ページの動作確認
ストーリー
Day 3の午後。HTMLとCSSが書けて、GitHubにもプッシュした。
「でも、ちゃんと動くか確認しないと」
月8で学んだ品質管理を思い出す。提出前の動作確認は必須だ。
ブラウザでページを開いて、一つずつチェックしていこう。
ミッション概要
作成したWebページが正しく動作するか確認してください。
達成条件
- ブラウザでページが正常に表示されることを確認した
- ナビゲーションリンクが動作することを確認した
- 外部リンクが正しく開くことを確認した
- 全5カテゴリ、10ツールが表示されていることを確認した
Part 1: 基本表示の確認
タスク 1-1: ブラウザでページ を開く
bash
cd ~/projects/internal-tools-page
# ブラウザで開く
open index.html # macOS
# xdg-open index.html # Linuxタスク 1-2: 基本表示チェックリスト
ページを目視で確認し、以下の項目をチェックしてください。
| # | チェック項目 | 確認方法 | OK? |
|---|---|---|---|
| 1 | ページが表示される | ブラウザで開く | [ ] |
| 2 | タイトルが「社内ツール紹介」と表示される | ヘッダーを確認 | [ ] |
| 3 | ナビゲーションが表示される | ヘッダー下のリンク一覧 | [ ] |
| 4 | ツールカードが表示される | メインコンテンツ | [ ] |
| 5 | フッターが表示される | ページ下部 | [ ] |
| 6 | CSSが適用されている | 色、レイアウトが効いている | [ ] |
Part 2: ナビゲーションの確認
タスク 2-1: ページ内リンクのテスト
各ナ ビゲーションリンクをクリックして、対応するセクションにスクロールするか確認します。
| # | ナビリンク | 期待する動作 | OK? |
|---|---|---|---|
| 1 | 開発ツール | #development セクションへスクロール | [ ] |
| 2 | コミュニケーション | #communication セクションへスクロール | [ ] |
| 3 | ドキュメント | #documentation セクションへスクロール | [ ] |
| 4 | デザイン | #design セクションへスクロール | [ ] |
| 5 | プロジェクト管理 | #project セクションへスクロール | [ ] |
ナビゲーションの href とセクションの id が一致しているか確認してください。
html
<!-- ナビゲーション -->
<a href="#development">開発ツール</a>
<!-- セクション -->
<section id="development">href="#development" と id="development" が一致している必要があります。
Part 3: 外部リンクの確認
タスク 3-1: ツールURLリンクのテスト
各ツールの「公式サイト」リンクをクリックして、正しいサイトが開くか確認します。
| # | ツール | 期待するURL | 新しいタブで開く | OK? |
|---|---|---|---|---|
| 1 | VS Code | https://code.visualstudio.com/ | Yes | [ ] |
| 2 | GitHub | https://github.com/ | Yes | [ ] |
| 3 | Docker | https://www.docker.com/ | Yes | [ ] |
| 4 | Slack | https://slack.com/ | Yes | [ ] |
| 5 | Google Workspace | https://workspace.google.com/ | Yes | [ ] |
| 6 | Zoom | https://zoom.us/ | Yes | [ ] |
| 7 | Notion | https://www.notion.so/ | Yes | [ ] |
| 8 | Confluence | https://www.atlassian.com/software/confluence | Yes | [ ] |
| 9 | Figma | https://www.figma.com/ | Yes | [ ] |
| 10 | Jira | https://www.atlassian.com/software/jira | Yes | [ ] |
外部リンクには target="_blank" を追加してください。
html
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
公式サイト
</a>rel="noopener noreferrer" はセキュリティのためのベストプラ クティスです。
Part 4: コンテンツの確認
タスク 4-1: ツール数の確認
各カテゴリのツール数を確認します。
| カテゴリ | 期待するツール数 | 実際の数 | OK? |
|---|---|---|---|
| 開発ツール | 3 | [ ] | |
| コミュニケーション | 3 | [ ] | |
| ドキュメント | 2 | [ ] | |
| デザイン | 1 | [ ] | |
| プロジェクト管理 | 1 | [ ] | |
| 合計 | 10 | [ ] |
タスク 4-2: ツール情報の確認
各ツールカードに必要な情報が含まれているか確認します。
| # | 確認項目 | OK? |
|---|---|---|
| 1 | ツール名が表示されている | [ ] |
| 2 | カテゴリが表示されている | [ ] |
| 3 | 説明文が表示されている | [ ] |
| 4 | 評価が表示されている | [ ] |
| 5 | URLリンクが表示されている | [ ] |
Part 5: レイアウトの確認
タスク 5-1: CSSレイアウトチェック
| # | チェック項目 | OK? |
|---|---|---|
| 1 | ヘッダーが画面上部に固定または表示されている | [ ] |
| 2 | ナビゲーションが横並びで表示され ている | [ ] |
| 3 | ツールカードが横並び（または適切なグリッド）で表示されている | [ ] |
| 4 | カード間に適切な余白がある | [ ] |
| 5 | 文字が読みやすいサイズである | [ ] |
| 6 | 色のコントラストが十分である | [ ] |
タスク 5-2: ホバーエフェクトの確認
| # | チェック項目 | OK? |
|---|---|---|
| 1 | ナビリンクにホバーすると色が変わる | [ ] |
| 2 | ツールカードにホバーすると影または色が変わる | [ ] |
| 3 | 外部リンクにホバーすると下線または色が変わる | [ ] |
Part 6: 問題の修正
問題が見つかった場合
発見した問題を以下の表に記録し、修正してください。
| # | 問題の内容 | 修正方法 | 修正完了 |
|---|---|---|---|
| 1 | [ ] | ||
| 2 | [ ] | ||
| 3 | [ ] |
タスク 6-1: 修正をコミット
問題を修正した場合：
bash
git add index.html style.css
git commit -m "動作確認に基づき修正を実施"
git pushPart 7: 最終確認
動作確認チェックリスト（総合）
全ての項目にチェックが入れば、ページの動作確認は完了です。
基本表示
- ページがブラウザで正常に表示される
- CSSが正しく適用されている
ナビゲーション
- 5つ全てのナビリンクが正しく動作する
外部リンク
- 10件全てのツールURLが正しく開く
- 新しいタブで開く
コンテンツ
- 5カテゴリ全てが表示されている
- 10ツール全てが表示されている
- 各ツールに必要な情報が含まれている
レイアウト
- レイアウトが崩れていない
- ホバーエフェクトが動作する
まとめ
| ポイント | 内容 |
|---|---|
| 基本表示 | ページがブラウザで正常に表示されるか |
| ナビゲーション | ページ内リンクが正しく動作するか |
| 外部リンク | ツールURLが正しいサイトを開くか |
| コンテンツ | 全5カテゴリ、10ツールが表示されているか |
| レイアウト | CSSが正しく適用されているか |
- 基本表示を確認した
- ナビゲーションを確認した
- 外部リンクを確認した
- コンテンツを確認した
- レイアウトを確認した
- 問題があれば修正した
次のステップへ
ページの動作確認お疲れさまでした。
次のセクションでは、Day 3のチェックポイント（クイズ）に挑戦します。 Webページ作成の内容を振り返りましょう。
推定所要時間: 30分