画像切り抜きで魅力的なカードを作成する

はじめに

この実験では、HTML と CSS を使って画像切り抜き付きのカードを作成する方法を学びます。この実験では、コンテナ要素に色付きの背景を追加し、画像とその他のコンテンツを持つカードを作成し、::before 疑似要素を使って figure 要素の周りに枠を追加し、カードに切り抜きの錯覚を作り出す方法を学びます。この実験が終わるとき、画像切り抜き付きの視覚的に魅力的なカードを作成する方法をしっかりと理解しているでしょう。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

画像切り抜き付きのカード

VM には既に index.html と style.css が用意されています。

画像切り抜き付きのカードを作成するには、次の手順に従います。

.container 要素に background プロパティを使って色付きの背景を追加します。
.card 要素を作成し、その中に figure 要素を追加し、必要な画像とその他のコンテンツを配置します。
::before 疑似要素を使って figure 要素の周りに border を追加します。枠の色を .container 要素の background 色と一致させて、.card に切り抜きの錯覚を作り出します。

ここにカードの例となる HTML コードを示します。

<div class="container">
  <div class="card">
    <figure>
      <img alt="" src="https://picsum.photos/id/447/400/400" />
    </figure>
    <p class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
  </div>
</div>

そして、対応する CSS コードを示します。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 96px 24px 48px;
  background: #f3f1fe;
}

.card {
  width: 350px;
  margin: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
}

.card figure {
  width: 120px;
  height: 120px;
  margin-top: -60px;
  border-radius: 50%;
  position: relative;
}

.card figure::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: inherit;
  border: 1rem solid #f3f1fe;
  box-shadow: 0 1px rgba(0, 0, 0, 0.1);
}

.card figure img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.card.content {
  margin: 2rem;
  text-align: center;
  line-height: 1.5;
  color: #101010;
}

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！画像切り抜き付きのカードの実験を完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。