記事カードを作成する-CSSチュートリアル-php.cn

Article Card

ホームページ

ウェブフロントエンド

CSSチュートリアル

記事カードを作成する

王林

Sep 03, 2024 pm 04:08 PM

Build a Article Card

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、記事カード Web コンポーネントをご紹介できることを大変うれしく思います。このプロジェクトは、あらゆる Web サイトに追加するのに最適で、記事、ブログ投稿、ニュース更新を表示する視覚的に魅力的な方法を提供します。実用的で再利用可能なコンポーネントを作成しながら、HTML、CSS、JavaScript を使用したフロントエンド開発スキルを磨く絶好の機会です。

プロジェクト概要

記事カード コンポーネントは、画像、タイトル、説明、および著者情報を含む記事を紹介するように設計されています。クリーンでモダンなレイアウトにより、コンテンツがより視覚的に魅力的でアクセスしやすくなり、ユーザーエンゲージメントが向上します。このプロジェクトでは、さまざまな Web アプリケーションに簡単に統合できるエレガントな記事カードを作成する方法を示します。

特徴

レスポンシブデザイン: 記事カードは完全にレスポンシブで、デスクトップとモバイルデバイスの両方で見栄えが良くなります。
ホバー効果: カードのインタラクティブ性を高めるために、微妙なホバー効果が適用されます。
カスタマイズ可能なレイアウト: レイアウトは、さまざまな種類のコンテンツに合わせて簡単にカスタマイズできるため、さまざまなユースケースに多用途に使用できます。

使用されている技術

HTML: 記事カードコンポーネントの構造を提供します。
CSS: コンポーネントをスタイル設定して、視覚的に魅力的で応答性の高いデザインを作成します。
JavaScript: (オプション) クリック時のコンテンツの展開や他のコンポーネントとの統合など、追加の対話機能に使用できます。

プロジェクトの構造

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

Article-Card/
├── index.html
├── style.css
└── script.js (optional)

ログイン後にコピー

index.html: 記事カードコンポーネントの HTML 構造が含まれます。
style.css: 魅力的でレスポンシブなデザインを作成するための CSS スタイルが含まれています。
script.js: (オプション) クリック時にコンテンツを展開するなど、対話性を追加するために使用できます。

インストール

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

リポジトリのクローンを作成します:
```
git clone https://github.com/abhishekgurjar-in/Article-Card.git
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd Article-Card
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、記事カードコンポーネントを表示します。

使用法

Web ブラウザで アプリケーションを開きます。
カードの上にカーソルを置くと、インタラクティブな効果が表示されます。
コンテンツをカスタマイズします。特定の使用例に合わせて HTML および CSS ファイルを編集します。
必要に応じて、カードを追加します。グリッドまたは記事のリストを作成します。

コードの説明

HTML

index.html ファイルは、記事カードコンポーネントの構造を定義します。スニペットは次のとおりです:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Article Card</title>
    <link
      href="https://fonts.googleapis.com/css?family=Manrope:200,300,regular,500,600,700,800"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <div class="header">
      <h1 id="Article-Card">Article Card</h1>
    </div>
    <div class="container">
      <div class="box">
        <div class="left-box"></div>
        <div class="right-box">
          <h3>
            Shift the overall look and feel by adding these wonderful touches to
            furniture in your home
          </h3>
          <p>
            Ever been in a room and felt like something was missing? Perhaps it
            felt slightly bare and uninviting. I’ve got some simple tips to help
            you make any room feel complete.
          </p>
          <div class="name-card">
            <div class="name">
              <img class="profile lazy"  src="/static/imghw/default1.png"  data-src="./images/avatar-michelle.jpg" 
                alt="Profile picture of Michelle Appleton"
              />
              <h4>
                Michelle Appleton <br />
                <span>28 Jun 2020</span>
              </h4>
            </div>
            <div class="share">
              <img src="/static/imghw/default1.png"  data-src="./images/icon-share.svg"  class="lazy" alt="Share icon" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

ログイン後にコピー

CSS

style.css ファイルは、記事カードコンポーネントのスタイルを設定し、視覚的に魅力的で応答性が高いことを保証します。以下にいくつかの主要なスタイルを示します:

* {
    box-sizing: border-box;
}

body {
    background-color: #ecf2f8;
    margin: 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
}

.header {
    margin: 20px;
    text-align: center;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    overflow: hidden;
    background-color: white;
    border-radius: 20px;
    margin: 0;
    width: 700px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
}

.left-box {
    width: 40%;
    height: 300px; /* Ensure height is defined */
    background: url("./images/drawers.jpg") no-repeat center center;
    background-size: cover; /* Ensures the image covers the entire area */
}

.right-box {
    background-color: white;
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 25px;
}

.right-box h3 {
    font-size: 18px;
    margin-right: 55px;
}

.right-box p {
    font-size: 13px;
    margin-right: 55px;
}

.name-card {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.share {
    background-color: #ecf2f8;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 120px;
}

.share img {
    width: 20px;
}

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

.name h4 {
    font-size: 14px;
}

.name span {
    font-size: 11px;
    color: gray;
}

.profile {
    width: 50px;
    border-radius: 50%;
}

.share-popup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb(214, 214, 214);
    background-color: #48556a;
    padding-inline: 15px;
    border-radius: 7px;
    font-weight: 100;
    font-size: 15px;
    width: 220px;
    position: fixed;
    margin-top: 250px;
    margin-left: 550px;
}

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

@media (max-width: 750px) {
    .box {
        flex-direction: column;
        width: 400px;
        height: 600px;
    }

    .left-box {
        width: 100%;
    }

    .share-popup {
        margin-top: 550px;
        margin-left: 350px;
    }
}

ログイン後にコピー

JavaScript (オプション)

script.js ファイルを使用すると、コンテンツの展開や折りたたみなどの追加の対話機能を追加できます。簡単な例を次に示します:

const shareBtn = document.getElementsByClassName("share")[0];
const container = document.getElementsByClassName("container")[0];

shareBtn.addEventListener("click", () => {
    let sharePopup = document.querySelector(".share-popup");

    if (sharePopup) {
        container.removeChild(sharePopup);
    } else {
        sharePopup = document.createElement("div");
        sharePopup.innerHTML = `
            <p>S H A R E</p>
            <img class="fb lazy"  src="/static/imghw/default1.png"  data-src="./images/icon-facebook.svg"  alt="記事カードを作成する" />
            <img class="tw lazy"  src="/static/imghw/default1.png"  data-src="./images/icon-twitter.svg"  alt="Twitter" />
            <img class="pt lazy"  src="/static/imghw/default1.png"  data-src="./images/icon-pinterest.svg"  alt="Pinterest" />
        `;
        sharePopup.classList.add("share-popup");
        container.appendChild(sharePopup);
    }
});

ログイン後にコピー

ライブデモ

ここで、Article Card プロジェクトのライブデモをチェックできます。

結論

記事カードコンポーネントの構築は、再利用可能で視覚的に魅力的な Web コンポーネントを設計する上で素晴らしい経験でした。このプロジェクトは、現代の Web 開発におけるクリーンなデザインと応答性の高いレイアウトの重要性を強調しています。 HTML、CSS、およびオプションで JavaScript を適用することで、Web サイトの視覚的な魅力と使いやすさを向上させるコンポーネントを作成しました。このプロジェクトが、あなたが独自のカスタムコンポーネントを構築するきっかけとなることを願っています。コーディングを楽しんでください!