2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] shape-outsideプロパティでテキストの回り込みの形状を指定しよう!

shape-outsideの評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)




1.shape-outsideとは?

shape-outsideプロパティはフロートした要素に対して続くテキストが回り込むときの境界線の形状を指定します。

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

{ shape-outside: 値; }

値の指定方法

  • none
  • margin-box
  • border-box
  • padding-box
  • content-box
  • inset()
  • circle()
  • ellipse()
  • polygon()
  • path()
  • url()




2.shape-outsideの使い方

それではshape-outsideの使い方をみていきましょう。

.sample {
 shape-outside: circle(50%);
}

上記の例では、 circle(50%)と設定したので、それに合わせて文字が円形に回り込んでいます。

他にも値を設定できるのでいろいろと試してみることをお勧めします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です