CSSのダブルボーダーや点線・破線を完全ガイド！初心者でもわかるdotted・dashed・doubleの使い方
生徒
「先生、Webサイトの枠線で点線や二重線のデザインを見たことがあるんですが、あれはどうやって作るんですか？」
先生
「とてもいいところに気づきましたね。CSSではborder-styleを使えば、点線（dotted）や破線（dashed）、ダブルボーダー（double）などの線を簡単に作れるんですよ。」
生徒
「おお！そんなプロっぽいデザインが簡単にできるんですか！やり方を教えてください！」
先生
「もちろんです。今日は、CSSの境界線（ボーダー）を使って、いろいろな線のデザインを作る方法を学びましょう。」
1. CSSのborder-styleとは？
CSSでは、要素の外枠に線を引くためにborderというプロパティを使います。線の太さ・色・種類を指定することで、見た目を自由にデザインできます。
このとき「線の種類」を決めるのがborder-styleです。例えば以下のような種類があります。
- solid：普通の実線
- dotted：点線
- dashed：破線
- double：二重線（ダブルボーダー）
では、実際にコードで確認してみましょう。
<style>
div {
border: 3px solid black;
padding: 10px;
}
</style>
<div>これは基本の実線ボーダーです。</div>
2. 点線ボーダー（dotted）の使い方
dottedは、まるい点が並んだようなボーダーを作る指定です。やわらかい印象を与えたいときや、可愛らしいデザインをしたいときに使われます。
<style>
p {
border: 3px dotted pink;
padding: 10px;
}
</style>
<p>これは点線（dotted）のボーダーです。</p>
点線は、優しい雰囲気を出したいカードデザインや、メモ欄などの装飾に使うと効果的です。
3. 破線ボーダー（dashed）の使い方
dashedは、線が短い線分で区切られた破線です。点線よりもはっきりした印象を与えます。
区切り線やメニューの境界など、情報を整理する場面でよく使われます。
<style>
div {
border: 4px dashed #00aaff;
padding: 10px;
}
</style>
<div>これは破線（dashed）のボーダーです。</div>
破線は「区切る」や「強調する」デザインにぴったりです。たとえば、重要な注意書きやコメント欄を囲むときにも使えます。
4. 二重線ボーダー（double）の使い方
doubleを指定すると、二重線のボーダーを作ることができます。重厚感や高級感を出したいときにおすすめです。
<style>
section {
border: 5px double #333;
padding: 15px;
}
</style>
<section>これは二重線（double）のボーダーです。</section>
二重線は「タイトルボックス」や「重要な情報枠」に使うと、目を引くデザインになります。
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の活用テクニック
ここでは、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. ボーダーの幅と色を組み合わせて個性的に
ボーダーの太さ（border-width）や色（border-color）を変えることで、より個性的なデザインが作れます。
たとえば、太めの点線を使うとポップな雰囲気に、細い破線を使うと繊細な印象になります。
<style>
.pop-box {
border: 6px dotted #ff66cc;
padding: 10px;
}
</style>
<div class="pop-box">太めの点線でポップな印象に！</div>
8. まとめ：ボーダースタイルでデザインを引き立てよう
CSSのdotted・dashed・doubleを使えば、簡単に線の種類を変えてデザインの幅を広げることができます。
ちょっとしたボーダーの工夫で、Webページの雰囲気はがらりと変わります。色や太さと組み合わせて、見やすくて印象的なデザインを目指しましょう。
