カラムの高さを単に揃えるだけでなく、アニメーションで揃えたり、指定した値に揃えることができるスクリプトを紹介します。
カラムの高さを単に揃えるだけでなく、アニメーションで揃えたり、指定した値に揃えることができるスクリプトを紹介します。
#blogっぷり!の中で志向の異なる技術ネタw Movable Type で画像のサムネイルを生成する場合、元画像へのリンク付きで表示する <$mt:AssetThumbnailLink$> を使う方法と、 サムネイルの URL を表示する <$mt:AssetThumbnailURL$> を使う方法とがあります。 前者の場合、 <$mt:AssetThumbnailLink width="100"$> とすれば、 <a href="(元画像のURL)"><img src="(生成したサムネイルのURL)" width="100" height="75" alt="" /></a> という具合に高さ(<$mt:AssetThumbnailLink$> で高さを指定した場合は幅)を自動計算してソースに表示してくれます。 しかし、後者の場合は <$mt:AssetThumbnail
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
はじめまして、こんにちは。趣味は朝練のウエニシです。 既にweb上には業界の諸先輩方が書いておられるTipsなどが星の数ほどありますが、 上級者向けに書かれた記事などで内容が省略されていて、初心者や中級者にとってはもう少し詳しく説明されているとありがたいなあと思う事がよくあります。 自分自身もその一人で、調べたい事に関して説明しているサイトをいくつか見て、要約してまとめる事が多いです。ので、 そういったものを自分のメモの中で終わらせるのではなく、自分の備忘録的な意味も込めて、 このブログで公開していきたいと思います。 もちろんその他の事もいろいろ書いて行きたいと思っております! 記念すべきブログ1号目は、弊社の代表の木村が作りました、 複数のブロック要素の高さを、一行ごとに一番高い高さに揃えてくれるJavaScriptライブラリ「fixHeight.js」の事について書きたい
Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。 ざっといくつかご紹介。 jQueryでカラムの高さを統一する equalHeights pluginを使って、一行でカラムの高さを同じにする 入力中のフォームをハイライトする highlighting the label along with the selected input fieldを使って、フォームのユーザビリティーを上げるテクニック 角丸 jQuery Curvy Cornersで角丸を実装する メニューの背景をアニメーションさせる メニューにマウスオーバーしたときに、一瞬でhover画像に切り替えるのではなく、ふわ〜っとアニメーションして切り替えるテクニック。例:Create an Attractive jQuery Menu with Fade In and Fade
福井でホームページ制作・携帯モバイルサイト制作・SNS構築・ビジネスブログ構築・Webシステム構築をしているWebディレクターのブログ。 li を float:left で横並びにした場合、li の中の文章の量や画像の高さが違ってくると、綺麗に回り込みしてくれません。 これを綺麗に回り込みさせる場合、display:inline-block;を使用します。 inline-blockは、あまり知られていないマイナーなプロパティですが。。。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="j
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く