このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
ボックス値からのシェイプの作成
シェイプを作るのに直接的な方法が、CSS ボックスモデルモジュールの値を使用することです。この記事では、これを行う方法を説明します。
<box-edge> ボックスのシェイプ値として有効な値は、次の通りです。
content-boxpadding-boxborder-boxmargin-box
border-radius の値にも対応しています。これは、要素に曲線のある枠線を設定し、作成されたシェイプに沿ってコンテンツを配置することが可能であることを意味します。
CSS ボックスモデル
上に挙げた値は CSS ボックスモデルの様々な部分に対応します。 CSS のボックスにはコンテンツ、パディング、境界、マージンがあります。
シェイプにボックス値を使用することで、これらの値で定義された辺でコンテンツを折り返すことができます。以下の例で、コンテンツの様々な流れ方が分かるように、パディング、境界、マージンを持つ要素を使用しています。
margin-box
margin-box は外側のマージンの縁と、要素の定義でborder-radius を使用することで、シェイプの角の半径によって定義されます。
以下の例では、高さ、幅、背景色を設定した<div> である紫色の丸いアイテムが表示されます。border-radius プロパティを使用して丸を作成しており、border-radius: 50% と設定しています。要素にマージンがあるので、コンテンツは丸いシェイプに回り込み、マージンが適用されています。
<div> <div></div> <p> 1782 年 11 月のある夜、伝えられるところによれば、フランスの小さな町アノネーで 2 人の兄弟が冬の暖炉のそばに座り、炉から立ち上る灰色の煙の渦が広い煙突をくねくねと登っていくのを見ていた。 2 人の名前はステファンおよびジョセフ・モンゴルフィエ、職業は紙漉き職人で、思慮深く、あらゆる科学的知識や新しい発見に深い関心を持っていた。 </p></div>body { font: 1.2em sans-serif;}.shape { background-color: rebeccapurple; height: 80px; width: 80px; padding: 20px; margin: 20px; border: 10px solid black; border-radius: 50%; float: left; shape-outside: margin-box;}border-box
border-box の値は、境界の外側の縁で定義されるシェイプです。このシェイプは通常の、境界の外側におけるすべての角の丸め規則に従います。 CSS のborder プロパティを使用していなくても、境界は存在します。この場合、境界はpadding-box と同じになり、シェイプはパディングの縁の外側として定義されます。
次の例では、テキストが境界線によって作成された線に従うようになったのが分かります。境界の寸法を変更すると、コンテンツがそれに従います。
<div> <div></div> <p> 1782 年 11 月のある夜、伝えられるところによれば、フランスの小さな町アノネーで 2 人の兄弟が冬の暖炉のそばに座り、炉から立ち上る灰色の煙の渦が広い煙突をくねくねと登っていくのを見ていた。 2 人の名前はステファンおよびジョセフ・モンゴルフィエ、職業は紙漉き職人で、思慮深く、あらゆる科学的知識や新しい発見に深い関心を持っていた。 </p></div>body { font: 1.2em sans-serif;}.box { width: 70%;}.shape { background-color: rebeccapurple; height: 80px; width: 80px; padding: 20px; margin: 20px; border: 10px solid black; border-radius: 50%; float: left; shape-outside: border-box;}padding-box
padding-box の値は、パディングの縁に囲まれたシェイプを定義します。このシェイプは境界の内側におけるすべての角の丸め規則に従います。パディングがない場合、padding-box はcontent-box と同じです。
<div> <div></div> <p> 1782 年 11 月のある夜、伝えられるところによれば、フランスの小さな町アノネーで 2 人の兄弟が冬の暖炉のそばに座り、炉から立ち上る灰色の煙の渦が広い煙突をくねくねと登っていくのを見ていた。 2 人の名前はステファンおよびジョセフ・モンゴルフィエ、職業は紙漉き職人で、思慮深く、あらゆる科学的知識や新しい発見に深い関心を持っていた。 </p></div>body { font: 1.2em / 1.2 sans-serif;}.box { width: 70%;}.shape { background-color: rebeccapurple; height: 80px; width: 80px; padding: 20px; margin: 20px; border: 10px solid black; border-radius: 50%; float: left; shape-outside: padding-box;}content-box
このボックスのそれぞれの角の半径は、border-radius からborder-width とpadding を引いた値、または0 のいずれか大きい方となります。つまり、ここでは負の数を取ることはありません。
<div> <div></div> <p> 1782 年 11 月のある夜、伝えられるところによれば、フランスの小さな町アノネーで 2 人の兄弟が冬の暖炉のそばに座り、炉から立ち上る灰色の煙の渦が広い煙突をくねくねと登っていくのを見ていた。 2 人の名前はステファンおよびジョセフ・モンゴルフィエ、職業は紙漉き職人で、思慮深く、あらゆる科学的知識や新しい発見に深い関心を持っていた。 </p></div>body { font: 1.2em / 1.2 sans-serif;}.box { width: 70%;}.shape { background-color: rebeccapurple; height: 80px; width: 80px; padding: 20px; margin: 20px; border: 10px solid black; border-radius: 50%; float: left; shape-outside: content-box;}ボックス値を使用する場面
シェイプを作成するのに、ボックス値を使用すると簡単ですが、これはよく対応されているborder-radius プロパティを使用して定義することができる簡単なシェイプしか実現することができません。上記の使用例にあるような使い方の一つです。border-radius を使用して円形のシェイプを作成し、それに沿って文字列をカーブさせます。
いくらかの面白い効果を作成することができますが、単純なテクニックしか使っていません。この章の最後の例で、左右に 2 つの浮動状態の要素を作成し、それぞれの文字列寄りの方向に対して、 border-radius を 100% に設定しています。
<div> <div></div> <div></div> <p> 1782 年 11 月のある夜、伝えられるところによれば、フランスの小さな町アノネーで 2 人の兄弟が冬の暖炉のそばに座り、炉から立ち上る灰色の煙の渦が広い煙突をくねくねと登っていくのを見ていた。 2 人の名前はステファンおよびジョセフ・モンゴルフィエ、職業は紙漉き職人で、思慮深く、あらゆる科学的知識や新しい発見に深い関心を持っていた。 </p></div>body { font: 1.2em / 1.5 sans-serif;}.box { text-align: justify;}.shape-left,.shape-right { height: 100px; width: 100px;}.shape-left { margin: 0 20px 20px 0; border-bottom-right-radius: 100%; float: left; shape-outside: margin-box;}.shape-right { margin: 0 20px 20px; border-bottom-left-radius: 100%; float: right; shape-outside: margin-box;}もっと複雑なシェイプについては、この章の他のガイドにあるように、基本シェイプのいずれかを値として使用するか、画像からシェイプを定義するかする必要があります。