CSS - 形状：初級者向けコンテンツフロー形状化ガイド

こんにちは、Webデザイナー志望の方々！今日は、CSS形状のワクワクする世界に飛び込んでみましょう。あなたの近所の親切なコンピュータ教師として、この旅をステップバイステップで案内します。コードを書いたことがない方でも心配ありません。基本的なところから始めて、少しずつ進んでいきましょう。で、コーヒー（またはあなたが好きなお茶）を飲みながら、始めましょう！

CSS形状とは？

本題に入る前に、CSS形状について理解しましょう。部屋に家具を並べるとき、すべてが完璧な長方形で並んでいたらどうでしょうか？CSS形状が役に立つ的就是ここです。CSS形状を使うことで、テキストが回り込む領域を定義して、興味深いレイアウトを作成できます。

shape-outsideプロパティ

CSS形状の中心には、shape-outsideプロパティがあります。この魔法のようなプロパティを使うと、テキストが回り込む形状を定義できます。まるでテキストに「ここに見えない形状があるから、これにぶつかれないようにね！」と言っているようなものです。

シntax

shape-outsideの基本シntaxは非常にシンプルです：

.element {
shape-outside: value;
}

簡単ですね！でも、楽しい部分は異なる値を試すことから始まります！

shape-outsideの可能な値

では、作成できるさまざまな形状を見てみましょう。以下に便利な表を用意しました：

値	説明
margin-box	要素のマージンboxを形状として使用
content-box	要素のコンテンツboxを形状として使用
padding-box	要素のパディングboxを形状として使用
border-box	要素のボーダーボックスを形状として使用
circle()	円形を生成
ellipse()	楕円形を生成
url()	画像を使用して形状を定義
polygon()	多角形を生成
inset()	折り込まれた長方形を生成
path()	SVGパスを使用して形状を定義
linear-gradient()	線形グラデーションを使用して形状を定義

うわあ、これはすごいリストですね！心配しないでください。これらの各値について、例を交えて説明していきます。

適用範囲

深く掘り下げる前に、shape-outsideは浮动要素にのみ適用されることに注意してください。したがって、要素にfloatプロパティを設定していることを確認してください！

Let's Shape It Up!

CSS shape-outside - margin-box

.shape {
float: left;
width: 100px;
height: 100px;
background: red;
shape-outside: margin-box;
margin: 20px;
}

この例では、テキストは赤い正方形のマージンボックスの周りに流れます。まるで形状に少しだけ個人的な空間を与えているようなものです！

CSS shape-outside - content-box

.shape {
float: left;
width: 100px;
height: 100px;
background: blue;
shape-outside: content-box;
padding: 20px;
}

ここでは、テキストはコンテンツボックスに密着し、パディングを無視します。テキストが形状に近づきすぎるのを好むときに最適です！

CSS shape-outside - padding-box

.shape {
float: left;
width: 100px;
height: 100px;
background: green;
shape-outside: padding-box;
padding: 20px;
}

padding-boxでは、テキストはパディングを尊重しますが、ボーダーを無視します。礼儀正しい客のように、あまり押し寄せすぎないようにします！

CSS shape-outside - border-box

.shape {
float: left;
width: 100px;
height: 100px;
background: yellow;
shape-outside: border-box;
border: 20px solid black;
}

border-box値は、ボーダーを形状に含めます。テキストが要素全体、ボーダーを含めて回り込むときに最適です。

CSS shape-outside - circle()

.shape {
float: left;
width: 100px;
height: 100px;
background: purple;
shape-outside: circle(50%);
border-radius: 50%;
}

これは、テキストが回り込む完璧な円形を生成します。レイアウトに丸い拍手を与えるようなものです！

CSS shape-outside - ellipse()

.shape {
float: left;
width: 150px;
height: 100px;
background: orange;
shape-outside: ellipse(40% 50%);
border-radius: 50%;
}

ellipse()を使うと、楕円形を生成できます。デザインに卵の形を加えるのに最適です！（ここでパパジョークを忍び込ませてしまいました。）

CSS shape-outside - url()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: url('star.png');
background: url('star.png') no-repeat;
background-size: contain;
}

これは、画像を使用して形状を定義します。テキストが流れる場所に透明な部分があることを確認してください！

CSS shape-outside - polygon()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
background: pink;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

polygon()を使うと、任意の形状を作成できます。この例では、星の形状を作成しています。まるで幾何学の魔法使いのようです！

CSS shape-outside - inset()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: inset(20px 30px 40px 10px round 10px);
background: lightblue;
clip-path: inset(20px 30px 40px 10px round 10px);
}

inset()を使うと、角丸みのある長方形を作成できます。吹き出しやカスタムボタンを作成するのに最適です。

CSS shape-outside - path()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
background: lightgreen;
clip-path: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
}

path()関数を使うと、SVGパスデータを使用して複雑な形状を作成できます。まるでデジタルアーティストのようです！

CSS shape-outside - linear-gradient()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: linear-gradient(45deg, transparent 50%, black 50%);
background: linear-gradient(45deg, transparent 50%, black 50%);
}

この賢い手口は、グラデーションを使用して対角形状を作成します。デザインに角の効いた風合いを加えるのに最適です！

CSS shape-outside - 関連プロパティ

shape-outsideを最大限に活用するために、以下の関連プロパティを一緒に使用することが多いです：

• shape-image-threshold: 画像から形状を抽出するためのアルファチャネルの閾値を定義します。
• shape-margin: 形状にマージンを追加します。

以下に簡単な例を示します：

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: url('star.png');
shape-image-threshold: 0.5;
shape-margin: 20px;
background: url('star.png') no-repeat;
background-size: contain;
}

このコードは、画像から星の形状を抽出し、閾値を0.5に設定し、形状に20pxのマージンを追加します。

締めくくり

そして、ここまでがCSS形状の旅です。私たちは、シンプルなボックスから複雑なパスまで、さまざまなCSS形状を旅しました。CSS形状をマスターする鍵は実験です。異なる値を試してみて、何が起こるかを確認してください。

このまとめを迎えるにあたり、ある生徒が私に言った言葉を思い出しました。「CSS形状は魔法のようです。不可能を可能にします！」そして、彼女の言葉は間違っていませんでした。CSS形状を使うことで、退屈な箱型のレイアウトを芸術作品に変えることができます。

ですから、Webデザインを形作ってください！そして、CSSの世界では間違いはありません。ただ楽しい小さな事故があるだけです（ボブ・ロスが言うように）。ハッピーコーディング！

Credits: Image by storyset