CSSで境界線、影、輪郭を使用して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がブラウザでどのようにレンダリングされるかを示しています。

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

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

コンテンツの長さは非常に長いページになります。これは合法的なコピーを目的としているため、.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のコピーを指定されたコンテナ内でスクロールできます。

このセクション全体を通して、チュートリアルの残りの部分で使用するプライマリ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がメインコンテンツ領域にどのように表示されるかを示しています。

次に、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を更新します。紫色のヘッダーの背景には、ヘッダーの上部を横切る紫色のわずかなハイライトと、下部に沿ったわずかな影があります。次の画像は、これがブラウザにどのように表示されるかを示しています。

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ブラウザーでページを更新してください。次の画像に示すように、ボタンは、一致する暗い色の境界線によって提供される、もう少し明確になりました。

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

このセクションでは、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つの角は尖ったエッジのままです。次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

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を更新します。紫色のヘッダーは角が丸くなり、メインコンテナを覆っていません。ただし、次の拡大画像に示すように、親コンテナからの白いスライバーが紫色のヘッダーの後ろからピークになっているため、新しい問題が発生しました。

.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つの要素の曲線が適切な場所で交わります。次の拡大されたスクリーンショットは、これらの曲線がどのように並んでいるかを示しています。

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

丸薬の形をしたボタンを作成するには、テキストエディタでstyles.cssを開きます。 .buttonセレクターブロックで、border-radiusプロパティを追加し、値を2remに設定します。これは、計算された高さ、font-size、line-height、padding、および[ X151X]要素の全体の高さに影響を与える可能性があります。次のコードブロックで強調表示されているCSSは、このプロパティを追加する場所を示しています。

styles.css

...
.button {
  ...
  border: 1px solid;
  border-radius: 2rem;
}
...

このアプローチについて注意すべき点が2つあります。 1つ目は、この要素にheightの値が設定されていないことです。 heightの値を設定することは避けてください。コンテンツはコンテナの外に流れる可能性があり、その位置にあるためです。セットheightを回避することにより、ボタンを拡大してコンテンツ全体に一致させることができます。 2つ目は、これがパーセントベースの値では正しく機能しないことです。 border-radiusプロパティのパーセントベースの値は、高さと幅のパーセントを曲線化し、丸い角ではなく楕円形になります。

変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。次の画像に示すように、ページは2つの長方形のピル型ボタンをレンダリングします。

このセクション全体を通して、border-radiusプロパティを使用して、丸みを帯びた角を複数の要素に適用し、border-radiusが子孫要素が湾曲したスペースを離れることを妨げないことを発見しました。また、border-radiusの値を調整して、複数の丸みを帯びた要素が互いに重なっている場合の要素の幅に一致させました。次のセクションでは、text-shadowプロパティを使用して、テキストコンテンツにドロップシャドウを適用します。

`text-shadow`プロパティの使用

テキストにシャドウを適用することは、日常のWeb開発で多くの用途があります。影は、奥行きやグロー効果を生み出したり、見落とされる可能性のある場所でテキストを目立たせるのに役立ちます。このセクションでは、text-shadowを複数の要素に適用して、さまざまな視覚効果を作成します。

text-shadowプロパティは、最大4つの値（x軸オフセット、y軸オフセット、ぼかし半径、および色）で構成されます。例として、値は次のようになります：2px 4px 10px red。これらの4つの値のうち、オフセット値のみが必要です。デフォルトのシャドウカラーは、テキストのcolorです。

text-shadowの操作を開始するには、ヘッダーにグロー効果を作成することから始めます。テキストエディタでstyles.cssを開き、.disclosure-headerクラスセレクタに移動します。セレクターブロック内に、次のtext-shadowプロパティを追加します。

styles.css

...
.disclosure-header {
  ...
  border-radius: 1.375rem 1.375rem 0 0;
  text-shadow: 0 0 0.375rem hsl(300, 50%, 50%);
}
...

グロー効果は、テキストのすべての端から色が発せられることを意味するため、ここでのx軸とy軸のオフセット値は0に設定されます。グローのぼかしを0.375rem（6pxと同等）に設定して、テキストに微妙な色のハローを与えます。最後に、色の値がcolorプロパティhsl(300, 50%, 50%)よりも少し暗く設定されました。

