レスポンシブなニュースウェブサイトのホームページを作成する

はじめに

このプロジェクトでは、LabEx Daily の新聞ウェブサイトのホームページを作成する方法を学びます。HTML 構造を設定し、CSS を使ってホームページのさまざまなセクションにスタイルを適用する責任があります。

👀 プレビュー

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

• LabEx Daily のホームページの HTML 構造を設定する方法
• ロゴやナビゲーションボタンを含むヘッダーセクションにスタイルを適用する方法
• 電話の画像とコンテンツエリアを含むバナーセクションにスタイルを適用する方法
• 「最新のニュース」と「もっと見る」のテキストを含むタブタイトルセクションにスタイルを適用する方法
• ニュースアイテムのレイアウトと「もっと見る」ボタンを含むニュースリストセクションにスタイルを適用する方法
• 左側と右側のセクションを含むフッターセクションにスタイルを適用する方法

🏆 成果

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

• ニュースウェブサイトのレスポンシブで視覚的に魅力的なホームページを作成する
• CSS を使ってウェブページのさまざまなセクションにスタイルを適用する
• CSS を使って要素を配置して整列させる
• 望ましいデザインを達成するためにさまざまな CSS プロパティを適用する

プロジェクト構造を設定する

このステップでは、プロジェクト構造を設定し、必要なファイルとフォルダを準備します。

この問題の初期コードは既に提供されています。コーディング環境を開き、ディレクトリ構造は以下の通りです。

├── css
│   └── style.css
├── images
│   ├── 1.jpg
│   ├── 2.jpg
│   ├── 3.jpg
│   ├── 4.jpg
│   ├── 5.jpg
│   ├── 6.jpg
│   ├── 7.jpg
│   ├── phone_sample.png
│   └── qr.png
└── index.html

ここで：

• css/style.css は、このチャレンジで完成させる必要のあるスタイルファイルです。
• images には、プロジェクトで使用する画像ファイルが含まれています。
• index.html は、LabEx Daily プロジェクトのホームページです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

LabEx Daily のホームページが以下のようになるように（ページ全体の幅は 1024px）、css/style.css スタイルファイルを完成させてください（既に与えられている基本的な css スタイルを変更しないでください）。

ヘッダーにスタイルを適用する

このステップでは、LabEx Daily のホームページのヘッダーセクションにスタイルを適用する方法を学びます。以下の手順に従ってこのステップを完了しましょう。

1. コードエディタで css/style.css ファイルを開きます。
2. /* TODO */ の後に以下の CSS ルールを追加して見出しスタイルを調整します。

/* header */
.headerbox {
  height: 78px;
  background-color: white;
}

.navbox {
  padding: 23px;
}

.navbox h1 {
  color: #0099f2;
  float: left;
}

.navright {
  float: right;
}

.on {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: #0099f2;
  background-color: #f0f9ff;
  line-height: 32px;
  text-align: center;
}

.on + a {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: black;
  line-height: 32px;
  text-align: center;
}

これらの CSS ルールは、LabEx Daily のロゴ、「APP ダウンロード」ボタン、およびそれらのホバーエフェクトを含むヘッダーにスタイルを適用します。

バナーにスタイルを適用する

このステップでは、LabEx Daily のホームページのバナーセクションにスタイルを適用する方法を学びます。以下の手順に従ってこのステップを完了しましょう。

1. コードエディタで css/style.css ファイルを開きます。
2. css/style.css ファイルに以下の CSS ルールを追加します。

/* banner */
.banner {
  position: relative;
  overflow: hidden;
  height: 460px;
  background-color: #008bed;
}

.container {
  width: 964px;
  height: 430px;
  position: absolute;
  bottom: 0px;
  padding: 30px 30px 0px 30px;
}

.container img {
  width: 409px;
  position: absolute;
  bottom: -15px;
}

.content {
  width: 43%;
  padding-top: 100px;
  float: right;
}

.content h2 {
  color: #fdfdfd;
  font-size: 40px;
  line-height: 40px;
  padding-bottom: 10px;
}

.info {
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  color: #99d1f8;
}

これらの CSS ルールは、背景色、電話の画像の配置、およびタイトルと説明を含むコンテンツエリアを含むバナーセクションにスタイルを適用します。

タブタイトルにスタイルを適用する

このステップでは、LabEx Daily のホームページのタブタイトルセクションにスタイルを適用する方法を学びます。以下の手順に従ってこのステップを完了しましょう。

1. コードエディタで css/style.css ファイルを開きます。
2. css/style.css ファイルに以下の CSS ルールを追加します。

/* tabtitle */
.tabtitle {
  width: 960px;
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  background-color: rgb(249, 249, 249);
}

.tabtitle h3 {
  line-height: 100px;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  float: left;
}

.tabtitle h4 {
  line-height: 100px;
  font-weight: 500;
  font-size: 24px;
  color: #cccccc;
  float: right;
}

これらの CSS ルールは、背景色、「コンテンツを閲覧する」と「最新のコンテンツ」のテキストの配置、およびそれぞれのスタイルを含むタブタイトルセクションにスタイルを適用します。

ニュース一覧にスタイルを適用する

このステップでは、LabEx Daily のホームページのニュースリストセクションにスタイルを適用する方法を学びます。以下の手順に従ってこのステップを完了しましょう。

1. コードエディタで css/style.css ファイルを開きます。
2. css/style.css ファイルに以下の CSS ルールを追加します。

/* list */
.list {
  position: relative;
  background-color: rgb(249, 249, 249);
  height: 1718px;
  padding-bottom: 30px;
}

.list ul {
  list-style: none;
}

.list li {
  margin-left: 30px;
  margin-bottom: 20px;
  padding-top: 20px;
  float: left;
  background-color: white;
}

.list img {
  display: block;
  margin-top: 20px;
  width: 260px;
  height: 260px;
  margin: auto;
}

.list a {
  display: block;
  width: 300px;
  height: 374px;
}

.list p {
  width: 260px;
  font-size: 14px;
  line-height: 25px;
  color: #333333;
  margin: auto;
}

.more {
  position: absolute;
  bottom: 30px;
  width: 960px;
  height: 62px;
  left: 32px;
  background-color: #e8eef2;
  text-align: center;
}

.more a {
  display: block;
  width: 100%;
  line-height: 62px;
  font-size: 20px;
  color: #59abdf;
}

これらの CSS ルールは、ニュースアイテムのレイアウト、画像のサイズと配置、テキストスタイル、および下部の「アプリでさらに見る！」ボタンを含むニュースリストセクションにスタイルを適用します。

フッターにスタイルを適用する

この最後のステップでは、LabEx Daily のホームページのフッターセクションにスタイルを適用する方法を学びます。以下の手順に従ってこのステップを完了しましょう。

1. コードエディタで css/style.css ファイルを開きます。
2. css/style.css ファイルに以下の CSS ルールを追加します。

/* footer */
.footer {
  height: 265px;
  background-color: #e5e5e5;
}

.footerBox {
  width: 960px;
  padding: 32px;
}

.footerL {
  width: 710px;
  height: 210px;
  float: left;
}

.footerL p {
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 15px;
  color: #000;
}

.footerR {
  float: right;
  text-align: center;
}

.footerR img {
  width: 141px;
  height: 152px;
}

これらの CSS ルールは、背景色、左右のセクションのレイアウト、テキストスタイル、および QR コード画像の配置を含むフッターセクションにスタイルを適用します。

おめでとうございます！これで LabEx Daily のホームページのスタイリングが完了しました。これで Web ブラウザで index.html ファイルを開いて最終結果を見ることができます。

まとめ

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