繰り返しになりますが、既に学習エリアで境界線(ボーダー)について少し見てきました — 境界線の色やスタイルの設定などの単純な使用法です。 ここで簡単に復習して、それから他に何が利用できるのか(丸い角や境界線画像など)について説明します。

前提知識: HTML の基礎(HTML 入門を学ぶ)、および CSS の機能の考え方(CSS 入門を学ぶ)。
学習目標: 要素の境界線の装飾に関する全容を学ぶこと。

境界線の復習

コースの前半で見たように、要素には要素のパディングとマージンの間に気持ち良く収まる境界線があります。 デフォルトでは、境界線のサイズは 0 になって見えなくなりますが、境界線の太さ、スタイル、色を設定して表示させることができます。

境界線の一括指定

border 一括指定プロパティを使うと、これらすべてを四辺すべてに一度に設定できます。 次に例を示します。

<p>I have a red border!</p>
p {
  padding: 10px;
  background: yellow;
  border: 2px solid red;
}

個別指定オプション

border は、より具体的な装飾の必要性のために、次のように多くの異なる個別指定プロパティに分割することができます。

なぜそんなに多くの個別指定オプションがあるのか​​疑問に思うかもしれません — それでも、すべてを絶えず再定義しなくても必要に応じて装飾の個々の部分を上書きまたはオフにできるようにそれらを利用できるようにすると便利で、長期的に見れば、多くのコード行を節約できます。 値が明示的に設定されていない場合、境界線はデフォルトでテキストの色と幅 3px をとることも知っておく価値があります。

これを念頭に置いて、架空の本の執筆進捗プランナーの例を見てみましょう。 各章は、固定幅に設定され、章番号とタイトルを含む <div> 要素によって表されます。 執筆の進行状況は次のキーで示されます。

  • 開始されていないか不完全な(incomplete)章は点線で囲まれます。
  • 執筆した(written)が見直しが必要な章は、破線で囲まれます。
  • 完成した(complete)(執筆して、見直された)章は、実線で囲まれます。
  • 執筆中(incomplete writing)または見直し中(written review)の章には、太い赤の実線が下辺に付きます。

これを実装するために使用できる CSS を見てみましょう。

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 220px;
  padding: 20px;
  margin: 10px;
  line-height: 2;
  background-color: yellow;
  text-align: center;
  display: inline-block;
}

.complete {
  border-style: solid;
}

.written {
  border-style: dashed;
}

.incomplete {
  border-style: dotted;
}

.writing, .review {
  border-bottom: 6px solid red;
}

これにより、次のような結果が得られます。

これを実現するために使用される装飾はあまりありません。 div の規則では境界線の装飾を宣言しておらず、編集プロセスのさまざまなポイントを伝えるために使用した特定のクラスだけです。 境界線のデフォルトの幅と色を使用し、スタイルを .complete.written.incomplete に設定しました。 それから .writing.review が活発に進行している章のために、境界線の下辺だけにプロパティ全体のセットを指定しなければなりませんでした。 これは、ボックスの種類ごとに境界線全体を一括指定するよりもはるかに効率的です。

Github に border-longhand.html という例があります(ソースコードも参照)。

境界線の半径

ボックスの丸い角は、ウェブサイトでも非常に人気の高い機能です。 実際、ブラウザーは丸い角を簡単に実装するためのプロパティ(border-radius)を実装しています。 これより以前(および複数の背景画像がサポートされるまで)、開発者は丸みを帯びさせたい各ボックスをさらに3つの <div> で囲み、これら4つの各要素に別々の丸い角のグラフィックを添付する必要がありました。 彼らが自分の箱を柔軟にしたいのであれば、そうします。

: 古いブラウザーでもまったく同じ外観にする必要がある場合は、これを実行する必要があります — Internet Explorer 9 以降では border-radius がサポートされています。 しかし丸みを帯びた角がなくなっても、ユーザーがコンテンツを読むことができなくなるわけではないので、古いブラウザーを使用しているユーザーは、それらがなくても生きていくことができます。

これは非常に簡単になりました — 次のプロパティを使うだけです。

border-radius: 20px;

