ニュース Web サイトのホームページを構築する-CSSチュートリアル-php.cn

Build a News Website HomePage

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるニュースホームページウェブサイトを共有できることを嬉しく思います。このプロジェクトは、最新の見出しや記事を紹介するクリーンで機能的なニュース Web サイトを構築したい人に最適です。これは、ユーザーにプロフェッショナルな Web エクスペリエンスを提供しながら、HTML、CSS、JavaScript を使用したフロントエンド開発スキルを向上させる優れた方法です。

プロジェクト概要

ニュースホームページ Web サイト は、最新のニュース記事とヘッドラインを整理されたレイアウトで表示するように設計された Web アプリケーションです。最新の応答性の高いデザインにより、ユーザーは最新ニュース、注目記事、カテゴリなどのさまざまなセクションを簡単に移動できます。このプロジェクトでは、有益で見た目にも美しい Web サイトを作成する方法を示します。

特徴

レスポンシブレイアウト: Web サイトはさまざまな画面サイズに適応し、デスクトップとモバイルデバイスの両方で最適な表示エクスペリエンスを提供します。
インタラクティブナビゲーション: ユーザーはさまざまなニュースカテゴリをシームレスに閲覧できます。
クリーンなデザイン: ニュース記事を視覚的に魅力的で読みやすい形式で表示します。

使用されている技術

HTML: ニュースホームページ Web サイトの構造を提供します。
CSS: Web サイトのスタイルを設定して、モダンでレスポンシブなデザインを作成します。
JavaScript: 動的コンテンツの読み込みなどのインタラクティブな要素を管理します。

プロジェクトの構造

プロジェクト構造の概要は次のとおりです:

News-Homepage/
├── index.html
├── style.css
└── script.js

ログイン後にコピー

index.html: ニュースホームページ Web サイトの HTML 構造が含まれています。
style.css: 魅力的でレスポンシブなデザインを作成するための CSS スタイルが含まれています。
script.js: 動的コンテンツの読み込みなど、Web サイトのインタラクティブな要素を管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

