jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
第6回 Firebug要らずなChromeのWeb Inspector | gihyo.jp
こんにちは、太田です。今回はChrome拡張の開発時のノウハウとして、開発ツールの解説をお送りします。Google ChromeにはWebKit由来のWeb Inspectorというデバッグツールが搭載されています。以前にも少しだけ紹介しましたが、今回は具体的な使い方まで掘り下げて解説します。なお、今回のWeb Inspectorの解説はChrome拡張だけでなく、JavaScriptを使ったウェブアプリケーションの開発に一般的に役立つノウハウとなっています。 WebKitのWeb Inspector Chrome拡張の開発の必需品であるWeb Inspectorですが、こちらは元々WebKit（Safari）で開発されたもので、Google Chrome（Chromium）に搭載されているものはさらに機能が追加されています。FirefoxにはFirebugという定番ツールがありますが、そ
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
Webデバッガ最強はFirebugだが、ほかのブラウザでは… | エンタープライズ | マイコミジャーナル
JavaScriptベースのWebアプリケーションやWebサイトのデザイン調整に欠かせないツールがFirebugだ。Webブラウザ内で直接インスペクトやデバッグを実施するツールとしては実質的にデファクトスタンダードといっていい。どれも満足のいく機能ばかりだが、唯一不満な点をあげるとすればFirefoxエクステンションとして実装されているためほかのWebブラウザでは使えないというところだろう。IEが最大シェアを持っていることにかわりはなく、むしろ標準に準拠していないことが多いIEでこそ同様のツールが必要だ。 そこでKevin Yank氏がSitePointにアップしたドキュメントIn-browser Development Tools: Firebug Still Kingに注目したい。同氏は代表的なWebブラウザとそのデバッグ/インスペクトツールに言及し現状をまとめている。内容を簡単にかい
404 Blog Not Found:javascript - tableの横列・縦列をハイライト
2008年03月18日06:30 カテゴリLightweight LanguagesTips javascript - tableの横列・縦列をハイライト これの「横列・縦列をハイライト」をDHTMLで。 Learn Cool Microsoft Excel Conditional Formatting Tricks - Be a Rock star (Tips | How tos - Save time, impress everyone) | Pointy Haired Dilbert - Chandoo.org エクセルのデータを見やすくする5つの簡単なテクニック | コリス まずは邪、じゃなくて横縞。 現金・預金株式以外の証券株式・出資金金融派生商品保険・年金準備金預け金未収・未払金対外証券投資その他合計 1979FY1,948,234242,722452,2410432,1241
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
Lightweight Image Gallery with Thumbnails | David’s kitchen
If you have a home page you might like to show images in an image gallery. There are numerous of different solutions for this on the web. In this guide you will learn to create your very own script for a image gallery using JavaScript and the open source free jQuery library.These are the basics of the image gallery: No server-side scripting Super-fast browsing without fades Dead-simple HTML with a
404 Blog Not Found:ソースを貼付ける50の方法
2006年09月06日16:15 カテゴリLightweight Languages ソースを貼付ける50の方法 いえ、50もありません。Paul Simonの歌のもじりです、はい。ちなみに6曲目。いいんです。Paul Simonだって50も紹介してないんですから。 i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻 昨日のJavascriptの記事を書いていて思ったのですが、みなさんコードをブログに貼り付けるときってどうしているんですかね。<textarea>で囲む 身も蓋もないけど、一番実用性が高いのがこの方法かも知れません。 HTMLの精神からいくととんでもなく堕落した方法ですが、 コピペがしやすい たいていのブラウザーで、いちいちソース中のtagを実体参照化しなくてもちゃんとrenderされる という実においしい特典があります。実は一つ前のentryで
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
便利すぎて困る程のFireBug1.0系を使ってみよう:phpspot開発日誌
Firebug - Web Development Evolved 便利すぎて困る程のFireBug1.0系を使ってみよう、ということで、広く使われているであろう0.4系と変わった点をプレビュー。 Googleなどの検索エンジンで、addons.mozilla.org にUPされている0.4系が上に表示されているため、まだ1.0系を使っていない人も多いのではないでしょうか？(という私もそうでした) FireBug1.0系のインストール方法の紹介〜その追加された強力すぎる機能について見ていきましょう。 FireBug1.0系インストール http://www.getfirebug.com/ にてFireBug1.0系のインストール。 FireFox - DOMインスペクタのインストール FireFoxインストール時にDOMインスペクタが入っていない場合は、FireBug1.0系の機能を最大限
GIGAZINE - 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」
「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。 どれぐらい丸くなるのかという実例とコードのダウンロード、設置方法は以下を参照。 例その1、3ピクセルの白いボーダーを使い、角は半径20ピクセルで丸くなってます 例その2、固定幅と高さで画像を固定し、角は半径20ピクセルで丸くしている例 ダウンロードはこちらから 使い方は以下を参照 http://www.curvycorners.net/ ほとんどのメジャーなブラウザをサポートしているので汎用性も高く、使い勝手もいい感じです。
我的春秋: JavaScript ソースが HTML から消える日
［2006-06-10 付記］このエントリーは、2006-01-05 時点のもので情報が古くなってます。現時点で把握している最新情報を「続 JavaScript ソースが HTML から消える日」にアップしましたので、あわせてご参照ください。 Behaviour.js ― JavaScript ソースを (X)HTML から完全分離できるライブラリ 昨日、職場の同僚の人がたまたま見つけた JavaScript ライブラリを教えていただたんですけど、これがもうびっくり！なんと、このライブラリがあれば、イベントハンドラーも含めて JavaScript ソースが (X)HTML の body 内から、ほぼ完全に分離できてしまいます！ しかも、HTML 内で JavaScript 関数を適用する場所は、なんと JavaScript ソース内に CSS セレクタを書き込むことで指定！あまり日本では取
CSS+JavaScript によるカラムレイアウト切り替え
公開テンプレート（Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ）でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。 とりあえず、どのような動作になるかをサンプルでお試しください（中央上部のプルダウンメニューで操作できます）。 以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。 今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。 その理由は、現在公開しているテンプレートでは1つのスタイルシートに 3カラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Simpletip - A simple jQuery tooltip plugin
CSS Tips：メモランダム