↩ テクノロジー開発非公開: CSS で二重枠を作成する 6 つの方法

CSS で二重枠を作成する 6 つの方法

境界線は、ユーザーの注意を引いたり、Web ページ内のコンテンツを分離したりできるため、Web デザイン/開発において非常に重要です。 HTML 要素の 4 つの境界線をすべて同じにする場合は、border の短縮表現を使用できます。

一方、境界線の色、境界線のスタイル、および境界線の幅の手書きプロパティを使用して、すべての境界線を異なる/一意にすることもできます。境界線の色を指定する場合は、境界線の色を使用し、境界線の幅を使用して境界線の幅を決定し、border-style プロパティを使用して境界線を破線、二重、実線のいずれにするかを指定します。

border-block-start や border-top などのプロパティを使用して、個々の境界線をターゲットにすることもできます。

二重境界線とは、HTML 要素を 2 本の平行な線で囲むことです。 2 本の線は隙間で区切られており、透明のままにすることも、画像や背景色で埋めることもできます。

たとえば、サインアップ/ログインボタンを二重枠で囲むことができます。

コンテンツ 表示

なぜ二重枠なのでしょうか？

分離: 二重枠を使用して、さまざまな HTML 要素を分離することで、Web ページの読みやすさと読みやすさを向上させることができます。たとえば、Web ページ上のヘッダー、本文、フッターなどの要素を二重枠で区切ることができます。
視覚的な魅力: 二重枠に異なる/対照的な色を使用して、さまざまな要素をより視覚的に魅力的にすることができます。
階層を表示: 二重枠を使用すると、Web ページ上の重要な要素とそれほど重要でない要素を明確に区別できます。
簡単なカスタマイズ: 二重枠を使用して、パーソナライズされたユニークなデザインを作成できます。たとえば、各線の色や幅を変更できます。
強調: 二重枠プロパティを使用すると、Web ページ上の特定のリンクやボタンに注意を向けることができます。

CSS で二重枠を作成するには、次の方法を使用できます 。

ボーダースタイルプロパティの使用

border-style プロパティは、要素の 4 つの境界線のスタイルを設定します。この場合、double キーワードを使用してスタイルを設定します。 double キーワードを使用すると、2 つの境界線の間に自動パディングが作成されます。

デモの目的で、境界線の幅を 15 ピクセルに設定します。また、境界線の色を赤に選択し、境界線のスタイルを二重として示します。

HTMLコード:

 <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

      <div class="box"> <h2> Border Property</h2>  </div>

  </body>

</html>

CSSコード:

 *{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border-width: 15px;

    border-color: red;

    border-style: double;

  }

出力は次のようになります。

Linear-gradient() 関数の使用

この関数は、背景画像として linear gradient を設定します。その結果、2 つの色が直線に沿って徐々に変化します。キーワード to 使用して、グラデーションラインの開始点をマークします。順序が指定されていない場合、デフォルト値は to bottom です。

以下のコードは、ボックスの境界線の幅を 7 ピクセルに設定します。次に、ボックスの各辺の背景プロパティに線形グラデーションを指定できます。

HTMLコード:

 <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

      <div class="box"> <h2>linear-gradient() function</h2>  </div>

  </body>

</html>