この追加をstyles.cssファイルに保存します。次に、Webブラウザでindex.htmlを開きます。紫色のグラデーションの背景にある太字の見出しテキストの周囲に、真ん中の紫色の輝きがあります。次の画像は、この効果がブラウザでどのようにレンダリングされるかを示しています。

次に、テキスト要素に複数のシャドウを配置して、テキストにエンボス効果を作成できます。この効果は、オブジェクトの下に明るい色の影を配置し、上に暗い色の影を配置することによって実現されます。

エンボス効果を作成するには、テキストエディタでstyles.cssに戻ります。コンテナ下部のボタンにエフェクトが追加されます。 .button-primary、.button-primary:hover、.button-secondary、および.button-secondary:hoverセレクターの場合、text-shadowプロパティを追加します。値については、次のコードブロックで強調表示されているCSSを確認してください。

styles.css

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

最初の影は、より明るい下の挿入図のハイライトです。これは、0 1pxオフセットを使用して行われ、その後、背景のグラデーションの色相の明るいバージョンが使用されます。次に、0 -1pxオフセットを使用してテキストの上に影を作成しました。これにより、影が1pxに引き上げられ、背景色の暗いバリエーションが使用されます。

これらの変更をstyles.cssに保存してから、Webブラウザーでページを更新してください。ボタン内のテキストには、テキストの下にわずかなハイライトがあり、テキストの上にわずかな影があります。これらのtext-shadow値の組み合わせにより、次の画像に示すようにエンボス効果が作成されます。

このセクションでは、text-shadowプロパティをいくつかの要素に適用しました。ヘッダーにグロー効果を作成し、ボタンに複数の影を付けたエンボス効果を作成しました。次のセクションでは、box-shadowプロパティを使用してHTML要素にシャドウを適用します。

要素に`box-shadow`を追加する

text-shadowプロパティでテキストコンテンツに影を付けることができるのと同様に、box-shadowプロパティでは、要素とコンテナにも影を付けることができます。 box-shadowには、ぼかしの広がりを制御したり、要素内に影を設定したりする機能など、このセクション全体で説明する2つの追加機能があります。

box-shadowプロパティの操作を開始するには、テキストエディタでstyles.cssを開きます。 .disclosure-alertセレクターブロックに、box-shadowプロパティを追加します。 text-shadowと同様に、x軸とy軸のオフセット値が必要であり、色が指定されていない場合は、colorプロパティ値が使用されます。この最初のbox-shadowでは、次のコードで強調表示されているように、オフセットを0に、ぼかしを0.5remに、色を暗いhsl(300, 40%, 5%)に設定します。ブロック：

styles.css

...
.disclosure-alert {
  ...
  border-radius: 1.5rem;
  text-shadow: 0 0 0.375rem hsl(300, 50%, 50%);
  box-shadow: 0 0 0.5rem hsl(300, 40%, 5%);
}
...

styles.cssへの変更を保存し、Webブラウザーでページを更新します。これで、コンテナから広がるほぼ黒い影があります。また、シャドウはborder-radiusプロパティで作成した曲線を尊重して従うことにも注意してください。次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

次に、styles.cssに戻り、box-shadowに2つの大きなグロー効果を追加して、より複雑な効果の作成を開始します。新しい各シャドウの間にコンマを追加し、それぞれのy軸オフセットが0.5remになるように設定します。次に、次のコードブロックで強調表示されているように、大きなぼかしを設定し、カラーパレットから青と紫の明るいバリエーションを使用します。

styles.css

...
.disclosure-alert {
  ...
  box-shadow: 0 0 0.5rem hsl(300, 40%, 5%),
              0 0.5rem 6rem hsl(200, 40%, 30%),
              0 0.5rem 10rem hsl(300, 40%, 30%);
}
...

これらの影の順序は重要です。ほぼ黒色の最初の影が新しい影の上に表示され、後続の各影が次の影の後ろに追加されます。

変更内容をstyles.cssに保存し、ブラウザでページを更新します。次の画像に示すように、複数のシャドウの組み合わせにより、独自の効果が得られます。

