ボーダーのスタイル、幅、色
ショートハンドとロングハンドのプロパティを使って、さまざまなスタイル、幅、色のボーダーを適用します。
「ボーダーのスタイル、幅、色」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
borderショートハンド
borderショートハンドは、幅、スタイル、色を4辺すべてに一度に設定します。
<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>
border-styleの値
ボーダーを表示するにはborder-styleを設定する必要があります。使用できる値は次のとおりです。
solid— 連続した線dashed— 長い破線dotted— 丸い点線double— 2本の平行線groove/ridge/inset/outset— 3D効果none— ボーダーなし（デフォルト）
border-width
border-widthには任意の長さの単位、またはthin、medium、thickのキーワードを指定できます。正確に指定するには数値を使用します。
<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>
border-color
border-colorには、透明度を指定できるRGBAを含む、任意のCSSカラー値を指定できます。currentColorはテキストの色を継承します。
<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>
各辺のボーダー
ロングハンドプロパティを使うと、特定の辺にボーダーを設定できます。
<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>
border-radius
border-radiusは要素の角を丸くします。均一に丸めるには1つの値を、角ごとに制御するには最大4つの値を使用します。
<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">●</div>
<div class="custom">Custom</div>
楕円形のborder-radius
各角の半径には、/で区切った2つの値を指定して、非対称な楕円形の丸みを設定できます。
<div class="leaf"></div>
border-image
border-imageはボーダーを分割した画像やグラデーションに置き換え、装飾的なボーダーを実現します。
<div class="fancy">Gradient border image</div>
outlineとborderの違い
outlineはボーダーの外側に線を描画します。ボーダーとは異なり、レイアウトや要素のサイズに影響しません。キーボードフォーカスのインジケーターによく使用されます。
<button class="focus-demo">Focused Button (demo)</button>
outlineの削除：慎重に使用する
代わりに目に見えるフォーカスインジケーターを用意せずに、:focusのアウトラインを削除してはいけません。フォーカス用のスタイルを削除すると、キーボードやスクリーンリーダーのユーザーに悪影響があります。
<button>Button without outline</button>
<a href="#">Link without outline</a>
テーブルのborder-collapse
HTMLテーブルでは、border-collapse: collapseを指定すると隣接するセルのボーダーが1本の線に統合され、よりすっきりと表示されます。
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>30</td></tr>
</table>
確認問題
要素のレイアウトに影響を与えず、ボーダーの外側に線を描画するCSSプロパティはどれですか？
まとめ
borderショートハンドは、幅、スタイル、色を設定します。border-radiusは角を丸くします。outlineはボーダーとは別のもので、レイアウトに影響を与えません。また、キーボード操作でのアクセシビリティに重要なフォーカスインジケーターとなります。
よくある質問
「ボーダーのスタイル、幅、色」レッスンは無料ですか？
はい。「ボーダーのスタイル、幅、色」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「ボーダーのスタイル、幅、色」で何を学びますか？
ショートハンドとロングハンドのプロパティを使って、さまざまなスタイル、幅、色のボーダーを適用します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「ボーダーのスタイル、幅、色」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。