VIDEO LESSON

CSSのborder-styleの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:50動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、ボーダースタイルです。
0:06これは、要素の枠線の種類だけを指定するプロパティです。
0:10太さや色は変えずに、実線や破線といった線の見た目だけを差し替えられるので、
0:14デザインの印象を細かく調整できます。
0:18たとえば、通常の区切りは実線に、仮の状態やガイドには破線に、といった使い分けができます。
0:25この動画では、基本の書き方、主な値の種類、値を四つまで並べる方法、効かないときの注意点までを順番に見ていきます。
0:33記事の実例に沿って、ダッシュドという破線と、ソリッドという実線を比べて、
0:37違いを目で確かめましょう。
0:41まず基本の書き方です。
0:42対象のクラスにボーダースタイルと書き、コロンのあとに種類を書き、最後にセミコロンを付けます。
0:49スライドの例では、ダッシュドを指定しています。
0:52これだけで、四辺すべての枠線が破線になります。
0:55クラス名デモは、エイチティーエムエルでクラス属性にデモと書かれた要素を選ぶ合図です。
1:01ただし、種類を指定しただけでは十分とは限りません。
1:05線を実際に見せるには、太さがある程度確保されている必要もあります。
1:10その条件は後のセクションでも繰り返し確認します。
1:13まずはこの一行の形を覚えましょう。
1:16主な値を紹介します。
1:17まずノーンは線を表示しない値で、太さや色を指定していても線は描かれません。
1:23ソリッドは途切れない実線で、最も標準的な線です。
1:27ダッシュドは少し長めの線が繰り返す破線、ドッテッドは丸い点が並ぶ点線です。
1:33ダブルは二本の線が並ぶ二重線で、はっきり見せるにはある程度の太さが必要です。
1:40普段のカードや区切りにはソリッド、入力欄の仮枠やドラッグ中の目安にはダッシュド、
1:46控えめな区切りにはドッテッド、といった具合に、役割に合わせて選ぶと迷いにくくなります。
1:53もう少し特殊な値もあります。
1:55グルーブは溝のように彫り込んで見える線、リッジは逆に盛り上がって見える線です。
2:02インセットは要素全体がへこんで見え、アウトセットは要素全体が浮き出て見える効果になります。
2:09これらは枠線の色と明暗をブラウザーが組み合わせて表現するため、色や太さによって見え方が変わります。
2:17ヒドゥンはノーンと似て線を表示しませんが、主に表のセルの境界が重なったときの優先順位の決め方に違いがあります。
2:26日常のデザインでは出番は少なめですが、値の名前と見た目の対応を知っておくと、
2:30既存のコードを読むときに役立ちます。
2:35値は一つだけでなく、最大で四つまで並べられます。
2:39一つ書けば上、右、下、左の四辺すべてが同じ種類になります。
2:44二つ書くと、一つ目が上下、二つ目が左右というペアになります。
2:49三つ書くと、真ん中の値が左右で共用されます。
2:52四つ書けば、上、右、下、左の順に、一つずつ個別に決められます。
2:58たとえば、下辺だけ破線にして区切りの目安にしたり、上辺だけ実線にして見出しらしく強調したりできます。
3:06順番は上から時計回りと覚えると、読み間違えにくくなります。
3:11辺ごとに種類を変えるときは、ブラウザーでどの辺が変わったか、一辺ずつ確かめながら進めましょう。
3:19初期値と継承を確認します。
3:21初期値は、上、右、下、左に対応する四つの個別プロパティの初期値を参照して決まります。
3:28個別プロパティとは、たとえば上辺だけならボーダートップスタイルのように書く指定です。
3:35そして、このプロパティは通常、親から子へ継承しません。
3:39親の箱の枠線を破線にしても、中の子要素の枠が自動で破線になるわけではないのです。
3:45共通の値として、インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値に戻す指定です。
3:53アンセットは、継承しない項目なのでイニシャルとして扱われます。
3:58必要な要素それぞれに指定する、という前提を覚えておきましょう。
4:03ここからは実例です。
4:04エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
4:12中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。
4:19頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
4:25今回確認したいのは文章そのものではなく、箱を囲む枠線の種類です。
4:30文章量は線種に直接影響しませんが、土台の状態を先に固定してから値を比べると、
4:36種類だけが変わったことをはっきり確かめられます。
4:41親のステージは、比較のための余白と背景を用意する役割だと考えてください。
4:47土台のシーエスエスです。
4:49全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白、点線の枠と薄い背景を付けます。
4:56デモの箱には一レムの内側余白と、三ピクセルの実線の枠、薄い緑の背景と文字色を指定します。
5:03そのうえで、最後の行でボーダースタイルにダッシュドを指定すると、太さも色もそのままに、
5:07種類だけが破線へ変わります。
5:11次に値だけをソリッドへ戻してみましょう。
5:14内容も位置もまったく動かず、枠線が破線から実線へ切り替わります。
5:19変えたのはこの一行だけ、という点に注目してください。
5:23同じ太さでも線種で印象が変わることが分かります。
5:27使うときの注意点です。
5:29まず、ボーダースタイルがノーンやヒドゥンになっていると、太さや色をいくら指定しても線は表示されません。
5:38線が見えないときは、種類が有効かどうかを真っ先に確認しましょう。
5:43次に、ダブルなどの線種は、十分な太さがないと二本線の違いが見えにくくなります。
5:50一ピクセルのような細さでは実線とほぼ同じに見えるので、太さとセットで調整してください。
5:58記事もこの点を間違えやすい点として挙げています。
6:02もう一つ大切なのは、デザインの状態を線種だけで伝えないことです。
6:07破線だから仮、実線だから確定、といった区別は、色や文字の説明も併用すると、
6:12誰にとっても分かりやすくなります。
6:17効かないと感じたときの確認手順です。
6:19まず開発者ツールで順番に調べます。
6:22ネットワークでスタイルシートが正常に取得できているか、エレメンツで対象のクラスとシーエスエスのセレクターが一致しているか、
6:28スタイルズで宣言が無効扱いになっていないか、別の宣言に上書きされていないかを見て、
6:34最後にコンピューテッドで最終的な四辺の種類を確認します。
6:40特に、ショートハンドのボーダーで後から種類まで上書きしていないかは見落としやすい点です。
6:46三百二十ピクセル程度の狭い画面や文字の拡大、キーボード操作でも内容を利用できるか、
6:49あわせて確認しましょう。
6:53一度に全部を直さず、一か所ずつ原因を切り分けると解決が早くなります。
6:58最後に互換性とまとめです。
7:00記事が参照するエムディーエヌの記録では、クローム一以降、エッジ十二以降、
7:06ファイアフォックス一以降、サファリ一以降などで対応が示されていて、ダッシュドもソリッドも同じく古くから対応している、
7:11とても安心して使えるプロパティです。
7:17まとめます。
7:18ボーダースタイルは枠線の種類だけを指定するプロパティで、値を最大四つまで並べて辺ごとに変えられ、
7:23通常は継承しませんでした。
7:28練習として、ダッシュドとソリッドの違いを言葉で説明し、文章量や親の幅だけを変えて結果を比べてみてください。
7:36関連するボーダーウィドゥスやボーダーカラーも学ぶと、枠線の調整が一通りできるようになります。
7:43お疲れさまでした。
7:44まずは手元のカードの枠線を破線に変えて、印象の変化を試してみてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

border-styleの役割と主な指定値を解説。同じ太さの枠線が破線から実線へ変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのborder-styleの使い方：指定値・実例・効かない原因とブラウザー互換性 →