CSSで境界線、影、輪郭を使用してHTML要素のスタイルを設定する方法

投稿日: 2022-04-20 2022-04-20
タグ: css, Development, html

著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

シャドウ、ボーダー、およびアウトラインの操作は、Web開発の重要なコンポーネントであり、HTML要素およびテキストアイテムの周囲に視覚的な定義を提供できます。境界線と影の外観は、border、border-radius、box-shadow、text-shadow、およびoutlineの5つの主要なCSSプロパティを介して操作できます。。シャドウは奥行きを提供し、要素を際立たせます。borderプロパティは、コンテンツ間の線形仕切りの作成からグリッドのスペースの定義まで、さまざまな視覚機能を実行できます。 border-radiusプロパティは、ボックスに丸みを帯びた角を作成し、円形にすることもできます。最後に、outlineは見過ごされがちなプロパティであり、コンテンツの流れを妨げることなく、borderプロパティと同じ機能の多くを提供します。

このチュートリアルでは、これらのプロパティを使用して、架空の宇宙旅行会社の合法性に関する通知を作成します。デモ全体を通して、エッジベースのプロパティを使用して視覚的にリッチなコンテナを作成します。さらに、複数の影などのより複雑な値に関する微妙な違いや、さまざまなブラウザが特定のプロパティをさまざまに実装する方法を考慮に入れます。

前提条件

カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
タイプセレクター、コンビネーターセレクター、およびセレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
CSSのcolorプロパティの理解。詳細については、CSSで色の値を使用する方法を参照してください。
backgroundプロパティを使用したCSSグラデーションの知識。 CSS を使用してHTML要素に背景スタイルを適用する方法を確認して、グラデーションの背景を作成する経験を積んでください。
ローカルマシンにindex.htmlとして保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。

ベースHTMLとCSSの設定

このセクションでは、チュートリアル全体で作成するすべての視覚スタイルのHTMLベースを設定します。また、styles.cssファイルを作成し、コンテンツのレイアウトを設定するスタイルを追加します。

テキストエディタでindex.htmlを開くことから始めます。次に、次のHTMLをファイルに追加します。

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Travel Disclosure - Destination: Moon</title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

<head>要素内には多くのページ設定が定義されています。最初の<meta>要素は、テキストに使用する文字セットを定義します。このように、アクセント記号などのほとんどの特殊文字は、特別なHTMLコードなしでレンダリングされます。 2番目の<meta>要素は、ブラウザー、特にモバイルブラウザーに、コンテンツの幅の処理方法を指示します。それ以外の場合、ブラウザは960pxデスクトップ幅をシミュレートします。 <title>要素は、ブラウザにページのタイトルを提供します。 <link>要素は、このチュートリアル全体でスタイルを記述するCSSファイルをロードします。

このページには、スタイルを設定するためのコンテンツも必要です。リーガルテキストについては、リーガルイプサムのサンプルコンテンツをフィラーコピーとして使用します。これは、スタイリングのみを目的としています。

テキストエディタでindex.htmlに戻り、次のコードブロックから強調表示されたHTMLを追加します。

index.html