box-shadowプロパティのぼかし拡散機能を使用して、奥行き感を作り出すことができます。スプレッド値は、正の値と負の値の両方を受け入れます。負の値のスプレッドと強いオフセットおよびブラーを組み合わせると、ソースコンテナから遠く離れた感じのシャドウが作成されます。

まず、テキストエディタでstyles.cssに戻ります。 .disclosure-alertセレクターの暗い小さな影と大きな青い影の間に、コードブロックから次の強調表示されたCSSを追加します。

styles.css

...
.disclosure-alert {
  ...
  box-shadow: 0 0 0.5rem hsl(300, 40%, 5%),
              0 6rem 4rem -2rem hsl(300, 40%, 5%),
              0 0.5rem 6rem hsl(200, 40%, 30%),
              0 0.5rem 10rem hsl(300, 40%, 30%);
}
...

このシャドウセットへの追加により、x軸のオフセットは0に保たれますが、y軸は6remにかなり移動します。次に、ぼかしはグローほど大きくはありませんが、4remの適切なサイズです。次に、ブラースプレッド値になります。この場合は-2remに設定されています。スプレッドのデフォルト値は0で、これはコンテナと同じです。 -2remでは、スプレッドがコンテナから内側に凝縮して、奥行きのある視覚効果を作成します。

変更内容をstyles.cssに保存し、ブラウザでindex.htmlを更新してください。影は濃い紫色で、次の画像に示すように、メインのコンテンツボックスが月の表面からかなり上に浮かんでいるように感じます。

box-shadowの別の使用法は、ヘッダーのborderプロパティで以前に行ったように、わずかなハイライトとシャドウの斜角効果を作成することです。 borderの代わりにbox-shadowを使用する利点は、コンテンツフローのシフトを引き起こすボックスモデルに影響を与えないことです。 borderと組み合わせて使用することもできます。このエフェクトをborderで使用する場合、シャドウがコンテナ内に収まるように、insetの値をbox-shadowに追加する必要があります。

box-shadowでinset値の使用を開始するには、テキストエディタでstyles.cssを開きます。この効果はボタンに追加されるので、これらのスタイルを.button-primary、.button-primary:hover、.button-secondary、および.button-secondary:hoverに適用します。 text-shadowと同様に、これは0 1pxと0 -1pxのオフセットの組み合わせで構成されます。違いは、次のコードブロックで強調表示されているように、insetという単語を値の最初または最後に追加できることです。

styles.css

...
.button-primary {
  ...
  text-shadow: 0 1px hsl(200, 100%, 50%),
               0 -1px hsl(200, 100%, 5%);
  box-shadow: inset 0 1px hsl(200, 100%, 50%),
              inset 0 -1px hsl(200, 100%, 15%);
}
.button-primary:hover {
  ...
  text-shadow: 0 1px hsl(200, 100%, 45%),
               0 -1px hsl(200, 100%, 0%);
  box-shadow: inset 0 1px hsl(200, 100%, 45%),
              inset 0 -1px hsl(200, 100%, 10%);
}
.button-secondary {
  ...
  text-shadow: 0 1px hsl(200, 10%, 50%),
               0 -1px hsl(200, 10%, 5%);
  box-shadow: inset 0 1px hsl(200, 10%, 50%),
              inset 0 -1px hsl(200, 10%, 15%);
}
.button-secondary:hover {
  ...
  text-shadow: 0 1px hsl(200, 10%, 45%),
               0 -1px hsl(200, 10%, 0%);
  box-shadow: inset 0 1px hsl(200, 10%, 45%),
              inset 0 -1px hsl(200, 10%, 10%);
}

これらの変更をstyles.cssに保存してから、ブラウザでindex.htmlを更新してください。ボタンには、テキストと同様にハイライトとシャドウがあります。これをグラデーションの背景と組み合わせると、ボタンにシンプルでありながら際立った効果が生まれます。次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

