新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

「float」で親要素の高さがなくなってしまったときは親要素に「float」【CSS】

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

HTML・CSSコーディングで2カラム、3カラムを実装するときに最も使用頻度の高いCSSプロパティはfloatでしょうね。
左のボックス(div等)にfloat:left、右のボックス(div等)にfloat:rightとすることで2カラムを作ることができます。
(それぞれ、widthの設定も忘れずに) 
ただ、これを囲む親要素のバックグラウンドに色を入れたいときなどにうまくいかないことがあります。
たとえばこんな例です。

スポンサーリンク
 

簡単に2カラムのレイアウトを作ってみました。

□ HTML

<div id=”wrapper”>
  <div id=”header”> ヘッダー  </div>
  <div id=”main”>
    <div id=”nav”> ナビ  </div>
    <div id=”cont”> コンテンツ  </div>
  </div>
  <div id=”footer”> フッター  </div>
</div>

□ CSS

#wrapper {
margin: auto;
width: 800px;
background-color: gray;
}
#main {
background-color: yellow;
}
#nav {
float: left;
width: 250px;
height: 300px;
background-color: pink;
}
#cont {
float: right;
width: 550px;
height: 500px;
background-color: skyblue;
}
#footer {
clear: both;
}

□ デザイン 
パターン1

ここで実は反映されていない色(ボックス)があるのに気づくと思います。
それぞれfloatで左右に振ったnavとcontentを囲んだmainです。
ここに、バックグランドとしてyellowを設定していますが、これが出てきていません。

実は、floatを指定したボックスはその上のボックスからは無いものと判断されてしまいます。
今回の場合はmain内にnavとcontentがあって、その両方ともにfloatの設定をしているので、
mainの中が何もないと判断されて高さが0になってしまっているのです。

これを解決させる方法は3つ考えられます。

まず、mainに高さ(height)を設定する方法。

これが理論的には一番わかり易いですが内包されているnavやcontentの高さが変わってきたときにそれに合わせてmainの高さも設定しなければならないのがちょっと良くありません。

そして、mainにoverflow:hiddenと設定する方法。

これはoverflowプロパティの特性を利用したなかなか便利な方法。
でも、overflowというプロパティがなくなってしまうと困る(まあ、そんなことはないと思いますが。)
□ とっても使えるoverflowプロパティ。その使い方色々。 – CSS HappyLife

最後に、main自体にfloatを指定する方法。

これが個人的には一番オススメです。
理論的にも分かりやすいしfloatで生まれた問題はfloatで解決させるに限ります。
つまり、親要素自体にも「float:left」(もしくはfloat:right)と指定してあげればOK。
実は別記事で解説しますがpositon:absoluteにおける問題点も親要素にpositionを設定することで解決します。
これと合わせて、覚えておくと分かりやすい。

ということで、CSSを以下のように書けば解決します。

□ CSS

#wrapper {
margin: auto;
width: 800px;
background-color: gray;
}
#main {
float: left;
background-color: yellow;
}
#nav {
float: left;
width: 250px;
height: 300px;
background-color: pink;
}
#cont {
float: right;
width: 550px;
height: 500px;
background-color: skyblue;
}
#footer {
clear: both;
}

□ デザイン
パターン2

書き足した部分を赤字にしました。

 - Webデザイン, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

殆どのスマホユーザーの個人情報はFacebookに握られている

そう、それがシャドープロファイルと言われているものです。
そして怖いのはこのシャドープロファイル、Facebookアカウントを作ったことのない人のものまで作られているとのことです。

あるFacebookユーザーの連絡先にあなたの個人情報が書かれていたら注意。
その方がFacebookに連絡先へのアクセスを許可していたらあなたがFacebookをやっていなくてもアウトです。 

ではどうやったら防げるのか?
最近ではFacebookアプリがプリインストールされているスマホ(スマートフォン)も多いのでほぼ防ぐことは不可能でしょうね。

つまり、

過去にFacebookのアカウントを作ったことがなく、Facebookを利用している人とアドレスなどの交換をしていないという場合のみ「あなたのシャドープロファイルは作られていません」

とのこと。
Facebookのアカウントを作ったことがない人は結構いるんじゃないかと思います。
ただ、Facebookを利用している人とアドレス交換をしていない人なんて殆どいないんじゃないでしょうか?
そもそも、その人がFacebookをやっているのかどうか調べてアドレス交換するなんてことできないでしょうし。。

これから、こういった情報が一般的になってくると、自分のようにFacebookやってる感を前面に出している人なんかは逆に、嫌厭されてしまうような時代がきてしまうのかもしれません。
でもね。
結局は架空請求や先日被害にあった債権回収詐欺等、それを使う悪いやつがいなければ別に個人情報何ら問題ないんですよね。
だって、かつては電話帳(ハローページ)に普通に電話番号が載っていた時代があるんですから。
嫌な時代になっちゃいましたねぇ。。

あとはFacebookの技術を信じて、そういった悪い輩に個人情報が流れないようにしてもらうしかないですね。
よく、「あとは神のみぞ知る」なんてこと言うことがありますが、Facebookもそういう意味では神の領域に入りつつあるのでしょうか?
人間が神の領域に足を踏み入れるとどうなってしまうのか? 注目して行きましょう。 

ワードプレス(WordPress)、トップページとは別の場所で記事一覧を表示させる方法 #wp

1年以上前の記事です。内容が古い可能性があります。ワードプレス(WordPres …

Illustrator、Photoshopが起動しない。「コンピューターにMSVCR100.dll(MSVCR110.dll)が無いためプログラムを開始できません」の対処法

1年以上前の記事です。内容が古い可能性があります。年明け早々、自分のパソコンの「 …

no image
これから

1年以上前の記事です。内容が古い可能性があります。これからのネット社会はどうなっ …

no image
ウォッシャー液の濃度を薄めると冬場危険な目にあうよ

1年以上前の記事です。内容が古い可能性があります。今年の冬は寒いですよね。 震災 …

「Adobe Bridge」侮れじ、画像をまとめてPhotoshopのレイヤーにできる機能が便利

1年以上前の記事です。内容が古い可能性があります。以前使っていたマシン、及び以前 …

DreamweaverとFC2ホームページで作るサイト定義(サイト公開編)

1年以上前の記事です。内容が古い可能性があります。前編 → 後編 → 公開編 最 …

「Windows Media Player」でCDの曲を吸い出す(取り込む)方法

1年以上前の記事です。内容が古い可能性があります。個別授業の生徒さんの知り合いに …

Flashファイル(swf)のサイズ(widthとheight)の調べ方

1年以上前の記事です。内容が古い可能性があります。バージョンアップ、仕様変更によ …

Googleマップで好きなところにピンを立てる方法

1年以上前の記事です。内容が古い可能性があります。以下の記事を参考にGoogle …

血液型オヤジ