<!doctype html>
<html>
  ...
  <body>
    <section class="disclosure-alert">
      <header class="disclosure-header">
        <h2  class="disclosure-title"><em>Destination: Moon</em> Travel Disclosure</h2>
      </header>
      <div class="disclosure-content">
        <p>Although space travel is routine practice, there are many unknown possibilities that any traveller must be aware of before traveling with <em>Destination: Moon</em>. Agreeing to this disclosure of knowns is required prior to purchase of tickets with <em>Destination: Moon</em>. PLEASE, READ AND AGREE TO THE FOLLOWING DISCLOSURE OF TRAVEL UNKNOWNS BEFORE PROCEEDING TO PURCHASE.</p>
        <div class="legal-contents">
          <p>Effect of Termination. Upon termination, You agree not to use it under the terms of Sections 4(a) through 4(e) for that Covered Code, or any third party. Description of Modifications.<p>
          <p>You must make sure that you know you can do these things. To make sure the requirements of this Agreement. REQUIREMENTS A Contributor may participate in any way. Notwithstanding the foregoing, if applicable law or agreed to in writing, the Copyright Holder, but only to the terms applicable to Covered Code. Inability to Comply Due to Statute or Regulation.</p>
          <p>If it is impossible for You to the Recipient retains any such Additional Terms. Versions of This License. If you are re-using, b) a hyperlink (where possible) or URL to the terms of Sections 4(a) through 4(e) for that Work shall terminate if it fails to comply with the exception of content that is granting the License. License Terms 1.</p>
          <p>Grant of Patent Infringement. If you have knowledge of patent infringement litigation, then the only applicable Base Interpreter is a "commercial item" as defined in 48 C.F.R. Consistent with 48 C.F.R.</p>
          <p>U.S. Government End Users acquire Covered Code (Original Code and/or as part of a Larger Work; and b) allow the Commercial Contributor then makes performance claims, or offers warranties related to Product X, those performance claims and warranties are such Commercial Contributor's responsibility alone. Under this section, the Commercial Distributor in writing of such Contributor, if any, to grant more extensive warranty protection to some or all of these conditions: (a) You must make it clear that any Modifications made by such Respondent, or (ii) withdraw Your litigation claim is resolved (such as Wikimedia-internal copying), it is Recipient's responsibility to secure any other exploitation. Program, and in any of the provisions set forth in Section 4(b), you shall terminate if it fails to comply with.</p>
          <p>Please note that these licenses do allow commercial uses of your company or organization, to others outside of this License Agreement), provided that You meet the following terms which differ from this License) and (b) You must duplicate the notice in Exhibit A in each changed file stating how and when you changed the files and the definitions are repeated for your past or future use of the Original Code; or 3) for infringements caused by: i) third party against the drafter will not be used as a handle): 1895.22/1011. This Agreement shall be held by the terms of this agreement. If any provision of this license which gives you legal permission to modify NetHack, or otherwise using this software in source and binary forms, with or without modification in printed materials or in related documentation, stating that you provide a service, including but not limited to the terms under which you distribute, wherever you describe the origin or ownership of such termination, the Recipient a non-exclusive, royalty-free, world-wide license to reproduce, analyze, test, perform and/or display publicly, prepare derivative works, distribute, and otherwise use Python 1.6b1 or any part of Derivative Works. If You initiate litigation by asserting a patent infringement against You in that instance.</p>
          <p>Effect of New York and the like. While this license document the following disclaimer in the Work contain all the conditions listed in Clause 6 above, concerning changes from the Work. If you created a Modification, you may at your option offer warranty protection to some or all of the Licensed Program as a product of your Modifications available to others outside of this License.</p>
          <p>Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted to Licensor for inclusion in the documentation and/or other rights consistent with this program; if not, write to the modified files to carry prominent notices stating that You distribute, all copyright, patent, trademark, and attribution notices from the Public Domain or from the Original Code; 2) separate from the Public Domain or from the Work, you may distribute a Compiled Work on their system exactly as it is being maintained, then ask the Current Maintainer to update their communication data within one month. If the program is free software; you can change the License will not have to defend and indemnify every other Contributor to control, and cooperate with the Source Code version of the Licensed Program, or any Contributor.</p>
        </div>
        <div class="button-group">
          <a href="#" class="button button-primary">
            Agree
          </a>
          <a href="#" class="button button-secondary">
            Disagree
          </a>
        </div>
      </div>
    </section>
  </body>
</html>

変更内容をindex.htmlに保存し、Webブラウザを開きます。 ファイルメニュー項目を選択し、開くオプションを選択して、ブラウザにindex.htmlファイルをロードします。次の画像は、このHTMLがブラウザでどのようにレンダリングされるかを示しています。

Several paragraphs of content in black serif text on a white background, with a larger bold headline above and two blue text links below.

index.htmlと同じディレクトリにstyles.cssという名前の新しいファイルを作成し、テキストエディタで開きます。このファイルには、チュートリアル全体で使用されるすべてのスタイルが含まれます。スタイルの最初のセットは、構築する一般的な美学を適用します。次のコードブロックのCSSをstyles.cssファイルに適用します。