最後に、ぼかしの広がりの値をはめ込みシャドウに適用することもできます。スプレッドはブラーの開始点をエッジから外側に移動しますが、insetを使用すると、スプレッドは開始点を内側に移動します。これは、insetのスプレッドに負の値が適用されると、シャドウが要素の表示領域から拡大することを意味します。スプレッドの外側への拡張により、短いグラデーションのように見えるシャドウが作成される場合があります。これにより、要素のコンテンツの下に影が適用されるときに、エッジが丸みを帯びている要素のような錯覚を引き起こす可能性があります。

この効果の作成を開始するには、テキストエディタでstyles.cssを開きます。 .legal-contentsクラスセレクターに移動し、box-shadowプロパティを追加します。この影は3つの影で構成されます。 1つ目は、コンテナ全体の内側に短い影を設定し、次の2つは、要素の上部と下部に細長い光の影を提供します。次のコードブロックで強調表示されているCSSは、これがどのように設定されているかを示しています。

styles.css

...
.legal-contents {
  ...
  font-family: "Times New Roman", serif;
  box-shadow: 0 0 0.25rem hsl(0, 0%, 80%) inset,
              0 4rem 2rem -4rem hsl(0, 0%, 85%) inset,
              0 -4rem 2rem -4rem hsl(0, 0%, 85%) inset;
}
...

変更内容をstyles.cssに保存し、ブラウザでページを更新してください。シャドウは、リーガルテキストをウィンドウのようにコンテナに設定して表示する効果を作成しています。影は、この要素に適用されたborderの色を強調するのにも役立ちます。次の画像は、これがブラウザでどのようにレンダリングされるかを示しています。

このセクションでは、box-shadowプロパティを実行します。また、box-shadowのブラースプレッドとinset機能を使用して、より多くのスタイリングオプションを使用できるようにしました。最後のセクションでは、outlineプロパティを実装してから、box-shadowを使用して、より用途の広いoutlineを作成します。

`outline`プロパティの使用

要素のエッジに影響を与える最後のプロパティは、outlineプロパティです。すべてのブラウザで、要素の:focus状態は、outlineプロパティを使用して作成されます。ただし、各ブラウザのデフォルトの:focusスタイルの実装は大幅に異なります。 outlineプロパティは、borderプロパティと似ていますが、2つの重要な違いがあります。方向プロパティのバリエーションがなく、ボックスモデルに影響を与えません。これら2つの違いの最後は、コンテンツフローを中断することなくアクティブな要素の視覚的なインジケーターを提供するため、:focusスタイルに最適です。

ブラウザのデフォルトの:focus状態を確認するには、ブラウザでindex.htmlを開きます。 TABキーを使用して、下のボタンの1つにフォーカスが合うまでページをナビゲートします。使用しているブラウザによっては、デフォルトの:focusスタイルが表示される場合と表示されない場合があります。たとえば、Firefoxは白い点線の輪郭を示していますが、明るい灰色の背景では認識できません。次の画像は、Firefox、Safari、およびChromeでデフォルトのフォーカススタイルがどのように表示されるかを左から右に示しています。

outlineプロパティを使用して独自の:focus状態のカスタマイズを開始するには、テキストエディタでstyles.cssを開きます。 .buttonクラスセレクターに移動し、outlineプロパティを追加します。

styles.css

...
.button {
  ...
}
.button:focus {
  outline: 0.25rem solid hsl(200, 100%, 50%);
}
...

borderプロパティと同様に、outlineの値には、幅、スタイル、および色の値が含まれます。フォーカス状態の目的は要素に注意を向けることであるため、幅は0.25remに増加します。これは、4pxと同等です。次に、スタイルをsolidに設定して、フォーカス状態がSafariやChromeの状態により近くなるようにします。最後に、hsl(200, 100%, 50%)で色を濃い青に設定します。

変更内容をstyles.cssに保存し、ブラウザに戻ってページを更新してください。この場合も、ブラウザはoutlineのレンダリング方法を決定します。次の画像は、Firefox、Safari、Chromeでこれらのスタイルが左から右にどのように表示されるかを示しています。

3つのブラウザすべてで、outlineプロパティの表示はまったく異なります。 Firefoxは、ボタンの丸みを帯びた形状全体をしっかりと保持します。 Safariは直角のボックスを作成しますが、ボタンの端に触れます。 ChromeはSafariに似ていますが、ボタンとoutlineの間にスペースが追加されます。