異なるサイズの境界線の半径を異なる角に配置するには、paddingmargin でできるのと同じように、2つ、3つ、または4つの値を指定できます。

/* 最初の値は左上角と右下角、
   2番目の値は右上と左下  */
border-radius: 20px 10px;
/* 最初の値は左上角、2番目の値は右上と左下、
   3番目の値は右下  */
border-radius: 20px 10px 50px;
/* 左上、右上、右下、左下 */
border-radius: 20px 10px 50px 0;

最後のポイントとして、楕円の角(x の半径と y の半径が異なる)を作成することもできます。 2つの異なる半径をスラッシュ(/)で区切って指定し、上記のようにこれを任意の値の組み合わせと組み合わせることができます。 例えば次のようにします。

border-radius: 10px / 20px;
border-radius: 10px 30px / 20px 40px;

: 境界線の半径を指定するために任意の長さの単位を使用できます。 例えば、ピクセル、rem、パーセント。

: ボックスの各角の境界線の半径を個別に設定するために、個別指定プロパティも使用できます(border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius)。

能動的学習: 境界線の半径で遊ぶ

この能動的学習のために、提供された要素にいくつかの異なる種類の境界線の半径を実装してもらいたいです。 次のものを追加してみてください。

  • すべての角に同じ丸い角。
  • すべての角に同じ楕円形の角。
  • すべての角に異なる丸みと楕円形の角。
  • 3値の構文を使用して、各角に丸い角。
  • 左下角に丸い角。
  • ふるまいを確認するために、異なる単位値を使用した丸い角。 パーセントは面白いです — なぜでしょうか?

間違えた場合は、Reset ボタンを使用していつでもリセットできます。

境界線画像

最後に、境界線を操作するための CSS への最新の(そして複雑な)追加を見てみましょう — border-image。 ここでの考え方は、複雑なユーザーインターフェイス機能を作成するときに、単色(solid color)ではなく複雑な境界線のデザインが必要になることがあるということです。 これは、1つの要素を別の大きな要素の上の真ん中に重ね、その下の要素に背景画像を適用して複雑な境界線を偽造することによって作成できます。 極端な場合には、9つの要素からなる 3 x 3 のグリッドを作成して、中央の要素をコンテンツとして、周囲の8つの要素に境界線要素を適用する必要さえあります。

最新のブラウザーではありますが、border-image の画像を使用すると、複雑な模様の付いた境界線を簡単に作成できます(Internet Explorer 11 以降では、他の最新のブラウザーと同様にそれがサポートされています)。 これがどのように機能するかを見てみましょう。

まず第一に、ブラウザーに適用するための画像が必要です。 これは通常、次のような 3 x 3、4 x 4、5 x 5(など)のグリッドのデザインになります。

このような画像を境界線画像に使用すると、ブラウザーは次の画像に示すように、画像を8つに分割します。

角の画像は境界線の角に挿入され、上下左右のスライスは境界線の対応する辺を(引き伸ばしたり、繰り返したりすることによって)埋めるために使用されます。 スライスを適切なサイズにするようブラウザーに指示する必要があります — 例えば、この画像は 160px、4 x 4 のグリッドで、各スライスは 40px にする必要があります。

まず、境界線を適用するためのボックスが必要です。 境界線を指定する必要があり、そうしないと、境界線画像には表示されるスペースがなくなります。 また、background-clip を使用して、背景色をコンテンツとパディングの下の領域だけ塗りつぶし、境界線の下には広げません(デザインにこれ​​を望んでいないかもしれませんが、それはこのような場合に役立ちます)。

border: 30px solid black;
background-clip: padding-box;

: border-image を使用するときは、常に border の定義を含める必要があります。 これは、例えばブラウザーがその機能をサポートしていない場合など、境界線画像を表示できない場合の代替として機能します。

次に、border-image-source を使って、境界線画像として使うソース画像を指定します。 これは background-image とまったく同じように機能し、url() 関数またはグラデーションを値として受け入れることができます。

border-image-source: url(border-image.png);

上記で説明したように、必要なスライスのサイズを設定するために次のように border-image-slice を使用します。

border-image-slice: 40;

