CSSのダブルボーダーや点線・破線を完全ガイド！初心者でもわかるdotted・dashed・doubleの使い方

1. CSSのborder-styleとは？初心者向けの基本を解説

1. CSSのborder-styleとは？初心者向けの基本を解説

Webデザインにおいて、要素を線で囲むプロパティをborder（ボーダー）と呼びます。このボーダーは、ただ線を引くだけではなく、「太さ・色・種類」の3要素を組み合わせて指定するのが基本です。

その中でも「線の見た目」を決定づける最も重要なプロパティがborder-styleです。これを変更するだけで、サイトの印象を「かっちりした雰囲気」から「柔らかい印象」まで自由自在にコントロールできます。

代表的なborder-styleの値には、以下のような種類があります。

• solid（ソリッド）： つなぎ目のない、最も一般的な「実線」です。
• dotted（ドッテッド）： 丸い点が並んだ「点線」です。
• dashed（ダッシュト）： 短い棒線が並んだ「破線」です。
• double（ダブル）： 2本の線が並ぶ「二重線」です。

プログラミング未経験の方でも、まずはborderプロパティに「太さ」「種類」「色」を半角スペースで区切って書くだけで反映されるので、非常にシンプルです。

それでは、まずは基本となる「実線（solid）」のコードを実際に確認してみましょう。

<style>
    .basic-border {
        /* 太さ 5px / 種類 実線(solid) / 色 青系 */
        border: 5px solid #007bff;
        padding: 20px;
        background-color: #f8f9fa;
        text-align: center;
    }
</style>

<div class="basic-border">
    これが基本の「実線（solid）」ボーダーです！<br>
    ここから種類（style）を変えていきましょう。
</div>

このように、border-styleにsolidを指定すると、要素をしっかりとした線で囲むことができます。次の章からは、もっとデザインの幅を広げる点線や二重線の具体的な使い方を詳しく見ていきましょう。

2. 点線ボーダー（dotted）の使い方

2. 点線ボーダー（dotted）の使い方

dottedは、まるい点が並んだようなボーダーを作る指定です。やわらかい印象を与えたいときや、可愛らしいデザインをしたいときに使われます。

<style>
    p {
        border: 3px dotted pink;
        padding: 10px;
    }
</style>

<p>これは点線（dotted）のボーダーです。</p>

点線は、優しい雰囲気を出したいカードデザインや、メモ欄などの装飾に使うと効果的です。

3. 破線ボーダー（dashed）の使い方

3. 破線ボーダー（dashed）の使い方

dashedは、線が短い線分で区切られた破線です。点線よりもはっきりした印象を与えます。

区切り線やメニューの境界など、情報を整理する場面でよく使われます。

<style>
    div {
        border: 4px dashed #00aaff;
        padding: 10px;
    }
</style>

<div>これは破線（dashed）のボーダーです。</div>

破線は「区切る」や「強調する」デザインにぴったりです。たとえば、重要な注意書きやコメント欄を囲むときにも使えます。

4. 二重線ボーダー（double）の使い方

4. 二重線ボーダー（double）の使い方

doubleを指定すると、二重線のボーダーを作ることができます。重厚感や高級感を出したいときにおすすめです。

<style>
    section {
        border: 5px double #333;
        padding: 15px;
    }
</style>

<section>これは二重線（double）のボーダーです。</section>

二重線は「タイトルボックス」や「重要な情報枠」に使うと、目を引くデザインになります。

5. 各ボーダースタイルの違いを比較してみよう

5. 各ボーダースタイルの違いを比較してみよう

同じ太さでも、スタイルによって印象が大きく変わります。下の例で違いを見てみましょう。

<style>
    .solid-box {
        border: 3px solid black;
        padding: 5px;
        margin-bottom: 8px;
    }
    .dotted-box {
        border: 3px dotted red;
        padding: 5px;
        margin-bottom: 8px;
    }
    .dashed-box {
        border: 3px dashed green;
        padding: 5px;
        margin-bottom: 8px;
    }
    .double-box {
        border: 5px double blue;
        padding: 5px;
    }
</style>

<div class="solid-box">solid（実線）</div>
<div class="dotted-box">dotted（点線）</div>
<div class="dashed-box">dashed（破線）</div>
<div class="double-box">double（二重線）</div>

このように、border-styleの違いを使い分けることで、単なる枠線がデザインの一部になります。

6. dotted・dashed・doubleの活用テクニック

6. dotted・dashed・doubleの活用テクニック

ここでは、Webデザインでよく使われる応用例を紹介します。

• メモ風デザイン： dottedボーダーでノートっぽい雰囲気を出す。
• 区切り線： dashedボーダーを使って内容のセクションを分ける。
• 高級感： doubleボーダーで重要な枠を囲む。

例えば「メモ風ボックス」を作るには、次のように書きます。

<style>
    .memo-box {
        border: 2px dotted gray;
        background-color: #fdfdfd;
        padding: 15px;
        width: 300px;
    }
</style>

<div class="memo-box">この部分はメモ風に点線で囲まれています。</div>

簡単なコードで、紙のメモのようなかわいらしいデザインが作れます。背景色や線の色を変えると印象も大きく変わります。

7. ボーダーの幅と色を組み合わせて個性的に

7. ボーダーの幅と色を組み合わせて個性的に

ボーダーの太さ（border-width）や色（border-color）を変えることで、より個性的なデザインが作れます。

たとえば、太めの点線を使うとポップな雰囲気に、細い破線を使うと繊細な印象になります。

<style>
    .pop-box {
        border: 6px dotted #ff66cc;
        padding: 10px;
    }
</style>

<div class="pop-box">太めの点線でポップな印象に！</div>

8. まとめ：ボーダースタイルでデザインを引き立てよう

8. まとめ：ボーダースタイルでデザインを引き立てよう

CSSのdotted・dashed・doubleを使えば、簡単に線の種類を変えてデザインの幅を広げることができます。

ちょっとしたボーダーの工夫で、Webページの雰囲気はがらりと変わります。色や太さと組み合わせて、見やすくて印象的なデザインを目指しましょう。