styles.css

html, body {
  height: 100%;
}

body {
  display: flex;
  margin: 0;
  font: 100% / 1.5 sans-serif;
  background: url("images/moon-bg.jpg") no-repeat fixed center / cover black;
}
.disclosure-alert {
  background-color: hsl(0, 0%, 95%);
  width: 85%;
  max-width: 48rem;
  margin: auto;
  color: hsl(0, 0%, 20%);
}
.disclosure-header {
  background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
  padding: 2rem 0.5rem;
  text-align: center;
  color: hsl(300, 50%, 95%);
}
.disclosure-title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.25;
}
.disclosure-content {
  margin: 1.5rem;
}
.legal-contents {
  margin-top: 1.5rem;
  background-color: white;
  padding: 0.75rem;
  font-family: "Times New Roman", serif;
}
.button-group {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}
.button {
  display: inline-block;
  text-align: center;
  padding: 0.5rem 1rem;
  background: black;
  text-decoration: none;
  color: white;
  width: 50%;
  max-width: 8rem;
}
.button + .button {
  margin-left: 1.5rem;
}
.button-primary {
  background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
}
.button-primary:hover {
  background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
}
.button-secondary {
  background: linear-gradient(to bottom, hsl(200, 10%, 30%), hsl(200, 10%, 20%));
}
.button-secondary:hover {
  background: linear-gradient(to bottom, hsl(200, 10%, 25%), hsl(200, 10%, 15%));
}

このファイルのスタイル設定は、ページの初期レイアウトを設定します。中央に法的な開示があり、間隔があり、線形グラデーションでレンダリングされたボタン、および背景として使用される月の画像があります。続行する前に、必ずstyles.cssファイルを保存してください。

bodyルールセットのbackgroundプロパティにリンクされている画像を表示するには、月の背景画像が必要です。まず、index.htmlファイルと同じフォルダにimagesディレクトリを作成します。

mkdir images

ブラウザを使用してこのファイルを新しく作成したimagesディレクトリにダウンロードするか、次のcurlコマンドを使用してコマンドラインからダウンロードします。

curl -sL https://assets.digitalocean.com/articles/68102/moon-bg.jpg -o images/moon-bg.jpg

次に、ブラウザに戻って更新します。これで、ブラウザがレンダリングされ、ページのコンテンツにスタイルが適用されます。次の画像は、ページ全体がどのようにレンダリングされるかを示しています。

Large webpage showing multiple paragraphs inside a container with a purple bar at the top with light pink text with a blue and gray button at the bottom, in front of a close up photo of the moon.

コンテンツの長さは非常に長いページになります。これは合法的なコピーを目的としているため、.legal-contentsのコンテンツはスクロール可能なスペースになる可能性があります。これは、プロパティheight、max-height、およびoverflowの組み合わせによって行われます。

スクロール可能な領域を作成するには、テキストエディタでstyles.cssを開きます。次に、次のコードを使用して合法的なコンテンツの高さを調整します。

styles.css

...
.legal-contents {
  height: 50vh;
  max-height: 20rem;
  overflow: auto;
  margin-top: 1.5rem;
  background-color: white;
  padding: 0.75rem;
  font-family: "Times New Roman", serif;
}
...

このコードでは、.legal-contentsセレクターブロックにheightプロパティを作成し、その値を50vh、つまりビューポートウィンドウの高さの50% ofに設定しました。また、値を20remに設定してmax-heightプロパティを作成しました。最後に、値がautoのoverflowプロパティを追加しました。これにより、コンテンツがコンテナーをオーバーフローした場合にスクロールバーが作成されます。

これらの追加をstyles.cssファイルに保存してから、ブラウザに戻ってindex.htmlを更新してください。ページとメインコンテナの高さが完全に凝縮されています。これで、次のアニメーションに示すように、LegalIpsumのコピーを指定されたコンテナ内でスクロールできます。

