テキストの回り込み演習
テキストの回り込みについて
文章を補足するのに画像を用いる場合、この「テキストの回り込み」を使用して関連画像を表示する事が多いです。
「テキストの回り込み」はスタイルシートを使用して実装します。
演習１
下の完成図を見ながら、マークアップ、スタイルシートを指定してみましょう
完成図
本文
Float Lesson
花の画像 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris at consequat massa. Ut eget egestas odio, in pulvinar diam.
Cras ex erat, dictum non volutpat id, lacinia auctor quam. Aliquam
quis massa in nibh imperdiet luctus. Integer justo nulla,
hendrerit quis arcu sit amet, faucibus elementum orci.
Nunc maximus massa et lectus faucibus elementum. Suspendisse nec
finibus neque. Fusce aliquet, odio vehicula interdum semper,
leo metus convallis nulla, eget scelerisque quam massa vel
turpis. In sit amet massa ut tellus iaculis blandit congue ac metus.
Fusce mi libero, laoreet quis dignissim tincidunt, aliquam at mauris.
Integer non orci erat. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Etiam interdum,
ante eu aliquam rhoncus, magna risus convallis ex, in malesuada urna
enim eu turpis. Maecenas ac sem ipsum. Morbi dapibus
porta urna, in lacinia tellus dictum ac.
花の画像 Fusce tempor dui id enim aliquet euismod. Curabitur
consectetur urna a ligula egestas maximus non id orci. Phasellus
eget sapien blandit ante accumsan blandit et vel lorem.
Nam scelerisque elementum dolor blandit vulputate.
Mauris in convallis lacus, sit amet congue mauris.
Integer diam nulla, tristique ac pulvinar vel,
tristique egestas arcu. Vestibulum nec commodo lectus.
Etiam dapibus magna orci. Integer a nunc dolor.
Donec hendrerit ante non commodo luctus.
Praesent blandit faucibus lectus vitae dignissim.
Vestibulum semper, sem facilisis gravida aliquam,
nulla ipsum sollicitudin odio, laoreet bibendum dolor
lectus eget justo. Integer sit amet lacus eu tellus auctor
faucibus vel vitae turpis. Cras a ullamcorper lectus,
at cursus sem. Mauris arcu purus, auctor et nulla sed, efficitur
vehicula velit. Integer vitae auctor tellus. Sed pulvinar,
justo a finibus congue, nisl diam cursus arcu, eu facilisis
neque urna vel turpis. Morbi vitae massa dignissim,
iaculis ligula nec, facilisis dolor. Etiam lobortis luctus sodales.
Praesent eget tellus id neque iaculis accumsan.使用画像
