スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


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

高さ揃えJavaScriptの落とし穴

ボックスを格子状に並べて一覧表示する際、どうしても高さを揃えたいというのは当たり前の要求だと思います。
ところがCSSレイアウトの場合、隣り合うボックスの高さを揃えるということが案外大変です。
中身が画像などで高さが確実に固定できる場合はheightを指定すればいいだけなので問題ありませんが、
中身が可変コンテンツだった場合、ボックスから中身がはみ出してしまったりする危険があるため単純にheightを指定するわけには行きません。
しかもECサイトなどで商品一覧が動的に書き出されてくるような場合、何がどのような順番でいくつ書き出されるのか全く特定できないため、手動で高さを揃えてやることも不可能です。

そういう場合に威力を発揮するのがボックスの高さを揃えるためのJavaScriptです。
有名なものは

heightLine.js
jquery.flatheights.js

の2つだと思います。
これらは非常に便利で、私もよく利用させていただいています。
特に最近は2つ目のjquery.flatheighs.jsがお気に入りです。


が、このJS、思わぬ落とし穴がありました!それは、
子要素にheightが指定されていない画像が含まれているとボックスがつぶれて表示されてしまう(webkitのみ)
ということです。

普通はhtmlの属性かcssで画像のwidth・heightを指定するはずなので問題ないのですが、
サイズがバラバラの画像をプログラムで書き出すようなサイトの場合、個別の画像のwidth・heightを指定することが困難になるので敢えて指定しない、という判断を下すこともあると思います。
そういう所にこのjquery.flatheights.jsを使っていると、ブラウザが画像のサイズを取得して表示する前に高さを揃えようとしてしまうため、画像の高さが無い状態でボックスの高さを揃えてしまいます。

滅多にある状況ではないと思いますが、そういう状況も考えられなくもないので、このJSの利用を考えている方は一応注意した方がよいと思います。

ちなみにheightLine.jsの方だとどうなるか、というのは検証していないのでわかりません(汗)





このエントリーをはてなブックマークに追加
スポンサーサイト

【急募】XHTML+CSS講座応用編 モニター受講生募集のお知らせ

過去何度か初心者向けXHTML+CSS講座のモニター受講生を募集させていただきましたが、
今度は中級者向け講座のモニター受講生を募集します。
2コマ続きのものではないので、両方でもどちらかだけでもOKです。
(万一希望者多数の場合は2コマ希望の方を優先)
毎度急な話で申し訳ありませんが、ご希望の方はなる早でメッセージorDMください。
よろしくお願いしますm(_ _)m

【1】XHTML+CSS応用編(90分)
===================================================
■対象者:
・中級者向け(実務経験1~2年程度)
・XHTML+CSSで基本的なWebページ制作ができる方
・実務制作でどうやってCSSで再現したらいいか分からないことが時々ある方

■講座内容:
・フルCSSが苦手なレイアウトとその対処方法の解説
・複雑なレイアウトを再現する際に知っておきたいテクニックの紹介


【2】Webサイトの表示高速化(90分)
===================================================
■対象者:
・表示速度の最適化について基礎知識を習得したい方

■講座内容:
・制作者側で対応できる高速化手法の紹介
・CSS Spriteのデモンストレーション
・各種測定ツールの紹介と解説


【募集要項】
■募集人数:各回若干名
■日時:1/15(土)午後、1/19(水)午後
■場所:芦花公園
■持ち物:筆記用具
※今回は解説+デモンストレーションなので実技実習はありません。
 PC持参は必須ではありません。

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

どんな要素でも簡単にカルーセル化「CarouFredSel」

Amazon等でよく見かける「カルーセル」表示。
jQueryで自作したりその都度仕様にあったプラグインを探して導入したりするのは大変ですが、「CarouFredSel」なら簡単な設定でどんな要素でも簡単にカルーセル化でき、大変便利です。

http://caroufredsel.frebsite.nl/

このプラグインの便利なところは、

・<ul>や<img>などの単純なHTMLソースを自動的にカルーセル化してくれる
・縦、横、秒数設定、循環/非循環、NEXT/PREVボタンの有無など、豊富なオプションが用意されている

というところです。
サイトもヘルプもすべて英語ですが、「Configration Robot」が用意されており、各項目についてチェック方式で質問に答えていけばオプション設定の記述を自動的に書き出してくれる便利なサービスもついています。

http://caroufredsel.frebsite.nl/configuration_robot.php

これは便利!
おすすめです。


このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。