CSS プログラミング | Web 開発 | HTML 要素のスタイリング

はじめに

この実験では、HTML要素をスタイリッシュにするためのさまざまな技術を練習することでCSSプログラミングを探求します。実践的な演習を通じて、セレクター、プロパティ、値をどのように使用するかを学び、視覚的に魅力的なWebページを作成します。この実験が終わるとき、あなたはCSSをしっかりと理解し、独自のWeb開発プロジェクトに適用できるようになります。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35181{{"Web 開発における CSS のスタイリング技術"}} css/colors -.-> lab-35181{{"Web 開発における CSS のスタイリング技術"}} css/borders -.-> lab-35181{{"Web 開発における CSS のスタイリング技術"}} css/width_and_height -.-> lab-35181{{"Web 開発における CSS のスタイリング技術"}} css/backgrounds -.-> lab-35181{{"Web 開発における CSS のスタイリング技術"}} end

円

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

CSSのみを使用して円形を作成するには、要素の境界を曲げるためにborder-radius: 50%プロパティを使用します。完全な円を保証するために、widthとheightの両方を同じ値に設定することを確認してください。異なる値を使用する場合、代わりに楕円が作成されます。以下はコードの例です：

<div class="circle"></div>

.circle {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #9c27b0;
}

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

まとめ

おめでとうございます！あなたは円の実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習することができます。