float関連の問題で覚えておくべき５つの対策
CSSのfloat関係って、基本的に覚えておくべき事ですが、 動作がいまいちわかり辛かったり、バグが多かったりと、 float一つとっても覚えておくべきことって多いと思います。 なのでfloat関連の問題で覚えておくべき解決方法や 回避方法のことなどについてをまとめてみた。 １）floatしたボックスの下にコンテンツがこないようにする 写真の横に文字をもってきて、その文字が多ければ 写真の下にも文字をもってくる・・・というような場合は、 単純にimgにfloatをつけるだけでできるのですが、 コンテンツが下に来ないようにしたい場合はどうしたらいいか。 ■例１ー１（imgにのみfloat:left、下に回り込む） ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキス
jQuery自作：”jQuery SameHeight Plugin”を使いたいセレクタを指定して使えるようにした
先日作った「jQuery SameHeight Plugin」 今まではclassにsameHeightをつけなければ使用できませんでしたが、 ブクマコメントに、「$('hoge')sameHeight();みたいに使いたい」 というのが書いてあったので、対応してみました。 今までどおり、class="sameHeight"に対応はもちろん、 ユーザー指定のセレクタにも対応するようにしました。 ダウンロードして使用してください。 リンク先を保存で保存できます。 ダウンロード：jquery.sameHeight-1.1.js 動作を確認したブラウザは Firefox3、IE6、IE7、Safari3、Opera9.6、Chrome。 今回も、SafariとChromeはemなどの指定には対応できていません。 (高さがうまく確保できないですが、一応揃います。) 使い方 jQueryが無いと動か
jQuery自作：高さの違うブロックを同じ高さにするプラグイン”jQuery SameHeight Plugin”
高さの違うブロックを同じ高さにする方法は既に沢山でているのですが、 jQueryでできないかなって考えてみて、作ってみた。 これを使えば、内容量によってブロックの高さが変わっても、 自動的に揃えることができます。 今回はダウンロードできるようにしました。 リンク先を保存で保存して利用してください。 ダウンロード：jquery.sameHeight.js 動作を確認したブラウザは Firefox3、IE6、IE7、Safari3、Opera9.6、Chrome。 そのうち、SafariとChromeは設定によって若干うまくいかない時があるようです。 使い方 jQueryが無いと動かないので、ダウンロードしてきてください。 そして今回のプラグインもダウンロードしておく。 そして二つを利用するために、head内に記述。 <script src="js/jquery.js" type="text/
透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた
以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。 今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。 ※追記（09/07/24） 若干修正し、2.1にバージョンアップしました。 （今までのでも問題なく動作します。） ダウンロード プラグインはjQueryと下記プラグインを一緒に使ってください。 opacity-rollover2.1.js 透明度を利用したロールオーバー これは以前と同じ通常の使い方。マウスが画像の上にのると、画像の色が薄くなるロールオーバー。 ■使い方 $('#over1').opOver(); 適応させたいセレクタを指定し、opOver()で適応させる。 ■サンプルプレビュー これだけでも十分使えると思われます。画像を複数用意しなくとも、色の濃い画像を用意するだけで画像が変わ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