Animation of paragraphs of text scrolling with in a smaller content area.

このセクション全体を通して、チュートリアルの残りの部分で使用するプライマリHTMLを設定します。また、overflowプロパティを使用してスクロール可能なスペースを設定します。次のセクションでは、borderプロパティを使用して、これらのコンテナに境界線を適用します。

`border`プロパティの使用

borderプロパティは、要素のエッジにスタイルを適用するための独自の方法の1つです。コンテナの外周に任意の色の線を適用します。プロパティの値は、厚さ、スタイル、色の3つの要素で構成されます。 borderプロパティは、これらの値を要素の4つの側面すべてに適用します。要素の上部にのみ適用されるborder-topプロパティなど、borderの方向バリエーションを使用して個々の側面を指定できます。

borderプロパティの操作を開始するには、テキストエディタでstyles.cssを開き、.disclosure-alertクラスセレクタに移動します。次のコードブロックで強調表示されているように、セレクターブロック内に、値が1px solid hsl(0, 0%, 0%)に設定されたborderプロパティを追加します。

styles.css

...
.disclosure-alert {
  background-color: hsl(0, 0%, 95%);
  width: 85%;
  max-width: 48rem;
  margin: auto;
  color: hsl(0, 0%, 20%);
  border: 1px solid hsl(0, 0%, 0%);
}
...

このborderプロパティは省略形プロパティであり、その値が他の値の組み合わせであることを意味します。この場合、1pxの厚さは、border-widthプロパティ値を表します。この値は、thin、medium、およびthickのいくつかの名前付き値とともに、単位を含む任意の数値にすることができます。次に、solidはborder-style値であり、要素の周囲の線（この場合は実線の実線）がどのように表示されるかを定義します。 border-styleの他の値には、dotted、dashed、double、およびnoneが含まれます。最終的な値は、border-colorプロパティを定義します。これは、任意の有効な色の値にすることができます。

変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを開きます。プライマリコンテンツコンテナの周囲に細い黒い境界線が表示されます。これは、月の背景画像に重なっているため、最もはっきりとわかります。次の画像は、borderがメインコンテンツ領域にどのように表示されるかを示しています。

Box of content with purple heading wrapped by a thin black border over a photo of the moon.

次に、borderプロパティを使用して、要素にハイライトとシャドウを適用することにより、奥行き感を作成できます。これを実現するには、一方の側で背景色よりも明るい方向borderを使用し、次に隣接する側でより暗い色を使用します。

テキストエディタでstyles.cssに戻り、.disclosure-headerクラスセレクタブロックに移動します。 backgroundプロパティのlinear-gradient()は、少し暗い色合いに移行する濃い紫色のグラデーションを定義します。グラデーションだけよりも奥行きを作成するには、次のコードで境界線を調整します。

styles.css

...
.disclosure-header {
  background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
  padding: 2rem 0.5rem;
  text-align: center;
  color: hsl(300, 50%, 95%);
  border-top: 1px solid hsl(300, 50%, 35%);
  border-bottom: 1px solid hsl(300, 50%, 5%);
}
...

border-topプロパティを1px solid hsl(300, 50%, 35%)の値で追加しました。これは、開始グラデーション値よりも少し軽い値です。次に、border-bottomプロパティを1px solid hsl(300, 50%, 5%)の値に設定しました。これは、グラデーションの終わりよりもわずかに暗い値です。

変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。紫色のヘッダーの背景には、ヘッダーの上部を横切る紫色のわずかなハイライトと、下部に沿ったわずかな影があります。次の画像は、これがブラウザにどのように表示されるかを示しています。

A purple background header with a light purple thin border on the top and a dark purple thin border on the bottom.

borderは省略形のプロパティであるため、長い数字のプロパティを追加できます。 2つのボタンクラスの幅とスタイルを定義するborderを適用でき、個々のクラスにborder-colorを適用できます。

border-colorの操作を開始するには、テキストエディタでstyles.cssを開きます。 .buttonのセレクターブロックで、1px solidの値を持つborderプロパティを追加してから、.button-primaryのborder-colorプロパティを追加します。 .button-secondary：

