Setting Equal Heights with jQuery
July 8, 2016 Update: The techniques described in this blog post have been deprecated in favor of the Equal Heights section on our Layout Patterns documentation. We wrote a script to “equalize” the heights of boxes within the same container and create a tidy grid — with little overhead. Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned
Web デザイナーなら押さえておきたいフリーフォントをダウンロードできるサイト６０選 | Web活メモ帳
デザインによって必要なフォントは毎回違いますよね。毎回買う事ができれば良いのですが、そういうわけにもいかないのでやっぱりフリーで配布しているサイトを探す事になります。 ただフリーの物を探す際にはかなりの時間がかかる場合もあるので、フラストレーションが溜まらないようにしたいですね。フォントに限らない話ですが、、 というわけで、無料でダウンロードできるサイトを60紹介している「60 Best Websites To Download Free Fonts 」というエントリーのご紹介。覚えておきたいですね。 詳しくは以下 dafont.com 公式サイト 1001freefonts.com 公式サイト urbanfonts.com 公式サイト fontstock.net 公式サイト fonts500.com 公式サイト gmkfreefonts.com 公式サイト getfreefonts.in
CCライセンスのアイコンが3000個以上ダウンロードできる「p.yusukekamiyamane」 | Web活メモ帳
2つのアイコンセットが公開されており、合計で3000個以上になっています。 Fugue Icons が16×16ピクセルで2,646個。 Diagona Iconsが10×10、16×16ピクセルで400個のセットになっています。 アイコンを使用する場合にクレジット (リンク) を表示できない、またはしたくない場合は、ロイヤリティーフリーライセンスをご購入くださいとの事。 利用にはご注意ください。
月をまたがったカレンダーを表示できるjQueryプラグイン「jCal」 | Web活メモ帳
「jCal」は複数の日付を選択できるjQueryのカレンダープラグインです。 複数の月のカレンダーを表示させて指定の期間を選択させる事が可能になっています。 今までありそうでなかった操作性で、直感的に使用できそうですね。 デモはカレンダーにマウスオーバーする事で複数日が選択される事を強調してくれます。 また、画面上部のSelect Number of Daysの数値を変更させる事で選択可能な日数を変更できるようになっています。 デモ ファイルサイズも圧縮していない状態で14KBとの事。かなりの軽量化がされています。 ホテルの予約システムなんかに良さそうですね。
最近公開されたjqueryプラグイン9選 2010年11月 | Web活メモ帳
海外ブログのQuenessで、最近公開されたばかりの新しいjQueryプラグインをまとめたエントリー「9 Brilliant jQuery Plugins and Tutorials」が公開されていたのでご紹介します。 最近公開されたjqueryのプラグインの一覧です。 Face Detection 顔認識ができるプラグイン。 リンク Supersized! フルスクリーンの画像スライダ。 リンク Hover Slide Effect 独自の画像スライダー。 リンク Sliderman 多彩なエフェクトがつけれる画像スライダー。 リンク SpryMap 独自Mapが作れるプラグイン。 リンク Latest Tweets Tooltips Twitterのつぶやきを表示するツールチップ。 リンク Quovolver 複数のメッセージをアニメーションしながら次々表示していきます。 リンク Sl
ColorZillaが作成したPhotoshopのようなCSSグラデーションジェネレーター | Web活メモ帳
最近のブラウザは続々とCSS3に対応してきています。それに伴って多彩なジェネレータも続々登場してますね。 今回は、簡単にグラデーションが作れるCSS3のジェネレータ「Ultimate CSS Gradient Generator」を紹介します。 スライダを使用して色をカスタマイズ まさにPhotoshopのようなUIですが、ダブルクリックで色指定とドラッグで範囲選択が可能です。 （透明度がないだけですね。） 指定した内容がすぐにプレビューで確認できるのも嬉しいですね。 最後に”IE”に対応するかどうかのチェックをつけて完了です。 FIrefoxのプラグインColorZillaにも追加 開発元はFIrefoxのプラグインを開発しているColorZillaの方々なのですが、 プラグインのツールメニューにもリンクが追加されていますね。 CSS3に対応するのに、覚えておいて損はなさそうです。
[CSS]IEを含めた主要ブラウザと各スマートフォンに対応した@font-faceの指定方法
IE6, 7, 8, 9をはじめとする主要ブラウザ、iOS, Androidのスマートフォンに対応させるための@font-faceの指定方法を紹介します。 The New Bulletproof @Font-Face Syntax [ad#ad-2] 各ブラウザ・スマートフォンに対応させる@font-faceの指定方法 各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。 @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-w
WEBフォントの比較が簡単にできるサイト「Font comparer」 | Web活メモ帳
サイトはGoogle Font DirectoryとTypeKitというフォントサービスのAPIを使用して作成されているようです。 どちらのサービスもCSS3の「@font-face」プロパティを使用する事でWEBフォントが利用できるような仕組みのようです。 オプションでフォントの色の変更やtext shadowを適用することができました！ 気に入ったフォントをダウンロード フォントにマウスオーバーをするとGet fontというダウンロード用のリンクが表示されます。 すると画面の下部に埋め込み用のタグが表示されます。 これだけでサイトに組み込む事ができます。 簡単ですね！ ※ちなみに、webフォントとは何ぞや？という方はこちらの記事が分かりやすかったです。 IEにも対応！10分でできるWebフォント実装法
HTMLコーディングがブラウザに優しい作りをしているか教えてくれるブックマークレット「DOM Monster」 | Web活メモ帳
「DOM Monster」はHTMLの構造を判断して、ブラウザに優しい作り方をしているか判定してくれるブックマークレットです。 使い方は簡単で、調べたいサイト上でブックマークを実行するだけです。 問題がある場合に、解決方法を教えてくれます。 試しに当サイトで実行してみました。 あら。WARNで改善した方が良いよと言われてしまいました。 どうやらJSの読み込みが多いのが問題のようです・・・ いつか改善しますかね。 ページの健康状態をはかるのに、試してみてはいかがでしょうか。
タッチイベントのエミュレートが出来るブックマークレット「Phantom Limb」 | Web活メモ帳
モバイルアプリケーションを作る際には出来るだけ開発環境でデバッグを行いたいですよね？ 本日紹介する「Phantom Limb」はブラウザ上でタッチイベントをエミュレートしてデバッグを助けてくれるツールです。 リアルな指がマウスで操作できるようになり、ボタンの押しやすさや指で隠れても操作しやすいかなど確認できるようになります。 使用には以下のブックマークレットを保存して実行ください。 ブックマークレット すると、ブラウザ上でカスタムタッチイベントを送る事ができるようになります。 使ってみた様子 試しに当サイトで実行してみました。 指でタッチする際にはボタンが見えなくなったり、サイズ指定に悩んだりしますよね。 実際の指の大きさに近いので、モバイルアプリ開発が少し楽になりそうです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
簡単にモーダルウインドウを設置できるjQueryプラグイン「SimpleModal」 | Web活メモ帳
サイトのイベントを通知できるjQueryプラグイン「Pines Notify」 | Web活メモ帳
Flickrの写真からフォトギャラリーを作成できるPHPスクリプト | Web活メモ帳