ニュース Web サイトのホームページを構築する

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるニュース ホームページ ウェブサイトを共有できることを嬉しく思います。このプロジェクトは、最新の見出しや記事を紹介するクリーンで機能的なニュース 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 サイトのインタラクティブな要素を管理します。

インストール

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

1. リポジトリのクローンを作成します:
   

   git clone https://github.com/abhishekgurjar-in/News-Homepage.git
   

2. プロジェクト ディレクトリを開きます:
   

   cd News-Homepage
   

3. プロジェクトを実行します:

   • Web ブラウザでindex.html ファイルを開いて、ニュース ホームページ Web サイトを表示します。

使用法

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

コードの説明

HTML

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

  
    <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>
  
  
    <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>
  

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 サイトを構築するきっかけとなることを願っています。コーディングを楽しんでください!

クレジット

このプロジェクトは、Web 開発における私の継続的な学習の一環として開発されました。

著者

• アビシェク・グルジャル
  • GitHub プロフィール

以上がニュース Web サイトのホームページを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。