styles.css

...
.button {
  ...
  border: 1px solid;
}
...
.button-primary {
  background: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 100%, 20%));
  border-color: hsl(200, 100%, 15%);
}
.button-primary:hover {
  background: linear-gradient(to bottom, hsl(200, 100%, 25%), hsl(200, 100%, 15%));
  border-color: hsl(200, 100%, 10%);
}
.button-secondary {
  background: linear-gradient(to bottom, hsl(200, 10%, 30%), hsl(200, 10%, 20%));
  border-color: hsl(200, 10%, 15%);
}
.button-secondary:hover {
  background: linear-gradient(to bottom, hsl(200, 10%, 25%), hsl(200, 10%, 15%));
  border-color: hsl(200, 10%, 10%);
}

これは、両方のボタンに1px幅solidスタイルの境界線を定義します。次に、border-colorプロパティを追加して、.button-primary、.button-secondary、およびそれらに関連する:hover状態セレクターの色をカスタマイズしました。

これらの変更をstyles.cssに保存してから、Webブラウザーでページを更新してください。次の画像に示すように、ボタンは、一致する暗い色の境界線によって提供される、もう少し明確になりました。

Two buttons, one blue and the other gray, with a darker blue and darker gray border surrounding the buttons, respectively.

最後に、各border方向も省略形です。これは、-width、-style、および-colorをそれぞれ方向プロパティに適用できることを意味します。たとえば、longhandプロパティborder-right-colorは、右側の境界線にのみ色を適用します。

これらの方向性のあるロングハンドborderプロパティを操作するには、テキストエディタでstyles.cssに戻ります。 .legal-contentsセレクターブロックに移動し、4つの境界線すべての幅とスタイルを設定してから、各辺の色をカスタマイズします。

styles.css

...
.legal-contents {
  height: 50vh;
  max-height: 20rem;
  margin-top: 1.5rem;
  overflow: auto;
  background-color: white;
  border: 1px solid;
  border-top-color: hsl(0, 0%, 65%);
  border-bottom-color: hsl(0, 0%, 100%);
  border-right-color: hsl(0, 0%, 80%);
  border-left-color: hsl(0, 0%, 80%);
  padding: 0.75rem;
  font-family: "Times New Roman", serif;
}
...

このコードでは、ファイルの最後にborder: 1px solidを追加しました。その後、border-top-color、border-bottom-color、border-right-color、およびborder-left-colorプロパティを追加で作成しました。値には、グレーに異なるhsl()値を使用しました。

変更内容をstyles.cssに保存し、ブラウザでページをリロードします。スクロール可能なコンテンツコンテナには、上部に濃い灰色の境界線、側面にわずかに明るい灰色、下部に白い境界線があります。これは、次の画像に示すように、コンテンツが明るい灰色の背景の後ろに挿入され、ハイライトが下端にある効果を引き起こすという認識を与えるためです。

A box of scrollable content with a dark border on top, a mid-gray border on the sides, and a white border on the bottom.

このセクションでは、borderプロパティとそのさまざまなロングハンドバリエーションを使用しました。いくつかの境界線を作成し、必要に応じてさまざまな側面に適用しました。次のセクションでは、border-radiusプロパティを使用して、コンテナの角を丸めることができます。

`border-radius`を適用する

丸みを帯びた角は、border-radiusプロパティがタスクを実行するために使用されるずっと前から、Web上のデザインの美学でした。このプロパティは、任意の数値単位またはパーセンテージ値を受け入れることができ、marginまたはpaddingプロパティのような省略形のプロパティです。これは、各コーナーを必要に応じて個別に調整できることを意味します。

border-radiusプロパティの操作を開始するには、テキストエディタでstyles.cssを開きます。 .disclosure-alertセレクターブロックとborder-radiusプロパティに移動します。次に、値を1.5remに設定します。これにより、その値がプロパティの四隅すべてに適用されます。次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

styles.css

...
.disclosure-alert {
  ...
  border: 1px solid hsl(0, 0%, 0%);
  border-radius: 1.5rem;
}
...

