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

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

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 -->