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をファイルに追加します。
<!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を追加します。
<!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
ファイルに適用します。
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
を開きます。 次に、次のコードを使用して合法的なコンテンツの高さを調整します。
...
.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
プロパティを追加します。
...
.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()
は、少し暗い色合いに移行する濃い紫色のグラデーションを定義します。 グラデーションだけよりも奥行きを作成するには、次のコードで境界線を調整します。
...
.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
:
...
.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つの境界線すべての幅とスタイルを設定してから、各辺の色をカスタマイズします。
...
.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は、これがどのように記述されているかを示しています。
...
.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
になります。
...
.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
に変更します。
...
.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]