ウェブサイトの表示問題の修正

はじめに

このプロジェクトでは、ウェブサイトの表示問題を修正し、適切なスタイル付けとレイアウトを確認する方法を学びます。目的は、完成していないウェブサイトを取り上げ、期待される完成品のように見せることです。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

• HTML ファイルの問題を特定して修正する方法
• 正しいスタイルを適用するために CSS ファイルを更新する方法
• ウェブサイトが期待される幅とレイアウトで表示されるようにする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• HTML と CSS コードを分析してトラブルシューティングする
• ウェブページを適切に構造化してスタイル付けする技術を適用する
• ウェブ開発における細部に対する注意の重要性を示す

プロジェクト構造をセットアップする

このステップでは、プロジェクトをセットアップし、エディタでファイルを開きます。

1. エディタを開き、以下のファイルが表示されるはずです。index.html、style.css、および画像ファイルhtml5logo.png、css3-logo.png、nav-btn.png、およびevolution.png。
2. WebIDE の右下隅にあるGo Liveボタンをクリックして、プロジェクトを実行します。
3. VM の上部の「Web 8080」を開き、手動で更新するとページが表示されます。

ウェブサイトの表示を修正する

このステップでは、ページの HTML 構造を見て、そこからページの表示を混乱させている問題を見つけて修正します。

1. コードエディタでindex.htmlファイルを開きます。
2. index.htmlファイルを調べると、CSS ファイル用の<link>タグのファイル名が間違っていることに気付きます。href属性を更新して、正しいファイルstyle.cssを指すようにします。

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

3. HTML ファイルには以下の主要なセクションが含まれています。

   • <header>：ウェブサイトのタイトルとナビゲーションメニューが含まれています。
   • <div class="content">：ページの主要なコンテンツが含まれており、1 列セクション、3 列セクション、2 列セクションがあります。
   • <footer>：リンク付きのウェブサイトのフッターが含まれています。

4. index.htmlファイルの変更を保存します。

5. バグを修正した後、ブラウザでページを更新すると、以下のような結果が表示されます。

おめでとうございます！HTML と CSS ファイルを更新することで、ウェブサイトの表示を正常に修正しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。