画像を3枚表示させました。画像とテキストが下揃えになっていて、なんとなくしっくりこないレイアウトになってしまっています。現状は、画像とテキストが同じ行ボックス内で並んでいて、一行目の先頭に画像、その後に「あいうえお...」というテキストが続いている状態です。テキストのサイズに対して画像のサイズが大きいので、画像だけが上に飛び出しているように見えるのです。いずれにしても、画像とテキストをもう少しバランス良く配置したいものです。そこで、CSSのfloatプロパティを使って画像を右側に寄せて、画像の左側にテキストを流し込むようにスタイル指定しようと思います。要素のフロート(浮遊)は、その概念が理解しづらく、初心者にはとっつきにくいものですが、とにかく実際に制作をして自分の目で動作を確かめてください。スタイルを適用するimg要素にclass属性でクラス名を付けます。index.htmlに以下の記述を追加してください。Reserved.</small></div></body></html>次に、CSSファイルのbase.cssに以下の記述を追加してください。追加する位置はCSSファイル内のどこでも良いのですが、CSSソースの最後尾に追加することにしましょう。20px;/*マージン*/float:right;/*画像を右寄せにする*/}保存をしたらブラウザで表示してみましょう。画像が右側に配置されて、その左側にテキストが流し込まれるようになれば成功です。変更前を確認するfloatプロパティを指定された要素(今回はimg要素)は、ウェブページからフロート(浮遊)した状態になります。フロート要素の後に続く要素は、空いたスペースに流し込まれたような配置になります。)に続けてクラス名を指定していますが、このような書式のセレクタをclassセレクタと呼びます。「infoimg_indexというクラス名を付けたすべての要素に対してスタイルを適用しなさい」という意味になります。画像をフロートさせて右寄せするようにスタイル指定しています。img要素をフロート(浮遊)させて右側へ寄せることで、空いた左部分に画像の後に続くテキストが流れ込みます。フロートの影響によるレイアウト崩れ画像を右寄せにしてテキストを左側へ流し込むスタイルにしたことで、確かに画像は右にテキストは左に配置されるようになりました。期待に反してレイアウトは崩れてしまっています。small要素でマークアップしている最後のコピーライト表記の部分まで画像の左側に流し込まれてしまっています。画像を右寄せ、テキストを左寄せにしてレイアウトを整えたかったのですが、かえってレイアウトが崩れてしまったようにも見えます。これは、img要素をフロートさせたことで、後に続くsmall要素などにもフロートの影響を与えてしまったことが原因です。次回、この問題を解決しましょう。idセレクタとclassセレクタidセレクタは、ウェブページ内の一箇所を特定してスタイルを適用する場合に使用します。id名は、ひとつのウェブページの中では同じ名前を複数箇所で指定することができないので、idセレクタを使えばウェブページ内の箇所を一意に特定することができるのです。メインメニュー部分などはひとつのウェブページの中に一箇所しか存在していないので、idセレクタでスタイル指定するのが適しています。}一方、ウェブページ内の複数個所に同じスタイルをまとめて適用する場合には、classセレクタが便利です。クラス名はひとつのウェブページの中で、同じものを重複して指定することができます。「新着情報」の3枚の画像に同じスタイルを指定する場合などには、classセレクタでスタイル指定するのが適しています。)に続けてクラス名を指定します。}idセレクタとclassセレクタは、どちらも使用頻度が高く、CSSでウェブページを制作するうえで必須の知識となります。それぞれの特徴を理解して、適切に使い分けられるようになりましょう。