著者は、テックファンドへの多様性寄付を、寄付のために書くプログラムの一環として選択しました。
導入
影、境界線、アウトラインを扱うことは、ウェブ開発の重要な要素であり、HTML要素やテキストアイテムの周りに視覚的な定義を提供できます。境界線と影の外観は、border、border-radius、box-shadow、text-shadow、およびoutlineの5つの主要なCSSプロパティを介して操作できます。影は奥行きを提供し、要素を際立たせます。一方、borderプロパティは、コンテンツ間の線形の区切りを作成したり、グリッドのスペースを定義したりするなど、さまざまな視覚的な機能を果たすことができます。border-radiusプロパティは、ボックスの角を丸くし、円形の形状を作成することさえできます。最後に、outlineは、コンテンツの流れを妨げることなく、borderプロパティの多くの機能を提供する、しばしば見落とされがちなプロパティです。
このチュートリアルでは、これらのプロパティを使用して、架空の宇宙旅行会社の法的通知を作成します。デモの間、エッジベースのプロパティを使用して、視覚的に豊かなコンテナを作成します。さらに、複数の影や異なるブラウザが特定のプロパティを異なる方法で実装するという、より複雑な値についての微妙なニュアンスにも配慮します。
前提条件
- CSSのカスケードと特異性機能に関する理解は、CSSスタイルをHTMLに適用する方法：カスケードと特異性を読むことで得ることができます。
- タイプセレクタ、組み合わせセレクタ、およびセレクタグループに関する知識は、CSSでスタイルを適用するためのHTML要素の選択方法で見つけることができます。
- CSSの
colorプロパティの理解。詳細については、CSSでカラー値を使用する方法を参照してください。 backgroundプロパティを使用したCSSグラデーションの知識。グラデーション背景を作成する経験を得るには、CSSでHTML要素に背景スタイルを適用する方法を確認してください。- ローカルマシンに保存されている空のHTMLファイルは、
index.htmlとして保存されています。お好みのテキストエディタやWebブラウザからアクセスできます。始めるには、HTMLプロジェクトのセットアップ方法チュートリアルを参照し、HTML要素の使用方法と理解方法に従って、HTMLをブラウザで表示する手順を実行してください。HTMLに慣れていない場合は、HTMLでウェブサイトを構築する方法シリーズ全体を試してみてください。
ベースHTMLとCSSの設定
このセクションでは、チュートリアル全体で記述するすべてのビジュアルスタイルのためのHTMLベースを設定します。また、styles.cssファイルを作成し、コンテンツのレイアウトを設定するスタイルを追加します。
index.htmlをテキストエディタで開きます。次に、次のHTMLをファイルに追加してください：
960px をシミュレートします。 ページにはスタイルを適用するコンテンツも必要です。法的テキストについては、スタイルの目的のためのサンプルコンテンツとして、Legal Ipsumからフィラーコピーを使用します。
テキストエディタで index.html に戻り、次のコードブロックから強調表示された HTML を追加します：
変更を index.html に保存し、次にウェブブラウザを開きます。 ファイル メニュー項目を選択し、開く オプションを選択して、ブラウザに index.html ファイルをロードします。次の画像は、この HTML がブラウザでどのようにレンダリングされるかを示しています：
index.html と同じディレクトリに styles.css という新しいファイルを作成し、それをテキストエディタで開きます。このファイルには、チュートリアル全体で使用されるすべてのスタイルが含まれます。最初のスタイルセットは、構築していく一般的な外観を適用します。次のコードブロックから CSS を styles.css ファイルに適用します：
このファイルのスタイリングは、ページの初期レイアウトを設定します。中央に配置された法的な開示、間隔を空けたボタン、および線形グラデーションでレンダリングされたボタン、背景として使用される月の画像が含まれます。続行する前に、styles.cssファイルを保存してください。
bodyのルールセットのbackgroundプロパティにリンクされた画像を表示するためには、月の背景画像が必要です。まず、index.htmlファイルと同じフォルダにimagesディレクトリを作成してください。
ブラウザを使用して、このファイルを新しく作成したimagesディレクトリにダウンロードするか、以下のcurlコマンドを使用してコマンドラインからダウンロードします。
次に、ブラウザに戻って更新してください。ブラウザは、ページの内容にスタイルをレンダリングおよび適用します。以下の画像は、フルページがどのようにレンダリングされるかを示しています。
コンテンツの長さが非常に長いページになっています。これは法的なコピーとして意図されているため、.legal-contentsのコンテンツはスクロール可能なスペースになります。
スクロール可能な領域を作成するには、テキストエディターでstyles.cssを開きます。次に、法的コンテンツの高さを調整します。
このコードでは、.legal-contentsセレクターブロック内でheightプロパティを作成し、その値を50vhに設定しました。これは、ビューポートウィンドウの高さの50％を意味します。また、max-heightプロパティを作成し、その値を20remに設定しました。最後に、overflowプロパティを追加し、値をautoに設定しました。これにより、コンテンツがコンテナを溢れる場合にスクロールバーが作成されます。
これらの追加をstyles.cssファイルに保存し、ブラウザに戻ってindex.htmlを更新してください。ページとメインコンテナの全高が縮小されました。今、Legal Ipsumコピーは、それぞれの指定されたコンテナ内でスクロールできるようになりました。次のアニメーションで示されています:
このセクション全体で、チュートリアルの残りの部分で使用する主要なHTMLをセットアップしました。また、overflowプロパティを使用してスクロール可能なスペースをセットアップしました。次のセクションでは、これらのコンテナに境界を適用するためにborderプロパティを使用します。
borderプロパティの使用
borderプロパティは、要素の端にスタイルを適用する元の方法の1つです。このプロパティは、コンテナの外周に任意の色の線を適用します。プロパティの値は、厚さ、スタイル、および色の3つのコンポーネントで構成されます。borderプロパティは、これらの値を要素の四辺すべてに適用します。 borderの方向変化であるborder-topプロパティなど、個々の辺を指定することができます。
borderプロパティで作業を開始するには、テキストエディタでstyles.cssを開き、.disclosure-alertクラスセレクタに移動します。セレクタブロック内に、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を保存し、次にウェブブラウザでindex.htmlを開きます。メインコンテンツコンテナには、今では月の背景画像にオーバーレイされているものとして最も顕著な細い黒い枠が付きます。次の画像は、メインコンテンツ領域でborderがどのように表示されるかを示しています：
次に、要素にハイライトと影を適用して奥行き感を作成するためにborderプロパティを使用できます。これは、背景色よりも明るい方向のborderを使用して、隣接する側にはより暗い色を使用することで達成できます。
テキストエディターでstyles.cssに戻り、.disclosure-headerクラスセレクターブロックに移動します。backgroundプロパティのlinear-gradient()は、やや暗いシェードに移行する暗紫のグラデーションを定義しています。グラデーション単体よりも深さを作成するには、次のコードでボーダーを調整します：
開始グラデーション値よりもやや明るい値の1px solid hsl(300, 50%, 35%)を持つborder-topプロパティを追加しました。次に、終了グラデーションよりもわずかに暗い1px solid hsl(300, 50%, 5%)の値を持つborder-bottomプロパティを作成しました。
styles.cssを保存し、ブラウザに戻ってindex.htmlを更新します。紫色のヘッダー背景には、ヘッダーの上部をわずかに走る紫色のハイライトと、下部にわずかな影が付いています。次の画像は、ブラウザでの表示方法を示しています：
borderは短縮プロパティであるため、追加の長手のプロパティを追加できます。2つのボタンクラスの幅とスタイルを定義するborderを適用でき、個々のクラスにborder-colorを適用できます。
border-colorを使用するには、テキストエディタでstyles.cssを開きます。 .buttonのセレクタブロックに、値が1px solidのborderプロパティを追加し、.button-primaryと.button-secondaryにborder-colorプロパティを追加します：
これにより、両方のボタンに1pxの幅とsolidのスタイルのボーダーが定義されます。その後、.button-primary、.button-secondary、およびそれに関連する:hover状態のセレクタにカスタムカラーのborder-colorプロパティを追加しました。
styles.cssにこれらの変更を保存して、ウェブブラウザでページを更新します。次の画像に示すように、ボタンにはマッチングするより暗い色のボーダーによる少し明確な定義が追加されます：
最後に、各border方向も短縮形です。つまり、-width、-style、および-colorは、それぞれ方向プロパティに適用できます。たとえば、長手のプロパティborder-right-colorは、右側のボーダーにのみ色を適用します。
これらの方向指定ロングハンドborderプロパティを使用するには、テキストエディターでstyles.cssに戻ります。 .legal-contentsセレクターブロックに移動し、すべての4つのボーダーの幅とスタイルを設定し、その後、各辺の色をカスタマイズします：
このコードでは、ファイルの末尾に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プロパティがその仕事をする以前から存在していました。このプロパティは任意の数値単位またはパーセンテージ値を受け入れることができ、marginやpaddingプロパティと同様にショートハンドプロパティです。つまり、各角を必要に応じて個別に調整することができます。
border-radiusプロパティを使用する準備をするには、テキストエディタでstyles.cssを開きます。次に、.disclosure-alertセレクタブロックとborder-radiusプロパティに移動します。そして、値を1.5remに設定します。これにより、その値がプロパティのすべての角に適用されます。次のコードブロックで強調表示されているCSSは、この方法がどのように書かれているかを示しています：
styles.cssにこの追加を保存し、ウェブブラウザでindex.htmlを開いてまたはリフレッシュしてください。上部の2つの角は尖ったままであり、下部の2つの角のみが角丸に見えます。次の画像は、ブラウザでのレンダリングを示しています:
二つの角が丸く表示されているのは、ウェブ上での子孫要素の相互作用の仕方に起因しています。ブラウザは、コンテンツを表示したままにする方針を採ります。 .disclosure-alert は四つの丸い角を持っていますが、.disclosure-header が要素内にあり丸い角を持っていないため、丸い角が重なり合います。素早い修正方法は、.disclosure-alert に overflow: hidden を追加することで、親コンテナをクリッピングし、子孫コンテナとコンテンツをクリップすることです。ただし、この方法は、必要なコンテンツが読み取りにくくなったり見えなくなったりする可能性があります。より良い方法は、.disclosure-header クラスに border-radius を適用して、祖先の角の曲線に一致させることです。
重なり合う角を調整するには、テキストエディターで styles.css に戻ります。 .disclosure-header セレクタブロックに移動して、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小さくする必要があります。次のコードブロックで強調表示されているように、border-radiusの値1.5remを1.375remに変更します：
この変更をstyles.cssに保存して、ウェブブラウザでページをリフレッシュしてください。白い部分がなくなり、2つの要素の曲線が適切な場所で合流します。次に、これらの曲線がどのように整列しているかを示すズームインされたスクリーンショットが次に示されています：
最後に、メインコンテナの下部にあるボタンに角丸を適用します。これらのボタンはピルの形状を持ち、長くてフラットな上部と下部、そして完全に丸い側面を持ちます。これを達成するには、border-radiusの値を要素の高さより大きな単位ベースの値にする必要があります。
ピル形のボタンを作成するには、テキストエディタでstyles.cssを開きます。 .button セレクタブロック内に、border-radius プロパティを追加し、値を 2rem に設定します。これは、計算された高さよりも大きい限り任意の数値であることができます。これは、font-size、line-height、padding、およびborder-widthの組み合わせで、要素の全体の高さに影響を与えることがあります。次のコードブロックで強調されているCSSに、このプロパティを追加する場所が示されています：
このアプローチについて注意すべき点が2つあります。1つ目は、この要素にheight値が設定されていないことです。 height値の設定は避けるべきです。コンテンツがコンテナの外側に流れる可能性があるためです。固定のheightを避けることで、ボタンは合計コンテンツに合わせて拡張できます。2つ目は、パーセントベースの値では正しく機能しないことです。 border-radiusプロパティのパーセントベースの値は、高さと幅のパーセントを曲線にします。これにより、丸みのある角ではなく、楕円形になります。
styles.cssに変更を保存し、ブラウザに戻ってindex.htmlを更新します。ページは、次の画像に示されているように、2つの楕円形のピル形ボタンをレンダリングします：
このセクションでは、複数の要素に丸い角を適用するためにborder-radiusプロパティを使用し、border-radiusが子要素が曲線スペースから離れるのを防ぐことはできないことを発見しました。また、複数の丸い要素が重なったときに要素の幅に一致するborder-radiusの値を調整しました。次のセクションでは、text-shadowプロパティを使用してテキストコンテンツにドロップシャドウを適用します。
text-shadowプロパティの使用
テキストに影を付けることは、日常のウェブ開発で多くの用途があります。影は、奥行き、発光効果、またはテキストが見落とされるかもしれない場所でテキストを目立たせるのに役立ちます。このセクションでは、さまざまな視覚効果を作成するために、複数の要素にtext-shadowを適用します。
text-shadowプロパティは、最大で4つの値で構成されています: x軸オフセット、y軸オフセット、ぼかし半径、および色。例えば、値は次のようになります：2px 4px 10px red。これら4つの値のうち、オフセット値だけが必須です。影の色はデフォルトでテキストのcolorです。
text-shadowを使って作業を始めるには、ヘッダーに発光効果を作成します。テキストエディタでstyles.cssを開き、.disclosure-headerクラスセレクタに移動します。セレクタブロック内に、次のtext-shadowプロパティを追加します：
A glow effect means the color will emanate from every edge of the text, so the x- and y-axis offset values here are set to 0. You set the blur for the glow to 0.375rem (equivalent to 6px) to give a subtle halo of color to the text. Lastly, the color value was set to a bit darker than the color property: hsl(300, 50%, 50%).
次に、複数の影をテキスト要素に配置することで、テキストにエンボス効果を作成することができます。この効果は、オブジェクトの下に明るい色の影を配置し、上には暗い色の影を配置することで実現されます。
エンボス効果を作成するには、テキストエディタで styles.css に戻ります。この効果は、コンテナの下部にあるボタンに追加されます。 .button-primary、.button-primary:hover、.button-secondary、および .button-secondary:hover セレクタに、text-shadow プロパティを追加します。値のハイライトされたCSSを次のコードブロックで確認してください:
最初の影は、明るい下部の内側ハイライトです。これは 0 1px のオフセットで行われ、次に背景グラデーションの色のより明るいバージョンが使用されます。次に、テキストの上に影を作成し、0 -1px のオフセットで、影を 1px 上に引き上げ、背景色のより暗いバリエーションが使用されます。
これらの変更を styles.css に保存し、次にウェブブラウザでページをリフレッシュします。ボタン内のテキストには、テキストの下にわずかなハイライトが付加され、テキストの上にわずかな影が付加されます。text-shadow 値の組み合わせにより、次のイメージに示すように、エンボス効果が作成されます:
このセクションでは、いくつかの要素にtext-shadowプロパティを適用しました。見出しにはグローエフェクトを、ボタンには複数の影を使ったエンボス効果を作成しました。次のセクションでは、HTML要素にbox-shadowプロパティを適用します。
要素に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の変更を保存して、ウェブブラウザーでページを更新します。コンテナーからほぼ黒い影が広がっているのが見えるでしょう。また、border-radiusプロパティで作成した曲線に影が尊重され、追従していることにも注目してください。次の画像は、ブラウザーでのレンダリングを示しています:
次に、styles.cssに戻り、box-shadowに2つの追加の大きな発光効果を追加して、より複雑な効果を作成します。各新しい影の間にカンマを追加し、それぞれのy軸オフセットを0.5remに設定します。次のコードブロックで強調されているように、ブルーとパープルのカラーパレットのより軽いバリエーションを使用し、大きなぼかしを設定します:
これらの影の順序は重要です。ほぼ黒い色の最初の影が新しい影の上に表示され、それぞれの後続の影が次の影の後ろに追加されます。
styles.cssの変更を保存して、ウェブブラウザーでページを更新します。次の画像に示すように、複数の影の組み合わせはユニークな効果を生み出します:
box-shadowプロパティのぼかしスプレッド機能は、奥行きの感覚を作成するために使用できます。スプレッド値は、正の値と負の値の両方を受け入れます。強いオフセットとぼかしを組み合わせた負の値のスプレッドは、ソースコンテナから遠く離れた影を作成します。
始めに、テキストエディターでstyles.cssに戻ります。.disclosure-alertセレクターの暗い小さな影と大きな青い影の間に、次のハイライトされたCSSを追加します。
このシャドウセットの追加では、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にこれらの変更を保存して、ブラウザでindex.htmlをリフレッシュしてください。ボタンにはテキストと同様のハイライトと影が付いています。これにグラデーションの背景が加わると、ボタンにシンプルでありながらも区別された効果が生まれます。次の画像は、ブラウザでのレンダリング方法を示しています：
最後に、insetシャドウにブラー拡散値を適用することもできます。拡散は、ブラーの開始点を端から外側に移動させますが、insetを使用すると、拡散は開始点を内側に移動させます。つまり、insetの拡散に負の値が適用されると、シャドウが要素の表示領域の外に拡張されます。拡散の外側の拡張は、短いグラデーションのように見えるシャドウを作成できます。これにより、シャドウが要素のコンテンツの下に適用されるため、要素の端に丸みがあるように見える錯覚が生まれます。
この効果を作成するには、テキストエディターでstyles.cssを開きます。 .legal-contentsクラスセレクターに移動し、box-shadowプロパティを追加します。 この影は3つの影で構成されます。 最初の影はコンテナ全体の内側に短い影を設定し、次の2つの影は要素の上部と下部に長い光の影を提供します。 次のコードブロックで強調表示されているCSSは、これがどのように設定されているかを示しています：
変更をstyles.cssに保存し、ブラウザーでページを更新します。 影は、法的テキストがコンテナに窓のように設定されている効果を作成しています。 これらの影は、この要素に適用されたborderの色を強調するのにも役立ちます。 次の画像は、これがブラウザーでどのようにレンダリングされるかを示しています：
このセクションでは、box-shadowプロパティを実践しました。 また、box-shadowのぼかしスプレッドとinset機能を使用して、より多くのスタイリングオプションを可能にしました。 最後のセクションでは、outlineプロパティを実装し、outlineをより汎用性のあるものにするためにbox-shadowを使用します。
outlineプロパティを使用する
最後に要素のエッジに影響するプロパティはoutlineプロパティです。すべてのブラウザで、要素の:focus状態はoutlineプロパティを使用して作成されます。ただし、各ブラウザのデフォルトの:focusスタイルの実装は大きく異なります。outlineプロパティはborderプロパティに類似していますが、2つの主要な違いがあります。方向プロパティのバリエーションがないこと、およびボックスモデルに影響を与えないことです。これら2つの違いのうち、後者はコンテンツフローを妨げることなく、アクティブな要素の視覚的な指標を提供するため、:focusスタイルに理想的です。
:focus状態のブラウザデフォルトを観察するには、ブラウザでindex.htmlを開きます。ページをナビゲートするにはTABキーを使用し、下部のボタンのいずれかにフォーカスがあるまで移動します。使用しているブラウザによっては、デフォルトの:focusスタイルが表示されないことがあります。たとえば、Firefoxでは白い点線のアウトラインが表示されますが、薄い灰色の背景に対しては認識できません。次の画像は、Firefox、Safari、Chromeでデフォルトのフォーカススタイルがどのように表示されるかを左から右に示しています：
outlineプロパティを使用して独自の:focus状態をカスタマイズするには、テキストエディタでstyles.cssを開きます。.buttonクラスセレクタに移動し、outlineプロパティを追加します。
borderプロパティと同様に、outlineの値には幅、スタイル、および色の値が含まれます。フォーカス状態の目的は要素に注意を引くことなので、幅は0.25rem、つまり4pxに増加します。次に、スタイルをsolidに設定して、フォーカス状態をSafariとChromeにより似たものにします。最後に、色を深い青にhsl(200, 100%, 50%)で設定します。
変更をstyles.cssに保存し、ブラウザに戻りページをリフレッシュします。再び、ブラウザがoutlineをどのようにレンダリングするかが決定されます。以下の画像は、左から右にFirefox、Safari、Chromeでこれらのスタイルがどのように見えるかを示しています：
すべてのブラウザで、outlineプロパティはかなり異なる表示されます。Firefoxはボタンの丸い形全体にしっかりとフィットします。Safariは直角のボックスを作成しますが、ボタンの端に触れます。ChromeはSafariに似ていますが、ボタンとoutlineの間に余分なスペースを追加します。
すべてのブラウザでFirefoxのように見えるスタイルを作成するには、outlineの代わりにbox-shadowを使用する必要があります。
よりカスタムな:focus状態を作成するには、テキストエディタでstyles.cssファイルに戻ります。最初に行うべきことは、.button:focusセレクターのoutlineの値をnoneに変更してブラウザのデフォルトのoutlineスタイルを無効にすることです。
次に、button-primary:hoverおよびbutton-secondary:hoverセレクタに移動し、:focus状態の変化を示すカンマに続いて、次のコードブロックで強調されているように追加します：
最後に、各ボタンの:focusに対して2つの新しいセレクタを作成します。.button-primary:focusと.button-secondary:focus。新しいセレクタブロック内に、同じく:hover, :focusと同じ挿入シャドウからbox-shadowプロパティを追加します。次に、オフセットとぼかしをすべて0に設定したシャドウをシリーズに追加します。その後、0.25remのスプレッドを追加し、要素の周りに実線でボーダーを作成します。最後に、両方のインスタンスに同じ色を追加します。次のコードブロックで強調されているCSSに示すように、これを記述します：
styles.cssにこれらの変更を保存し、index.htmlを更新するためにブラウザに戻ります。ページ内をナビゲートするために:focusスタイルがどのブラウザでも同じように表示されます。次の画像は、ブラウザでのbox-shadowバージョンのアウトラインが表示される方法と、ページ全体を示しています：
この最後のセクションでは、outlineプロパティと、各ブラウザがそれを異なる方法で使用する方法について説明しました。アクセシビリティのために、:focusインジケータが少なくとも必要ですが、outlineプロパティを使用すると、その仕事を行うことができます。これについてさらに詳しく説明し、大きなスプレッド値を持つbox-shadowを作成することで、より高度で視覚的に一貫した:focusスタイルを作成しました。
結論
要素のエッジをスタイリングすることによって、ウェブサイトのデザインに変化と注目を与えることができます。 border プロパティは、コンテンツ間の定義と区別を提供するのに役立ちます。 border-radius プロパティは、美的な要素を柔らかくし、デザインの姿勢を定義するのに役立ちます。 テキストやボックスに影をつけることで、奥行きが生まれ、コンテンツに注目が集まります。 最後に、outline プロパティは、キーボードフォーカスを持つ要素に注目を集めるアクセシブルな方法を提供します。 このチュートリアルでは、これらのプロパティをすべて使用して、視覚的に興味深く、使いやすいウェブページを作成しました。 これらのプロパティを理解し、どのようにしていつ使用するかを理解することで、さまざまなフロントエンドインターフェイスの問題を解決し、新しい体験を作成するのに役立ちます。
より多くのCSSチュートリアルを読みたい場合は、How To Style HTML with CSS シリーズの他のチュートリアルを試してみてください。