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

box-decoration-breakについて知りたい人

box-decoration-breakについて知りたいな!

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

この記事でお話すること
  • box-decoration-breakとは?
  • box-decoration-breakの使い方

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

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

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

box-decoration-breakの評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)

1.box-decoration-breakとは?

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

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

{ box-decoration-break: 値; }

値の指定方法

  • slice:改行で要素が区切られても1つの要素として扱います。
  • clone:改行で要素が区切られたら別個の要素として扱います。




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

コメントを残す

メールアドレスが公開されることはありません。