CSS 基本入門ガイド

CSSCSSBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、CSS プログラミングの基本を学びます。この実験は、初心者が CSS を始める手助けと、美しく応答性のある Web ページを作成するための CSS の使い方を学ぶことを目的としています。実験全体を通じて、セレクター、プロパティ、値などのさまざまなトピックを扱い、概念を強化するための実践演習を行います。


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/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") subgraph Lab Skills css/selectors -.-> lab-35251{{"CSS 基本入門ガイド"}} css/colors -.-> lab-35251{{"CSS 基本入門ガイド"}} css/borders -.-> lab-35251{{"CSS 基本入門ガイド"}} css/width_and_height -.-> lab-35251{{"CSS 基本入門ガイド"}} end

三角形

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

CSS のみを使って三角形を作成するには、次の手順に従います。

  1. 同じ border-width20px)を持つ 3 つのボーダーを使って三角形を作成します。
  2. 三角形が向いている側と反対側の border-color を目的の色に設定します。隣接するボーダーの border-colortransparent にする必要があります。
  3. 三角形のサイズを調整するには、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 でさらに多くの実験を練習することができます。