ランプの中身(Ruby on Railsのシステム開発)
ランプの中身(Ruby on Railsのシステム開発)では、株式会社ケイビーエムジェイのRuby on Railsエンジニアが蓄積したノウハウを公開しています。Ruby on Railに関する技術解説や実践的なノウハウなど、開発現場の技術に則したコンテンツを随時追加していきます。 初心者の方でもわかりやすい技術解説を心がけています。リクエスト、ご質問も受け付けいますので、ご気軽にコメントを記述して下さい。

< エラー表示で意図しない改行を解消する−f... | メイン  |  Rubyのマニュアル... >

Do Ruby!   Do Ruby!
 
maiの中身（ruby

2008.05.02

clearfixでfloat解除

ブックマークに追加する Subscribe with livedoor Reader あとで読む

こんにちは。
最近Rubyをあんまり触ってないmaiです。

あんまり触ってなくて、Rubyについてあまり語れるほどのことが無いので、
今日はstylesheetのちょっと役立つTipsをご紹介。

cssでfloatを使うと、画像やらボックスやらが親要素からはみ出しちゃうことがあります。
これを解消するには、親要素を閉じる前にfloatをclearで解除すればいいのですが、
空divでclearさせるのは無駄なソースだし美しくない。
そんな美学か美意識を持ってる人にお役立ちなのがclearfixというテクニックです。

御託を並べても仕方が無いので、さっくりとcssをご紹介。

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
 .clearfix {display: inline-block;}

このclearfixを、親要素に適用します。

<div id="main" class="clearfix">
<p style="float:left">左の要素</p>
<p style="float:right">右の要素</p>
</div>

 

こんなカンジ。
これでid mainのdivは二つのpを内包しているように振るまいます。
空divをかかなくてよくなるので、ソース上ちょっとスッキリするのもいいところ。

もともと、floatは通常の流れから切り離された浮動体なので、
親要素がfloatしている要素の高さを考慮しなくなるのは仕様上正しいことなんですが、
レイアウトを組む身としては、clearfixがなくても、
floatしている要素の高さも認識してほしいなぁと思わないでもないです。

ちなみに、clearfixについては以下のサイトも参考になります。

 clearfixの決定版を作る －モダンブラウザ編－

コメント (0)  |トラックバック (0)

ブックマークに追加する Subscribe with livedoor Reader あとで読む

トラックバック URL

この記事にコメントする

ニックネーム:
メールアドレス:
URL:



 
Do Ruby!   Do Ruby!
timelog

TOPICS

2008/05/07
「ZD Net Builder」に連載を始めました。第二回は「Rubyでどう書く？：連続した数列を範囲形式にまとめたい」が掲載されました。

2008/04/24
「アットマーク・アイティ」に『 Rubyを使ってPaSoRi経由でSuicaの乗車履歴を取得し、GoogleMapsやGoogleEarthで表示する』が掲載されました。

2008/02/29
「株式会社Impress Watch」様の「やじうまWatch」に「遠隔地のチョロQを操縦する方法 with JavaScript, AJAX, Rails, Gainer, Webカメラ, and USTREAM.TV」が掲載されました。

全体のRoR最新ブログ一覧

プロフィール

  • imai
  • rubyどころか開発すらも始めたばかりな超初心者のrailsとの格闘メモリー。
    初心者がつまづきそうなよくあるトラブルとか、意味不明としか思えない用語を初心者レベルに翻訳したりとかとかとか。

ブログの購読

RSS

timelog
株式会社ケイビーエムジェイロゴ