リポジトリのクローンを作成します:
```
git clone https://github.com/abhishekgurjar-in/News-Homepage.git
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd News-Homepage
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、ニュースホームページ Web サイトを表示します。

使用法

Web ブラウザで Web サイトを開きます。
トップメニューを使用して セクション内を移動し、さまざまなニュースカテゴリを探索します。
最新の記事や注目のニュース記事を読んでください。
見出しをクリックすると、詳細なニュース記事が表示されます。

コードの説明

HTML

index.html ファイルは、さまざまなニュースカテゴリのセクションやフッターなど、ニュースホームページ Web サイトの構造を定義します。スニペットは次のとおりです:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>News Homepage</title>
    <link
      href="https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <nav class="navigation">
        <div class="logo">
          <img src="./assets/images/logo.svg" alt="ニュース Web サイトのホームページを構築する" />
        </div>
        <div class="menu-icon" onclick="toggleMenu()">
          <img src="./assets/images/icon-menu.svg" alt="Menu Icon" />
        </div>
        <div class="heading">
          <a href="/">Home</a>
          <a href="/">New</a>
          <a href="/">Popular</a>
          <a href="/">Trending</a>
          <a href="/">Categories</a>
        </div>
      </nav>
      <div id="mobile-menu" class="mobile-menu">
        <a href="/">Home</a>
        <a href="/">New</a>
        <a href="/">Popular</a>
        <a href="/">Trending</a>
        <a href="/">Categories</a>
      </div>
      <main>
        <div class="left-main">
          <img src="./assets/images/image-web-3-desktop.jpg" alt="Web 3.0" />
          <div class="body-text">
            <h1>The Bright <br />Future of <br />Web 3.0?</h1>
            <p>
              We dive into the next evolution of the web that claims to put the
              power of the platforms back into the hands of the people. But is
              it really fulfilling its promise?
              <br /><br />
              <span>Read more</span>
            </p>
          </div>
        </div>
        <div class="right-main">
          <h1> New</h1>
          <div class="section">
            <h3>Hydrogen VS Electric Cars</h3>
            <p>Will hydrogen-fueled cars ever catch up to EVs?</p>
            <hr />
          </div>
          <div class="section">
            <h3>The Downsides of AI Artistry</h3>
            <p>
              What are the possible adverse effects of on-demand AI image
              generation?
            </p>
            <hr />
          </div>
          <div class="section">
            <h3>Is VC Funding Drying Up?</h3>
            <p>
              Private funding by VC firms is down 50% YOY. We take a look at
              what that means.
            </p>
            <hr />
          </div>
        </div>
      </main>
      <footer>
        <div class="card">
          <div class="card-image">
            <img src="./assets/images/image-retro-pcs.jpg" alt="Retro PCs" />
          </div>
          <div class="card-text">
            <h1>01</h1>
            <h3>Reviving Retro PCs</h3>
            <p>What happens when old PCs are given modern upgrades?</p>
          </div>
        </div>
        <div class="card">
          <div class="card-image">
            <img src="./assets/images/image-top-laptops.jpg" alt="Top Laptops" />
          </div>
          <div class="card-text">
            <h1>02</h1>
            <h3>Top 10 Laptops of 2022</h3>
            <p>Our best picks for various needs and budgets.</p>
          </div>
        </div>
        <div class="card">
          <div class="card-image">
            <img src="./assets/images/image-top-laptops.jpg" alt="Growth of Gaming" />
          </div>
          <div class="card-text">
            <h1>03</h1>
            <h3>The Growth of Gaming</h3>
            <p>How the pandemic has sparked fresh opportunities.</p>
          </div>
        </div>
      </footer>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

ログイン後にコピー

CSS

style.css ファイルは、ニュースホームページ Web サイトのスタイルを設定し、視覚的に魅力的で応答性の高いものにします。以下にいくつかの主要なスタイルを示します:

* {
  box-sizing: border-box;
}

body {
  background-color: white;
  font-size: 16px;
  margin: 20px;
  font-family: Inter, sans-serif;
}

.container {
  max-width: 1100px;
  margin: auto;
}

.navigation {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  margin: auto;
}

.logo img {
  width: 50px;
}

.heading a {
  cursor: pointer;
  padding-left: 20px;
  text-decoration: none;
  color: gray;
  display: inline-block;
}

.heading a:hover {
  color: rgb(253, 81, 81);
}

.menu-icon {
  display: none;
  cursor: pointer;
}

.menu-icon img {
  width: 30px;
}

.active {
  display: none;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 10px;
}

.mobile-menu a {
  text-decoration: none;
  color: gray;
  padding: 10px;
  display: block;
}

.mobile-menu a:hover {
  color: rgb(253, 81, 81);
}

main {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.left-main {
  width: 80%;
  padding-right: 10px;
}

.left-main img {
  width: 100%;
}

.body-text {
  display: flex;
}

.body-text h1 {
  font-size: 40px;
  width: 50%;
}

.body-text p {
  font-size: 16px;
  width: 50%;
}

.body-text span {
  background-color: rgb(253, 81, 81);
  padding: 10px;
  cursor: pointer;
}

.body-text span:hover {
  background-color: black;
  color: white;
}

.right-main {
  padding: 10px;
  width: 40%;
  background-color: black;
}

.right-main h1 {
  color: rgb(237, 155, 15);
  font-size: 25px;
}

.right-main .section {
  margin: 10px;
}

.section h3 {
  cursor: pointer;
  color: white;
}

.section h3:hover {
  color: rgb(237, 155, 15);
}

.section p {
  color: gray;
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card {
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-image img {
  width: 130px;
}

.card-text h1 {
  color: rgb(253, 81, 81);
}

.card-text h3:hover {
  color: rgb(253, 81, 81);
}

.footer {
  margin: 50px;
  text-align: center;
}

@media (max-width: 600px) {
  .heading {
    display: none;
  }

  .menu-icon {
    display: block;
  }

  main {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .body-text {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  footer {
    flex-direction: column;
  }
}

ログイン後にコピー

JavaScript

script.js ファイルには、ニュースホームページ Web サイトの動的機能が含まれています。デモンストレーション用の簡単なスニペットを次に示します:

function toggleMenu() {
  const mobileMenu = document.getElementById("mobile-menu");
  const menuIcon = document.querySelector(".menu-icon img");

  if (mobileMenu.style.display === "flex") {
    mobileMenu.style.display = "none";
    menuIcon.src = "./assets/images/icon-menu.svg";
  } else {
    mobileMenu.style.display = "flex";
    menuIcon.src = "./assets/images/icon-menu-close.svg";
  }
}

ログイン後にコピー

ライブデモ

ここでニュースホームページ Web サイトプロジェクトのライブデモをチェックできます。

結論

ニュースホームページ Web サイトの構築は、ニュース記事を表示するためのクリーンで組織化された Web プラットフォームを作成する上で素晴らしい経験でした。このプロジェクトは、現代の Web 開発におけるレスポンシブデザインとユーザーフレンドリーなナビゲーションの重要性を強調しています。 HTML、CSS、JavaScript を適用することで、ユーザーにとって貴重なリソースとして機能する、プロフェッショナルな外観のニュース Web サイトを開発しました。このプロジェクトが、あなたが独自のニュースやコンテンツ主導型の Web サイトを構築するきっかけとなることを願っています。コーディングを楽しんでください!