SHU BLOG

NEW
お知らせ
NEW 2022.12.02 【CSS】marginの指定方法について TikTokにてショート動画公開中!!
お知らせ
NEW 2022.12.01 【WordPress】公開日と最終更新日を表示の方法を解説
お知らせ
2022.11.24 【WordPress】記事ページに表示する、しない条件分岐を解説

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回はレスポンシブデザイン、画像にテキストを回り込ませたい!/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)等は調整してください。
こちらにデモサイトを用意しました。
下記からご確認ください。

関連記事

【STEP01】レスポンシブデザイン、viewportを設定しよう!
viewport(ビューポート)とは、「表示領域」のことを示します。
【STEP02】レスポンシブデザイン、メディアクエリを設定しよう!
Media Queries(メディアクエリ)とは、「各デバイスに適したCSSを適用させる」ことを示します。

まとめ

今回はこれで以上です。

POINT
  • imgタグに、float(フロート)を指定します。
  • 回り込ませるだけなら、floatの方が簡単な場合もあります。
  • name="viewport"の設定を忘れないように注意しましょう。
  • こちらにデモサイトを用意しました。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

HP

お助けコネクト

神奈川県を中心に不用品回収・粗大ゴミ回収・遺品整理・ゴミ屋敷片付け・家具の移動 など
なんでもやります!!お気軽にご相談ください。詳細はコチラから

page_top