すべてのブラウザでFirefoxのように見えるスタイルを作成するには、outlineの代わりにbox-shadowを使用する必要があります。

よりカスタムな:focus状態の作成を開始するには、テキストエディタでstyles.cssファイルに戻ります。最初に行うことは、次のコードブロックで強調表示されているように、.button:focusセレクターのoutlineの値をnoneに変更して、ブラウザーのデフォルトのoutlineスタイルを無効にすることです。：

styles.css

...
.button {
  ...
}
.button:focus {
  outline: none;
}
...

次に、button-primary:hoverおよびbutton-secondary:hoverセレクターに移動し、次のコードブロックで強調表示されているように、コンマの後に:focus状態バリエーションを追加します。

styles.css

...

.button-primary {
  ...
}
.button-primary:hover,
.button-primary:focus {
  ...
}
.button-secondary {
  ...
}
.button-secondary:hover,
.button-secondary:focus {
  ...
}

最後に、各ボタンの:focus、.button-primary: focus、および.button-secondary:focusに対して2つの新しいセレクターを作成します。新しいセレクターブロック内に、対応する:hover, :focusと同じインセットシャドウを持つ新しいbox-shadowプロパティを追加します。次に、オフセットを使用してシリーズに別のシャドウを追加し、すべてを0に設定してぼかします。その後、0.25remのスプレッドを追加します。これにより、要素の周囲にぼやけのない実線が作成されます。最後に、両方のインスタンスに同じ色を追加します。次のコードブロックで強調表示されているCSSは、これがどのように記述されているかを示しています。

styles.css

...

.button-primary {
  ...
}
.button-primary:hover,
.button-primary:focus {
  ...
}
.button-primary:focus {
  box-shadow: inset 0 1px hsl(200, 100%, 45%),
              inset 0 -1px hsl(200, 100%, 10%),
              0 0 0 0.25rem hsl(200, 100%, 50%);
}
.button-secondary {
  ...
}
.button-secondary:hover,
.button-secondary:focus<^> {
  ...
}
.button-secondary:focus {
  box-shadow: inset 0 1px hsl(200, 10%, 45%),
              inset 0 -1px hsl(200, 10%, 10%),
              0 0 0 0.25rem hsl(200, 100%, 50%);
}

これらの変更をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。ここで、TABキーを使用してページ内を移動します。ブラウザに関係なく、ボタンの:focusスタイルは同じように見えます。次の画像は、box-shadowバージョンのアウトラインがページ全体とともにブラウザにどのように表示されるかを示しています。

この最後のセクションでは、outlineプロパティと、各ブラウザがさまざまな方法でそれを使用する方法を紹介しました。少なくとも、アクセシビリティには:focusインジケーターが必要であり、outlineプロパティがその役割を果たします。これを拡張して、スプレッド値が大きいbox-shadowを作成することにより、より高度で視覚的に一貫性のある:focusスタイルも作成しました。

結論

要素のエッジをスタイリングすることで、Webサイトのデザインに変化と注目を集めることができます。 borderプロパティは、コンテンツ間の定義と分離を提供するのに役立ちます。 border-radiusプロパティは、美的感覚を和らげ、デザインの姿勢を定義するのに役立ちます。テキストとボックスの影は深みをもたらし、コンテンツに注意を向けるのに役立ちます。最後に、outlineプロパティは、キーボードフォーカスのある要素に注意を向けるためのアクセス可能な方法を提供します。このチュートリアルでは、これらすべてのプロパティを使用して、視覚的に興味深く、使用可能なWebページを作成しました。これらの各プロパティとそれらをいつどのように使用するかを理解することは、あらゆる種類のフロントエンドインターフェイスの問題を解決し、新しいエクスペリエンスを作成するのに役立ちます。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。

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

序章

前提条件

ベースHTMLとCSSの設定

borderプロパティの使用

border-radiusを適用する

text-shadowプロパティの使用

要素にbox-shadowを追加する

outlineプロパティの使用

結論

`border`プロパティの使用

`border-radius`を適用する

`text-shadow`プロパティの使用

要素に`box-shadow`を追加する

`outline`プロパティの使用