このプロパティは、すべてのスライスが同じサイズの場合は1つの値を、スライスのサイズが異なる必要がある場合は複数の値を、paddingmargin と同様に使用できます。

  • 2つの値: 上下、左右。
  • 3つの値: 上、左右、下。
  • 4つの値: 上、右、下、左。

画像がラスタグラフィック(.png.jpg など)の場合、数値はピクセル単位で解釈されます。 画像がベクトルグラフィック(.svg など)の場合、数値はグラフィック内の座標として解釈されます。 パーセントも使用できます(単位は %)。 その他のオプションや詳細については border-image-slice のページをチェックしてください。

: デフォルトでは、9番目のスライス(中央部分)は完全に省略され、要素のコンテンツは残りのギャップに表示されます。 境界線画像の中央をそのままにしておきたい場合は、border-image-slice / border-image の値にキーワード fill を含めることで可能で、その場合、背景領域に合わせて拡大されます。

最後に、border-image-repeat を使って、画像がどのようにして境界線の辺を埋めるかを指定します。 オプションは次のとおりです。

  • stretch: デフォルトであり、辺の画像は境界線を埋めるように引き伸ばされます。 これは一般的にひどくてピクセル化されているように見えるのでお勧めできません。
  • repeat: 境界線が埋められるまで辺の画像が繰り返されます。 状況によっては、これは問題ないように見えるかもしれませんが、見苦しい画像の断片が残る可能性があります。
  • round: 境界線が埋められるまで辺の画像が繰り返され、断片が表示されないようにすべてがわずかに引き伸ばされます。
  • space: 境界線が埋められるまで辺の画像が繰り返され、断片が表示されないように各コピー間に少量の間隔が追加されます。 この値は、Safari(9 以降)および Internet Explorer(11 以降)でのみサポートされています。

最も有用で柔軟性があると思われるため、次のように round 値を使用することにしました。

border-image-repeat: round;

これをすべてまとめる

実際の例を示すために、このコードをすべてまとめてみましょう。 まず、いくつかの簡単な HTML です。

<div>
  <p>Border image</p>
</div>

そして、CSS です。

div {
  width: 300px;
  padding: 20px;
  margin: 10px auto;
  line-height: 3;
  background-color: #f66;
  text-align: center;
  /* border-related properties */
  border: 20px solid black;
  background-clip: padding-box;
  border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
  border-image-slice: 40;
  border-image-repeat: round;
}

これが結果です。

あなたが気づいたかもしれない面白い何かは、画像スライスが 40 であるのに、境界線が 20px 幅に設定されているということです — この場合、ブラウザーはちょうどそれが収まるように 20px 幅にスライスをリサイズします。

この例は Github の border-image.html として見つけることができます(ソースコードも参照)。 ローカルコピーを作成して遊びましょう。

その他のプロパティ

あまり一般的ではない2つの境界線画像プロパティは次のとおりです。

  • border-image-width: 境界線ではなく境界線画像だけのサイズを変更します — これが border-width よりも小さく設定されている場合、それは塗りつぶさずに境界線の外側に寄せられます。 大きい場合は、境界線を超えて拡大し、パディングやコンテンツと重なり始めます。
  • border-image-outset: 境界線の内側とパディングの間の余分なスペースの大きさを定義します — 「境界線パディング」のようなものです。 これは、必要に応じて境界線画像を少しずらす簡単な方法です。

一括指定

ご想像のとおり、使用可能な一括指定プロパティー border-image があります。これを使用すると、関連するすべての値を1行に設定できます。 次の複数の行を、

border-image-source: url(border-image.png);
border-image-slice: 40;
border-image-repeat: round;

次に置き換えることができます。

border-image: url(border-image.png) 40 round;

まとめ

今、あなたはボーダーを理解していますよね? 国の端にあるものではなく、要素の端にあるものです。 境界線は理解するのに役立ち、さまざまな用途があります。 次の記事では、横に一歩踏み出し、表を修飾するためのベストプラクティスを探ります — これは、これまでのモジュールで見てきたいくつかのテクニックの有用な応用例です。

 

このモジュール内の文書

 

ドキュメントのタグと貢献者

このページの貢献者: Wind1808, mdnwebdocs-bot
最終更新者: Wind1808,