HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎40. floatを利用したテクニック

      2017/07/11   hatano

floatを利用したカラムレイアウト

WEBサイトのレイアウトは、メインコンテンツをカラム分けしてレイアウトを作成します。代表的なカラムレイアウトは、2カラム、3カラムがあります。このカラム分けを行う際に、floatプロパティを利用します。

カラムとは

段組や段分けといった意味があります。WEBサイトのレイアウトで列をわけたブロックのことを指します。

2カラムレイアウト

企業サイトやブログなどでよく見られるレイアウトです。サイドバーにはサブメニューやバナーなど補助的な内容が入ります。
2カラムのレイアウト

3カラムレイアウト

「Yahoo! JAPAN」などのポータルサイトや「楽天」などのショッピングサイトに見られるレイアウトです。ページ数が多い大規模なサイトに使われることが多いレイアウトです。
3カラムのレイアウト

画像の周りにテキストを回り込ませる

ブロックレベル要素内にimgタグとテキストがある場合、通常は下記のようになります。
使用画像
img要素とテキスト

img要素floatを指定すると画像の周りにテキストを回りこませることができます。float:left;で指定するとテキストを右側に回りこませることができます。

右側のテキストの回り込み

テキストを左側に回りこませる場合はimg要素float:right;を指定します。

左側のテキストの回りこみ

CSSスプライトを利用したメニュー

下記の画像をfloatプロパティCSSスプライト画像置換を使ったナビゲーションを紹介します。ポイントは各a要素背景画像は左にずらして表示させ、hover時背景画像を上にずらすように値にマイナスを使うところです。今回、使用した画像は下記からダウンロードできます。
sprite-menu

CSSスプライトを使用したメニュー

広告

 - HTML・CSS