ポーカドットの背景パターン：CSS スタイリングの基本

はじめに

この実験では、CSS プログラミングの基本を探索し、CSS を使ってウェブページをスタイル設定および整形する方法を学びます。一連の実践的な演習を通じて、CSS の構文、セレクター、プロパティ、および値についてしっかりと理解し、視覚的に魅力的でレスポンシブなウェブページを作成できるようになります。この実験の終了時には、CSS の強固な基礎を身につけ、より高度なウェブ開発プロジェクトに取り組めるようになります。

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

ポーカドットの背景パターン

index.html と style.css はすでに仮想マシン（VM）に用意されています。

ポーカドットの背景パターンを作成するには、以下の手順に従ってください。

background-color プロパティを黒に設定します。
background-image プロパティに 2 つの radial-gradient() 値を使用して、2 つのドットを作成します。
background-size プロパティを使用してパターンのサイズを指定します。background-position を使用して 2 つのグラデーションを適切に配置します。
background-repeat を repeat に設定します。
要素の固定された height と width は、デモンストレーション目的のみです。

以下は、クラス polka-dot を持つ div 要素の HTML コードの例です。

<div class="polka-dot"></div>

そして、対応する CSS コードは次の通りです。

.polka-dot {
  width: 240px;
  height: 240px;
  background-color: #000;
  background-image:
    radial-gradient(#fff 10%, transparent 11%),
    radial-gradient(#fff 10%, transparent 11%);
  background-size: 60px 60px;
  background-position:
    0 0,
    30px 30px;
  background-repeat: repeat;
}

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

まとめ

おめでとうございます！ポーカドットの背景パターンの実験を完了しました。LabEx でさらに多くの実験を行い、スキルを向上させることができます。