★画像のフロート配置
画像のフロート配置
前回、「新着情報」の画像を3枚表示させました。 しかし、画像とテキストが下揃えになっていて、なんとなくしっくりこないレイアウトになってしまっています。
現状は、画像とテキストが同じ行ボックス内で並んでいて、一行目の先頭に画像、その後に「あいうえお…」というテキストが続いている状態です。 テキストのサイズに対して画像のサイズが大きいので、画像だけが上に飛び出しているように見えるのです。
いずれにしても、画像とテキストをもう少しバランス良く配置したいものです。 そこで、CSSのfloatプロパティを使って画像を右側に寄せて、画像の左側にテキストを流し込むようにスタイル指定しようと思います。
要素のフロート（浮遊）は、その概念が理解しづらく、初心者にはとっつきにくいものですが、とにかく実際に制作をして自分の目で動作を確かめてください。
まず、スタイルを適用するimg要素にclass属性でクラス名を付けます。 index.htmlに以下の記述を追加してください。
HTMLソース（index.html）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="base.css"> <title>ウェブサンプル株式会社</title> </head> <body> <div id="pagebody"> <!-- ヘッダ --> <div id="header"> <h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1> </div> <!-- メインメニュー --> <ul id="menu"> <li><a href="index.html">ホーム</a></li> <li><a href="product.html">製品紹介</a></li> <li><a href="profile.html">会社概要</a></li> <li><a href="contact.html">お問合せ</a></li> </ul> <!-- ヘッダ画像 --> <div id="img_index"> <img src="./images/img_index.png" alt="あしたをみつめるウェブサンプル株式会社"> </div> <!-- インフォメーション --> <h2>新着情報</h2> <h3>新商品のご案内</h3> <p> <img src="images/index0001.png" alt="新商品のイメージ画像" class="infoimg_index"> あいうえおかきくけこさしすせそ（中略） </p> <h3>展示会への出展</h3> <p> <img src="images/index0002.png" alt="展示会への出展のイメージ画像" class="infoimg_index"> あいうえおかきくけこさしすせそ（中略） </p> <h3>環境への取り組み</h3> <p> <img src="images/index0003.png" alt="環境への取り組みのイメージ画像" class="infoimg_index"> あいうえおかきくけこさしすせそ（中略） </p> <!-- フッタ --> <small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small> </div> </body> </html>
次に、CSSファイルのbase.cssに以下の記述を追加してください。 追加する位置はCSSファイル内のどこでも良いのですが、CSSソースの最後尾に追加することにしましょう。
CSSソース（base.css）
@charset "utf-8";
/*============================================
全般的なスタイル
============================================*/
* {
margin:0; padding:0; /*全要素のマージン・パディングをリセット*/
}
body {
background-color:#cccccc; /*ページ全体の背景色*/
background-image:url("images/bg_body.png"); /*ウェブページ全体の背景画像*/
font-size:95%; /* フォントサイズを95%にする */
font-family: "ＭＳ ゴシック",sans-serif; /* フォントの種類をゴシック系にする */
line-height:1.5; /* 行の高さを1.5倍にする */
color:#333333; /* 文字色を濃い目のグレーにする */
}
div#pagebody {
width:1000px; margin:0 auto; /*内容全体をセンタリング*/
background-color:#ffffff; /*内容全体の背景色*/
background-image:url("images/bg_pagebody.png"); /*コンテンツ全体の背景画像*/
background-repeat:repeat-y; /*背景画像を縦方向に繰り返す*/
}
img {border:0;} /*画像のボーダーを0にする*/
/*============================================
ヘッダ
============================================*/
div#header {
height:80px; /*ヘッダ部分の高さ*/
}
div#header h1 {
padding:10px 0px 5px 20px; /*見出しの位置調整*/
font-size:18px; /*フォントのサイズ*/
font-family:Arial, Helvetica, sans-serif; /*フォントの種類*/
}
div#header h1 a {text-decoration:none;} /*リンクの下線を無くす*/
/*============================================
メインメニュー
============================================*/
ul#menu {
width:960px; height:50px; /*メインメニュー部分の幅と高さ*/
margin:0px 20px; /*上下マージン0px、左右マージン20px*/
}
#menu li {
list-style-type:none; /*リストマーカー無しにする*/
display:inline; /*リスト項目をインライン表示にする*/
float:left; /*リスト項目を横に並べる*/
}
#menu li a {
background-color:navy; /*背景色*/
color:#ffffff; /*文字色*/
display:block; /*リンク部分をブロック表示にする*/
width:240px; height:35px; /*幅と高さ*/
padding:15px 0px 0px 0px; /*上パディング*/
text-align:center; /*テキストをセンター揃えにする*/
text-decoration:none; /*リンク部分を下線無しにする*/
background-image:url(images/bg_menu1.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像を繰り返さない*/
}
#menu li a:hover {
background-color:#000066; /*リンクにマウスが乗ったら背景色を変更する*/
background-image:url(images/bg_menu2.png); /*リンクにマウスが乗ったら背景画像を変更する*/
}
/*============================================
ヘッダ画像
============================================*/
#img_index {
width:960px; height:360px; /*トップページのヘッダ画像の表示サイズを指定*/
margin:5px 20px; /*マージン*/
}
.infoimg_index {
width:200px; height:150px; /*画像の表示サイズを指定*/
margin:0px 0px 20px 20px; /*マージン*/
float:right; /*画像を右寄せにする*/
}
保存をしたらブラウザで表示してみましょう。 画像が右側に配置されて、その左側にテキストが流し込まれるようになれば成功です。
floatプロパティを指定された要素（今回はimg要素）は、ウェブページからフロート（浮遊）した状態になります。フロート要素の後に続く要素は、空いたスペースに流し込まれたような配置になります。
今回追加したCSSソースを確認
classセレクタ
.infoimg_index { ～ } では、ドット（ . ）に続けてクラス名を指定していますが、このような書式のセレクタをclassセレクタと呼びます。 「infoimg_indexというクラス名を付けたすべての要素に対してスタイルを適用しなさい」という意味になります。
画像を右寄せにする
float:right; は、画像をフロートさせて右寄せするようにスタイル指定しています。 img要素をフロート（浮遊）させて右側へ寄せることで、空いた左部分に画像の後に続くテキストが流れ込みます。
フロートの影響によるレイアウト崩れ
画像を右寄せにしてテキストを左側へ流し込むスタイルにしたことで、確かに画像は右にテキストは左に配置されるようになりました。
しかし、期待に反してレイアウトは崩れてしまっています。３枚の画像のグリッドラインが揃わずに、２枚目の画像だけがセンターへ寄っているのが気になりますし、 small要素でマークアップしている最後のコピーライト表記の部分まで画像の左側に流し込まれてしまっています。
画像を右寄せ、テキストを左寄せにしてレイアウトを整えたかったのですが、かえってレイアウトが崩れてしまったようにも見えます。 これは、img要素をフロートさせたことで、後に続くsmall要素などにもフロートの影響を与えてしまったことが原因です。
次回、この問題を解決しましょう。
idセレクタとclassセレクタ
idセレクタは、ウェブページ内の一箇所を特定してスタイルを適用する場合に使用します。 id名は、ひとつのウェブページの中では同じ名前を複数箇所で指定することができないので、idセレクタを使えばウェブページ内の箇所を一意に特定することができるのです。
例えば、メインメニュー部分などはひとつのウェブページの中に一箇所しか存在していないので、idセレクタでスタイル指定するのが適しています。
idセレクタの書き方
#abc { ～ }
一方、ウェブページ内の複数個所に同じスタイルをまとめて適用する場合には、classセレクタが便利です。 クラス名はひとつのウェブページの中で、同じものを重複して指定することができます。
例えば、｢新着情報｣の３枚の画像に同じスタイルを指定する場合などには、classセレクタでスタイル指定するのが適しています。
idセレクタがナンバーサイン（ # ）に続けてid名を記述するのに対して、classセレクタはドット（ . ）に続けてクラス名を指定します。
classセレクタの書き方
.abc { ～ }
idセレクタとclassセレクタは、どちらも使用頻度が高く、CSSでウェブページを制作するうえで必須の知識となります。 それぞれの特徴を理解して、適切に使い分けられるようになりましょう。
まとめ
- 要素を右に寄せるには、floatプロパティでrightを指定する
- フロート要素の反対側に空いたスペースには、その後に続く要素が流し込まれる
- classセレクタを使うと、ウェブページ内の複数箇所に同じスタイルをまとめて適用できる
| <前へ | 目次へ | 次へ> |
Sponsors
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
