読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

floatを使った回り込み

floatを使った回り込み

  • 「回り込み」という言葉は、インラインレベル要素のfloatに適用されます
  • 例えば、p要素内の先頭の文字と同じ扱いの画像に「float」を設定すると、それに続く p要素内の文字が float している画像の後ろに続いて並ぼうとします。それを、「画像の後ろに文字が回り込んでいる」と表現します


f:id:web-css-design:20170307132214p:plain

今月のおすすめ

きのこのオムライス
ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。800円

シーフードスパゲッティ
バルサミコ風味
エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。900円


f:id:web-css-design:20170307131638g:plain ←「title.gif」

f:id:web-css-design:20170307131618j:plain ←「ph01.jpg」

f:id:web-css-design:20170307131627j:plain ←「ph02.jpg」

<div id="content">  
<h2><img src="img/title.gif" alt="今月のおすすめ"></h2>
<h3>きのこのオムライス</h3>
<p><img src="img/ph01.jpg" alt="きのこのオムライス">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。<span class="price">800円</span></p>
<h3>シーフードスパゲッティ<br>
バルサミコ風味</h3>
<p><img src="img/ph02.jpg" alt="シーフードスパゲッティバルサミコ風味">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。<span class="price">900円</span></p>
</div><!-- /#content -->
解答例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>今月のおすすめ | 卵料理レストラン</title>
<style>
html, body, h2, h3, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
img {
  vertical-align: bottom;
}
#content {
  width: 500px;
  margin: 0 auto;
}
#content h2 {
  text-align: center;
  margin-bottom: 40px;
}
#content h3 {
  clear: right;
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 6px solid #C86D27;
  color: #652E10;
  line-height: 1.2;
}
#content p {
  line-height: 1.6;
}
#content>p>img {
  float: right;
  margin: 0 0 30px 16px;
}
</style>
</head>
<body>
<div id="content">
<h2><img src="img/title.gif" alt="今月のおすすめ"></h2>
<h3>きのこのオムライス</h3>
<p><img src="img/ph01.jpg" alt="">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。800円</p>
<h3>シーフードスパゲッティ<br>
バルサミコ風味</h3>
<p><img src="img/ph02.jpg" alt="">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。900円</p>
</div><!-- /#content -->
</body>
</html>