図やグラフに対してテキストを回り込ませる

floatプロパティでグラフを配置する

グラフ（画像で配置）をfloatプロパティで右側に配置し、左側の空間にテキストを流し込みます。

グラフの部分はfigure要素、グラフのキャプション（説明文）をfigcaption要素でマークアップします。

HTMLのコード例

<h2>グラフに対してテキストを回り込ませる</h2>
<figure><img src="./images/pic_graph.png" alt="閲覧者の性別割合"><figcaption>閲覧者の性別割合</figcaption></figure>
<p>当サイトの閲覧者の性別は男性が75.4%、女性は24.6%となっています。</p>
<p>2016年は男性が81.8%、女性は18.2%、2017年が男性79.4%、女性20.6%と年々少しずつ女性の比率が高まってきており、女性のプログラマーが徐々に増えてきている可能性を示唆しています。</p>

CSSのコード例

p {
	margin-bottom: 15px;
	line-height: 1.6em;
}
figure {
	float: right;
	margin: 0 0 15px 15px;
	width: 30%;
}
	figure img {
		margin-bottom: 10px;
		max-width: 100%;
	}
	figcaption {
		font-size: 72%;
		text-align: center;
	}

figure要素に「float: right;」を指定して右側に配置しています。

子孫要素であるimg要素は表示最大幅を親要素の幅となるように指定し、さらにキャプションとの距離をmargin-bottomプロパティを使って調整しています。

グラフのキャプションを表すfigcaption要素はデフォルトだと左揃えの表示になるため、「text-align: center;」で中央揃えにしています。
あわせて、文字サイズも本文より小さくなるように調整しました。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。