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

はじめに

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

👀 プレビュー

🎯 タスク

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

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

🏆 成果

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

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

Skills Graph

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

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

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でさらに多くの実験を行って練習してください。