shape-margin …… フロート要素への回り込みの形状にマージンを指定する
広告
shape-marginプロパティは、shape-outsideプロパティで指定するフロート要素への回り込みの形状に、マージンを指定する際に使用します。
shape-marginプロパティに負の値を指定することはできません。
■値
- 長さ
- 数値にpx・em・exなどの単位を付けて長さを指定
- %値
- 数値に%を付けて要素のブロック幅に対するパーセンテージを指定
■初期値・適用対象・値の継承
- 初期値
- 0
- 適用対象
- フロート要素
- 値の継承
- しない
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
div.sample{
width: 300px;
background-color: pink;
}
div.sankaku {
float: left;
shape-outside: polygon(50% 50%, 100% 100%, 0 100%);
clip-path: polygon(50% 50%, 100% 100%, 0 100%);
width: 100px; height: 100px;
background-color: yellowgreen;
shape-margin: 20px;
}
div.daen {
float: right;
shape-outside: ellipse(50px 30px at 50% 50%);
clip-path: ellipse(50px 30px at 50% 50%);
width: 100px; height: 100px;
background-color: orange;
shape-margin: 20px;
}
img.heart {
float: left;
shape-outside: url(images/heart.png);
shape-margin: 20px;
}
HTMLソース
<div class="sample"> <div class="sankaku"></div> <p> さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。 さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。 さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。 </p> <div class="daen"></div> <p> だえん、だえん、だえん、だえん、だえん、だえん、だえん。 だえん、だえん、だえん、だえん、だえん、だえん、だえん。 だえん、だえん、だえん、だえん、だえん、だえん、だえん。 </p> <img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/heart.png" class="heart"> <p> はーと、はーと、はーと、はーと、はーと、はーと、はーと。 はーと、はーと、はーと、はーと、はーと、はーと、はーと。 はーと、はーと、はーと、はーと、はーと、はーと、はーと。 </p> </div>
↓↓↓
ブラウザ上の表示
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
さんかく、さんかく、さんかく、さんかく、さんかく、さんかく。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
だえん、だえん、だえん、だえん、だえん、だえん、だえん。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。
はーと、はーと、はーと、はーと、はーと、はーと、はーと。
広告