レスポンシブデザイン、画像にテキストを回り込ませたい!

シュウ

今回はレスポンシブデザイン、画像にテキストを回り込ませたい!/span>
の解説になります！

こんな方に読んでほしい

レスポンシブデザインを学び始めた方へ
レスポンシブ講座Part03になります。
今回は「画像にテキストを回り込ませる」について解説しております。

レスポンシブデザインとは、表示領域の幅によって見え方が変わるデザイン(Webサイトの見た目)のことを示します。

前回は、Media Queries(メディアクエリ)について解説しました。
Media Queriesとは、「各デバイスに適したCSSを適用させる」ことを示します。
ただし、ある条件を満たす時だけ指定したCSSが適用されるため、指定には注意が必要になります。
下記のMedia Queries(メディアクエリ)に関する記事を理解してPart03にいきましょう。

メディアクエリに関する記事

レスポンシブデザイン、メディアクエリを設定しよう!

「各デバイスに適したCSSを適用させる」ことを示します。

画像にテキストを回り込ませるについて

レイアウトをする際で、パソコン(PC)の表示のときだけ、画像に対してテキストを回り込ませます。
タブレット端末、スマートフォン端末では、画像、テキストの流れにします。
下記はイメージ図になります。

上記のように、各デバイスに適したCSSを適用させ、レイアウトを変更していきます。
基本的なHTMLは以下のようになります。

HTMLについて

今回は、ul、liに含まれるimgタグに回り込ませる指定します。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像にテキストを回り込ませたい!</title>	
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<ul>
		<li>
			<img src="画像パス" alt="">
			<p>2021/00.00</p>
			<h3>赤色(情熱・強さ)とは</h3>
			<p>情熱・強さ・生命力.... など 以下省略</p>
		</li>

		<li>
			<img src="画像パス" alt="">
			<p>2021/00.00</p>
			<h3>橙色(ぬくもり・健康)とは</h3>
			<p>ぬくもり・健康.... など 以下省略</p>
		</li>
	</ul>
</body>
</html>

※name="viewport"の設定を忘れないように注意しましょう。

CSSについて

今回は回り込ませるという事で、imgタグに、float(フロート)を指定します。

横並びだけなら、display flexが一番良い指定方法になりますが、
回り込ませるだけなら、floatの方が簡単な場合もあります。

ブレイクポイントを合わせてCSSを指定します。
書き方は以下のようになります。

回り込ませる

<ul>
	<li>
		<img src="画像パス" alt="">
		<p>2021/00.00</p>
		<h3>赤色(情熱・強さ)とは</h3>
		<p>情熱・強さ・生命力.... など 以下省略</p>
	</li>

	<li>
		<img src="画像パス" alt="">
		<p>2021/00.00</p>
		<h3>橙色(ぬくもり・健康)とは</h3>
		<p>ぬくもり・健康.... など 以下省略</p>
	</li>
</ul>

/*--スマートフォン--*/
/*--メディアクエリの記述なし--*/
ul {
	width: 100%;
	margin: 0 auto;
	padding: 2em;
	box-sizing: border-box;
	background: #f9f9f9;
}

ul li {
	border: solid 1px #cccccc;
	background-color: #ffffff;
	padding: 2em;
	box-sizing: border-box;
	list-style: none;
}

ul li img {
	width: 100%;
	text-align: center;
}

ul li h3 {
	font-size: 1.2rem;
	font-weight: bold;
	padding: .5em 0;
}

ul li p {font-size: 1rem;}
	
ul li p:first-of-type {padding-top: 2em;}
ul li + li {margin-top: 2em;}

/*--PC--*/
@media screen and (min-width: 1025px){
	ul {width: 60%;}
	
	ul li {overflow: hidden;}
	
	ul li img {
		width: 200px;
		float: left; /*--フロートを指定--*/
		margin-right: 2em;
	}
}

文字サイズ、文字色や幅(width)等は調整してください。
こちらにデモサイトを用意しました。
下記からご確認ください。