この追加をstyles.cssに保存し、Webブラウザでindex.htmlを開くか更新します。下の2つの角だけが丸みを帯びているように見えますが、上の2つの角は尖ったエッジのままです。次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

Container of content with a large rounded corner on the bottom and straight edges on the top.

2つの丸い角だけが表示される理由は、子孫要素がWeb上で互いにどのように相互作用するかによるものです。ブラウザは、コンテンツを表示したままにする側でエラーを起こします。 .disclosure-alertには4つの丸い角がありますが、.disclosure-headerは要素の内側にあり、丸い角がないため、丸い角と重なります。簡単な修正方法は、overflow: hiddenを.disclosure-alertに追加して、コンテナーが子孫のコンテナーとコンテンツをクリップするようにすることです。ただし、このアプローチでは、必要なコンテンツが判読できなくなったり、見えなくなったりする可能性があります。 border-radiusを.disclosure-headerクラスに適用して、祖先のコーナーのカーブに一致させることをお勧めします。

重なっている角を調整するには、テキストエディタでstyles.cssに戻ります。 .disclosure-headerセレクターブロックに移動し、border-radiusプロパティを追加します。調整が必要なのは上部の2つのコーナーだけなので、値は1.5rem 1.5rem 0 0になります。

styles.css

...
.disclosure-header {
  ...
  border-top: 1px solid hsl(300, 50%, 35%);
  border-bottom: 1px solid hsl(300, 50%, 5%);
  border-radius: 1.5rem 1.5rem 0 0;
}
...

この値の拡張フォーマットは、1.5remカーブを左上隅と右上隅に適用します。

変更内容をstyles.cssに保存し、ブラウザでindex.htmlを更新します。紫色のヘッダーは角が丸くなり、メインコンテナを覆っていません。ただし、次の拡大画像に示すように、親コンテナからの白いスライバーが紫色のヘッダーの後ろからピークになっているため、新しい問題が発生しました。

Close-up of a purple rounded corner with a sliver of light gray rounded corner showing.

.disclosure-alertと.disclosure-headerの両方のコーナーは、1.5remと同じサイズですが、幅にサイズの違いがあります。このサイズの違いは、.disclosure-alert要素の左右にあるborderが原因です。 borderの幅は両側で1pxであるため、サイズの違いは2pxまたは0.125remです。曲線を一致させるには、.disclosure-headerのborder-radiusを現在より0.125rem小さくする必要があります。次のコードブロックで強調表示されているように、1.5remのborder-radius値を1.375remに変更します。

styles.css

...
.disclosure-header {
  background: linear-gradient(hsl(300, 50%, 20%), hsl(300, 50%, 10%));
  padding: 2rem 0.5rem;
  text-align: center;
  color: hsl(300, 50%, 95%);
  border-top: 1px solid hsl(300, 50%, 35%);
  border-bottom: 1px solid hsl(300, 50%, 5%);
  border-radius: 1.375rem 1.375rem 0 0;
}
...

この変更をstyles.cssに保存してから、Webブラウザーでページを更新してください。白のスライバーがなくなり、2つの要素の曲線が適切な場所で交わります。次の拡大されたスクリーンショットは、これらの曲線がどのように並んでいるかを示しています。

Close-up of a purple rounded corner with light purple highlight.

最後に、メインコンテナの下部にあるボタンに丸みを帯びた角を適用します。これらのボタンは丸薬の形をしており、上下が長く平らで、側面が丸みを帯びています。これを実現するには、このborder-radius値は、要素の高さよりも大きい単位ベースの値である必要があります。

丸薬の形をしたボタンを作成するには、テキストエディタでstyles.cssを開きます。 .buttonセレクターブロックで、border-radiusプロパティを追加し、値を2remに設定します。これは、計算された高さ、font-size、line-height、padding、および[ X151X]

getdocs

13036

序章

前提条件

ベースHTMLとCSSの設定

borderプロパティの使用

border-radiusを適用する

getdocs

`border`プロパティの使用

`border-radius`を適用する