CSSコード:

 *{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 350px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border: 7px solid rgb(36, 85, 7);

    background: linear-gradient(to top, #8f0404 7px, transparent 1px), 

    linear-gradient(to bottom, #8f0404 7px, transparent 1px),  

    linear-gradient(to left, #8f0404 7px, transparent 1px),  

    linear-gradient(to right, #8f0404 7px, transparent 1px);  

  }

出力は次のようになります。

アウトラインプロパティの使用

outline 、要素の境界線の外側に引かれる線です。これにより二重境界線効果が得られ、アウトラインと単一境界線を使用できるようになります。アウトラインプロパティとアウトラインプロパティの間にスペースを追加するには、outline-offset を使用する必要があります。

HTMLコード:

 <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

      <div class="box"> <h2>Outline Property</h2>  </div>

  </body>

</html>

CSSコード:

 *{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border: 5px solid red; 

    outline: 5px solid blue;

    outline-offset: -20px;

  }

レンダリングされたページは次のように表示されます。

box-shadow プロパティの使用

box-shadow プロパティは、要素のフレームの周囲に影効果を追加します。複数のボックスシャドウ効果をカンマで区切って指定できます。まず、オフセットとブラーの設定がゼロであることを確認してから、シャドウを適切なサイズに設定します。

HTML:

 <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

      <div class="box"> <h2>Box Shadow Property</h2>  </div>

  </body>

</html>

CSSコード:

 *{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    box-shadow:

    0 0 0 5px red,

    0 0 0 10px green;

  }

レンダリングされたページは次のように表示されます。

背景クリッププロパティの使用

background-clip プロパティは、要素内で背景をどこまで拡張するかを決定します。拡張子は、ボーダーボックス、パディングボックス、またはコンテンツボックスに配置できます。

HTMLコード:

 <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

      <div class="box"> <h2>Background-Clip Property</h2>  </div>

  </body>

</html>

CSSコード:

 *{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border: 7px solid rgb(36, 85, 7);

  padding: 5px;

  background-clip: content-box;

  background-color: rgb(238, 152, 130);

}

レンダリングされたページは次のように表示されます。

疑似要素の使用

::before および ::after セレクターで表される疑似要素を使用すると、Web デザイナーはコードにマークアップを追加せずに HTML ドキュメントの一部をスタイル設定できます。

次のコードを使用して、疑似要素を使用して二重枠を作成する方法を説明します。

HTMLドキュメント

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

      <div class="box"> <h2>pseudo property</h2>  </div>

  </body>

</html>

CSS

 *{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 150px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    background-color: brown;

  }

  box{

    background-color: rebeccapurple;

    position: relative;

    border: 8px solid red;

  }

  .box::before{

  content: " ";

  position: absolute;

  top: 5px;

  left: 5px;

  right: 5px;

  bottom: 5px;

  border: 8px solid green;

  border-width: 6px;

  border-color: green white green white;

  width: 150px;

  height: 100px;

}

レンダリングされたページは次のように表示されます。

二重枠 CSS の実際の例

二重枠 CSS プロパティは多くの Web サイトで使用されています。二重枠プロパティを最大限に活用するには、他の CSS プロパティと組み合わせる必要があります。以下は、二重境界線が実際に使用されている 2 つの例です。

Amazonの「カート」ボタン

Amazon は、電子商取引分野の最大手の 1 つです。カートボタンには、見た目の美しさを高める二重枠 CSS があり、ユーザーに行動を促します。

ユーザーが「カート」ボタンの上にマウスを移動すると、二重枠が表示されます。 Amazon のナビゲーションメニューにカーソルを置くと、境界線も表示されます。

メールチンパンジーのボタン

Mailchimp は、ユーザーがキャンペーンを作成、開始、追跡できる電子メールマーケティングサービスです。その Web サイトでは、さまざまなセクションで二重枠効果が使用されています。サインアップボタンとログインボタンには二重枠があり、ユーザーが閲覧するときに緊迫感を「生み出す」ことができます。

これらのボタンの下側の境界線は、ユーザーがカーソルを通過させると太くなります。

二重枠 CSS 効果を使用する場合のベストプラクティス

二重 CSS を使用していると、夢中になってしまいがちです。最終的な目標は、ユーザーが簡単に移動し、サイト上の主要な領域を強調できるようにすることです。次のベストプラクティスに従ってください。

一貫したスタイルを使用する: 二重枠線を使用する場合は、すべての要素でスタイルが一貫していることを確認してください。たとえば、ナビゲーション、CTA、サインアップ/ログインボタンに二重枠を使用できます。可能であれば、二重枠のある要素全体で同じ色と余白の太さを確保してください。
これらの二重枠がさまざまなデバイスで機能することを確認します。 私たちは、人々がスマートフォン、PC、タブレットから Web サイトを閲覧する世界に住んでいます。さまざまな画面サイズで二重枠が期待どおりに表示されることをテストします。
慎重に使用する: 特定の CSS 効果を初めて発見した後は、過剰に使用したくなるかもしれません。ただし、ダブル CSS は Web ページ上のさまざまな要素に適しています。このプロパティは、デザインに価値を加える領域でのみ使用してください。

結論

CSS で二重枠を作成するために使用できる主な方法を強調しました。どのアプローチを選択するかは、二重枠で何を達成したいのか、そして好みによって異なります。同じページ上で 1 つの二重枠スタイルを使用するか、複数の二重枠スタイルを組み合わせて使用するかを決定できます。

カスケードスタイルシートを詳しく理解するには、これらの CSS リソースを確認してください。

「 CSS で二重枠を作成する 6 つの方法」についてわかりやすく解説！絶対に観るべきベスト2動画

HTML＆CSSステッチ風見出しの作り方！！ドット風や二重線の作り方も！

https://www.youtube-nocookie.com/watch?v=pwUiZlGamE4&pp=ygU1IENTUyDjgafkuozph43mnqDjgpLkvZzmiJDjgZnjgosgNiDjgaTjga7mlrnms5UmaGw9SkE%3D

HTML＆CSSステッチ風見出しの作り方！！ドット風や二重線の作り方も！ (https://www.youtube-nocookie.com/watch?v=pwUiZlGamE4&pp=ygU1IENTUyDjgafkuozph43mnqDjgpLkvZzmiJDjgZnjgosgNiDjgaTjga7mlrnms5UmaGw9SkE%3D)

Learn CSS height and width in 6 minutes! 📏

https://www.youtube-nocookie.com/watch?v=QctF-i4-GuM&pp=ygU1IENTUyDjgafkuozph43mnqDjgpLkvZzmiJDjgZnjgosgNiDjgaTjga7mlrnms5UmaGw9SkE%3D

Learn CSS height and width in 6 minutes! 📏 (https://www.youtube-nocookie.com/watch?v=QctF-i4-GuM&pp=ygU1IENTUyDjgafkuozph43mnqDjgpLkvZzmiJDjgZnjgosgNiDjgaTjga7mlrnms5UmaGw9SkE%3D)

開発

境界線は、ユーザーの注意を引いたり、Web ページ内のコンテンツを分離したりできるため、Web デザイン/開発において非常に重要です。 HTML 要素の 4 つの境界線をすべて同じにする場合は、border の短縮表現を使用できます。

一方、境界線の色、境界線のスタイル、および境界線の幅の手書きプロパティを使用して、すべての境界線を異なる/一意にすることもできます。境界線の色を指定する場合は、境界線の色を使用し、境界線の幅を使用して境界線の幅を決定し、border-style プロパティを使用して境界線を破線、二重、実線のいずれにするかを指定します。

border-block-start や border-top などのプロパティを使用して、個々の境界線をターゲットにすることもできます。

二重境界線とは、HTML 要素を 2 本の平行な線で囲むことです。 2 本の線は隙間で区切られており、透明のままにすることも、画像や背景色で埋めることもできます。

たとえば、サインアップ/ログインボタンを二重枠で囲むことができます。

コンテンツ 表示

なぜ二重枠なのでしょうか？

分離: 二重枠を使用して、さまざまな HTML 要素を分離することで、Web ページの読みやすさと読みやすさを向上させることができます。たとえば、Web ページ上のヘッダー、本文、フッターなどの要素を二重枠で区切ることができます。
視覚的な魅力: 二重枠に異なる/対照的な色を使用して、さまざまな要素をより視覚的に魅力的にすることができます。
階層を表示: 二重枠を使用すると、Web ページ上の重要な要素とそれほど重要でない要素を明確に区別できます。
簡単なカスタマイズ: 二重枠を使用して、パーソナライズされたユニークなデザインを作成できます。たとえば、各線の色や幅を変更できます。
強調: 二重枠プロパティを使用すると、Web ページ上の特定のリンクやボタンに注意を向けることができます。

CSS で二重枠を作成するには、次の方法を使用できます 。

ボーダースタイルプロパティの使用

border-style プロパティは、要素の 4 つの境界線のスタイルを設定します。この場合、double キーワードを使用してスタイルを設定します。 double キーワードを使用すると、2 つの境界線の間に自動パディングが作成されます。

デモの目的で、境界線の幅を 15 ピクセルに設定します。また、境界線の色を赤に選択し、境界線のスタイルを二重として示します。

HTMLコード:

 <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

      <div class="box"> <h2> Border Property</h2>  </div>

  </body>

</html>

CSSコード:

 *{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border-width: 15px;

    border-color: red;

    border-style: double;

  }

出力は次のようになります。

Linear-gradient() 関数の使用

この関数は、背景画像として linear gradient を設定します。その結果、2 つの色が直線に沿って徐々に変化します。キーワード to 使用して、グラデーションラインの開始点をマークします。順序が指定されていない場合、デフォルト値は to bottom です。

以下のコードは、ボックスの境界線の幅を 7 ピクセルに設定します。次に、ボックスの各辺の背景プロパティに線形グラデーションを指定できます。

HTMLコード:

 <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

      <div class="box"> <h2>linear-gradient() function</h2>  </div>

  </body>

</html>

CSSコード:

 *{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 350px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border: 7px solid rgb(36, 85, 7);

    background: linear-gradient(to top, #8f0404 7px, transparent 1px), 

    linear-gradient(to bottom, #8f0404 7px, transparent 1px),  

    linear-gradient(to left, #8f0404 7px, transparent 1px),  

    linear-gradient(to right, #8f0404 7px, transparent 1px);  

  }

出力は次のようになります。

アウトラインプロパティの使用

outline 、要素の境界線の外側に引かれる線です。これにより二重境界線効果が得られ、アウトラインと単一境界線を使用できるようになります。アウトラインプロパティとアウトラインプロパティの間にスペースを追加するには、outline-offset を使用する必要があります。

HTMLコード:

 <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

      <div class="box"> <h2>Outline Property</h2>  </div>

  </body>

</html>

CSSコード:

 *{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border: 5px solid red; 

    outline: 5px solid blue;

    outline-offset: -20px;

  }

レンダリングされたページは次のように表示されます。

box-shadow プロパティの使用

box-shadow プロパティは、要素のフレームの周囲に影効果を追加します。複数のボックスシャドウ効果をカンマで区切って指定できます。まず、オフセットとブラーの設定がゼロであることを確認してから、シャドウを適切なサイズに設定します。

HTML:

 <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

      <div class="box"> <h2>Box Shadow Property</h2>  </div>

  </body>

</html>

CSSコード:

 *{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    box-shadow:

    0 0 0 5px red,

    0 0 0 10px green;

  }

レンダリングされたページは次のように表示されます。

背景クリッププロパティの使用

background-clip プロパティは、要素内で背景をどこまで拡張するかを決定します。拡張子は、ボーダーボックス、パディングボックス、またはコンテンツボックスに配置できます。

HTMLコード:

 <!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

      <div class="box"> <h2>Background-Clip Property</h2>  </div>

  </body>

</html>

CSSコード:

 *{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border: 7px solid rgb(36, 85, 7);

  padding: 5px;

  background-clip: content-box;

  background-color: rgb(238, 152, 130);

}

レンダリングされたページは次のように表示されます。

疑似要素の使用

::before および ::after セレクターで表される疑似要素を使用すると、Web デザイナーはコードにマークアップを追加せずに HTML ドキュメントの一部をスタイル設定できます。

次のコードを使用して、疑似要素を使用して二重枠を作成する方法を説明します。

HTMLドキュメント

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

      <div class="box"> <h2>pseudo property</h2>  </div>

  </body>

</html>

CSS

 *{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 150px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    background-color: brown;

  }

  box{

    background-color: rebeccapurple;

    position: relative;

    border: 8px solid red;

  }

  .box::before{

  content: " ";

  position: absolute;

  top: 5px;

  left: 5px;

  right: 5px;

  bottom: 5px;

  border: 8px solid green;

  border-width: 6px;

  border-color: green white green white;

  width: 150px;

  height: 100px;

}

レンダリングされたページは次のように表示されます。

二重枠 CSS の実際の例

二重枠 CSS プロパティは多くの Web サイトで使用されています。二重枠プロパティを最大限に活用するには、他の CSS プロパティと組み合わせる必要があります。以下は、二重境界線が実際に使用されている 2 つの例です。

Amazonの「カート」ボタン

Amazon は、電子商取引分野の最大手の 1 つです。カートボタンには、見た目の美しさを高める二重枠 CSS があり、ユーザーに行動を促します。

ユーザーが「カート」ボタンの上にマウスを移動すると、二重枠が表示されます。 Amazon のナビゲーションメニューにカーソルを置くと、境界線も表示されます。

メールチンパンジーのボタン

Mailchimp は、ユーザーがキャンペーンを作成、開始、追跡できる電子メールマーケティングサービスです。その Web サイトでは、さまざまなセクションで二重枠効果が使用されています。サインアップボタンとログインボタンには二重枠があり、ユーザーが閲覧するときに緊迫感を「生み出す」ことができます。

これらのボタンの下側の境界線は、ユーザーがカーソルを通過させると太くなります。

二重枠 CSS 効果を使用する場合のベストプラクティス

二重 CSS を使用していると、夢中になってしまいがちです。最終的な目標は、ユーザーが簡単に移動し、サイト上の主要な領域を強調できるようにすることです。次のベストプラクティスに従ってください。

一貫したスタイルを使用する: 二重枠線を使用する場合は、すべての要素でスタイルが一貫していることを確認してください。たとえば、ナビゲーション、CTA、サインアップ/ログインボタンに二重枠を使用できます。可能であれば、二重枠のある要素全体で同じ色と余白の太さを確保してください。
これらの二重枠がさまざまなデバイスで機能することを確認します。 私たちは、人々がスマートフォン、PC、タブレットから Web サイトを閲覧する世界に住んでいます。さまざまな画面サイズで二重枠が期待どおりに表示されることをテストします。
慎重に使用する: 特定の CSS 効果を初めて発見した後は、過剰に使用したくなるかもしれません。ただし、ダブル CSS は Web ページ上のさまざまな要素に適しています。このプロパティは、デザインに価値を加える領域でのみ使用してください。

結論

CSS で二重枠を作成するために使用できる主な方法を強調しました。どのアプローチを選択するかは、二重枠で何を達成したいのか、そして好みによって異なります。同じページ上で 1 つの二重枠スタイルを使用するか、複数の二重枠スタイルを組み合わせて使用するかを決定できます。

カスケードスタイルシートを詳しく理解するには、これらの CSS リソースを確認してください。

「 CSS で二重枠を作成する 6 つの方法」についてわかりやすく解説！絶対に観るべきベスト2動画

HTML＆CSSステッチ風見出しの作り方！！ドット風や二重線の作り方も！

https://www.youtube-nocookie.com/watch?v=pwUiZlGamE4&pp=ygU1IENTUyDjgafkuozph43mnqDjgpLkvZzmiJDjgZnjgosgNiDjgaTjga7mlrnms5UmaGw9SkE%3D

HTML＆CSSステッチ風見出しの作り方！！ドット風や二重線の作り方も！ (https://www.youtube-nocookie.com/watch?v=pwUiZlGamE4&pp=ygU1IENTUyDjgafkuozph43mnqDjgpLkvZzmiJDjgZnjgosgNiDjgaTjga7mlrnms5UmaGw9SkE%3D)

Learn CSS height and width in 6 minutes! 📏

https://www.youtube-nocookie.com/watch?v=QctF-i4-GuM&pp=ygU1IENTUyDjgafkuozph43mnqDjgpLkvZzmiJDjgZnjgosgNiDjgaTjga7mlrnms5UmaGw9SkE%3D

Learn CSS height and width in 6 minutes! 📏 (https://www.youtube-nocookie.com/watch?v=QctF-i4-GuM&pp=ygU1IENTUyDjgafkuozph43mnqDjgpLkvZzmiJDjgZnjgosgNiDjgaTjga7mlrnms5UmaGw9SkE%3D)

開発