はじめに
この実験では、CSS プログラミングの基本を学びます。この実験は、初心者が CSS を始める手助けと、美しく応答性のある Web ページを作成するための CSS の使い方を学ぶことを目的としています。実験全体を通じて、セレクター、プロパティ、値などのさまざまなトピックを扱い、概念を強化するための実践演習を行います。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、CSS プログラミングの基本を学びます。この実験は、初心者が CSS を始める手助けと、美しく応答性のある Web ページを作成するための CSS の使い方を学ぶことを目的としています。実験全体を通じて、セレクター、プロパティ、値などのさまざまなトピックを扱い、概念を強化するための実践演習を行います。
VM 内には既に index.html
と style.css
が用意されています。
CSS のみを使って三角形を作成するには、次の手順に従います。
border-width
(20px
)を持つ 3 つのボーダーを使って三角形を作成します。border-color
を目的の色に設定します。隣接するボーダーの border-color
は transparent
にする必要があります。border-width
の値を変更します。以下はコードの例です。
<div class="triangle"></div>
.triangle {
width: 0;
height: 0;
border-top: 20px solid #9c27b0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
右下隅の「Go Live」をクリックして 8080 ポートで Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。
おめでとうございます!あなたは三角形の実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。