[CSS] box-decoration-breakプロパティで分割されたボックスの表示方法を指定しよう!

この記事は上記のような疑問を解消するものとなっています。

box-decoration-breakプロパティは分割されたボックスの表示方法を指定します。

そこでこの記事ではbox-decoration-breakについて解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

1.box-decoration-breakとは?

box-decoration-breakプロパティは分割されたボックスの表示方法を指定する際に利用します。

値の指定方法は以下の通りです。

{ box-decoration-break: 値; }

値の指定方法

2.box-decoration-breakの使い方

それではbox-decoration-breakの使い方をみていきましょう。

以下のようにすることで改行で要素が区切られても1つの要素として扱うものとして表示されます。

.box-span {
 box-decoration-break: slice;
 border: 1px solid #006ac3;
 background-color: #89c3f4;
}

box-decoration-breakを使えば、行ごとにタグで囲む必要がなく、ブラウザのサイズによって改行されてもしっかりと表示できます。

他にも値を設定できるのでいろいろと試してみることをオススメします!

「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?