ページ内のパンくず的なものを実装するjQueryプラグイン・Sausage
うまく説明出来ないんですがページ内の 右端にパンくずっぽいページ内リンクを 作成するjQueryプラグイン・Sausage。 視覚的に分かりやすくなり、コンテンツ内に 目次のようなものを置く必要も無くなります。 縦に長いページにせざるを得ないコンテンツ に良さそうです。 パンくずっていうとちょっと語弊あるかもですが他にいい表現が思いつかないのでこいつ頭悪いなと思ったらデモ見てください。URLに#も付かないのでSEO的に妨げることも無いかと思います。また、ツールチップも出るので今どこにいるかを把握しやすくなりそうです。 たぶん、ソーセージのようにパンくずっぽいものが繋がってるからだと思います・・デモを見れば納得出来る（といいんですけどね） 右端にこのようなパンくずのようなものを設置するプラグインです。クリックでその段落の頭に飛ぶことができます。 使い方<script type="text/j
テキストにアイソメトリック風のエフェクトを加えるjQueryプラグイン・JQISOTEXT
なかなかユニークだったのでメモ的に。 普通のテキストに等角投影法を使った ようなエフェクトを加えるjQueryプラグ インです。画像ではなく、テキストのみ でちょっとしたタイポグラフィも作れそう。 IE6でも7でも動作してくれますよ。 アイソメトリックとは建築でよく使われる投影法で奥行きを表現した図（ここの説明が分かりやすいです）に用いられます。一般的には「アイソメ」と略されますが、これをテキストに用いる事が出来る、というもの。 こんな感じで。普通にテキストなのでドラッグも可能です。大抵は画像で作らざるをえない表現ですが、テキストなら編集しやすいでしょうし、上手く使えばSEO的にも有利に働いてくれるかも知れませんね。 IE6でも問題無し IETesterを使ってのIE6。問題無しです。 使い方<script type="text/javascript" src="jquery.js"></
国別・ブラウザ別でも計測出来るWebサイト表示スピード調査ツール・loads.in - かちびと.net
よくあるWebサイトが表示されるまでの 時間を計測するツールですが、ブラウザ 別でも図れるのは珍しい気がするので 備忘録的にご紹介。大抵はFirebugで 事足りそうですけど、なかなかシンプル で便利そうなので覚えておいても損は しなさそうですよ。 デザインも凄く素敵。URLを放り込むだけのシンプルなツールです。 デザインかこいい。URLを放り込むとメーターのタイトルも変ってくれますよ。細かい部分へのデザインの配慮も参考になります。 ざっと特徴をご紹介。 機能 機能が結構充実してたりします。URLを入れて調査結果が上記のように出ます。JavaScriptエラーのほかに、表示されるまでの時間を5分割し、それぞれの表示状況をチェックできます。 ファイルごとのチェック 右側にWaterfall chartというリンクが出ますので、そこからファイルごとの速度も確認可能。ダウンロードする事も可能みた
複数選択するフォームのselectを見やすく使いやすくするjQueryプラグイン・jQuery UI Multiselect
良さ気だったので備忘録として。フォーム のselectで複数選択可能にする事もある と思いますが、これを見やすく、また、直感 で使いやすくする為のjQueryプラグイン。 IE6や7でも普通に動いてくれますので、 いろいろと使いどころがありそうです。 フォーム周りは覚えておくと便利ですよね。 jQuery UI Multiselectは複数選択するselectを見やすく使いやすくしてくれます。
iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った - かちびと.net
iPhoneやAndroidなどの人気の スマートフォン向けのJavascript製 フレームワーク・wink toolkitを触っ てみました。動作サンプルが豊富 で割と応用できそうだったので日本 語でサンプルを作ってみました。 スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので（完全ではないけど）日本語サンプルを作成してみました。 スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜
多機能且つ、クロスブラウザ対応のカルーセルを実装するjQueryプラグイン・carouFredSel - かちびと.net
使い勝手が凄く良さそうだったので メモ&シェア。クロスブラウザ対応の カルーセルを実装するjQueryプラグ イン・carouFredSelのご紹介です。 シンプルながら縦タイプ、スライド、 lightboxを付加させる事が出来る等 オプションも豊富です。 動きやデザインはシンプルなんですが、色々とカスタマイズ出来る仕様で、クロスブラウザ対応、という感じのカルーセル系jQueryプラグインです。
GoogleMapっぽい地図コンテンツを作成出来るjsライブラリ・Polymaps - かちびと.net
便利そうだったのでメモ。GoogleMap をはじめ、様々な地図サービスのような ドラッグで移動したり、拡大縮小な地図 コンテンツを実装するJavaScriptライブラリ Polymapsのご紹介。地図には画像を使 い、マス目上に置いていくみたいです。 これは結構需要あるんじゃないでしょうか。地図系のJSライブラリです。既存サービスを使いたくない方はご検討になってみてはいかがでしょうか。 GoogleMapなどのようにドラッグで移動したり、縮小、拡大が可能です。地図はSVGデータをタイル状に置いて実装している感じ。オリジナリティある地図コンテンツも手軽に実装できそうですね。 地図は普通に画像が使用されています。フルスクリーンにすることも。 文字の中（といっても画像ですが）にMapを入れることも出来るみたいです。 デモも沢山用意されているのでぜひ触ってみてください。 なかなか便利そうですね。
ドラッグ&ドロップで簡単に要素を追加できるオープンソースのCMS・ImpressPages - かちびと.net
管理画面でWebサイトの要素を ドラッグ&ドロップで追加出来る オープンソースのCMS。直感で 作成出来そうですね。このタイプ のCMSはいくつか見かけた気が しますが、ImpressPagesの精度 もなかなかです。 ImpressPagesはPHP製のオープンソースCMSです。エンドユーザー向けなのか、直感で手軽に要素を作成、追加出来ます。 ユーザーフレンドリーなCMS、というのがコンセプトっぽいです。確かにインターフェースもシンプルで操作しやすい印象です。選択中のテーマにドラッグ&ドロップでテキストや画像などのコンテンツを追加、WYSIWYGで編集、という感じです。 PHP5.3、MySQL5以上で稼動、ライセンスはGPL。mod_rewriteがインストールされている必要があります。以下に特徴を挙げておきます。 要素の追加はドラッグ&ドロップで ページへの要素の追加はドラッグ&ドロ
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
CSS3のtransformやbox-shadowを主要ブラウザ全てに対応させるjsライブラリ・cssSandpaper - かちびと.net
これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 させる事が出来る点です。 css3のtransform（変形）、box-shadow（影）、gradient（グラデーション）ですが、gradientは不完全でした。しかしながらこのスクリプトを応用してアニメーションさせることも出来るようです。 各ブラウザで実装したものを比較していました。IEに限らず、主要ブラウザ全てをサポートしています。また、何より独自のプロパティを使うのですが、これが1行で済むので場合によってはなかなか楽では無いかと。 左がChrome、右がIE6です。テキストのドラッグも普通に出来ますね。 例・transform cssSandpaperを使用した際のtransfo
総計10万ものアイコンを1ページ内に集約させたFREE ICONS! - かちびと.net
縦長のサイトは是か否か？？という 記事が話題にあがっていましたが、 こんな縦長サイトなら個人的には 大歓迎です。10万もの商用・非商用 アイコンが1ページで閲覧出来ます。 アイコン検索エンジンのiconfinder 内のアイコンが集約されていますよ。 当然1つ1つ表示させているのではなく、セットで表示されています。とりあえず大量のアイコンをサクッとストックしたい、という方にはオススメ。ライセンスも書いてあるのでDLしやすいのでは。 右端のスクロールバーが見えますでしょうか？これだけ縦長なページにアイコンがグリッドでぎっしり掲載されています。 このページはアイコン検索エンジンのiconfinderにストックされているものです。探すのが面倒、キーワードが分からない、という方はこちらで探してみては如何でしょう。 ライセンス ライセンスは上記の部分に書かれています。 Free for commer
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家） HTMLコーディングが3倍速くなる？「Zen-Coding」 秀丸Zen- Codingマクロ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 WP Zen-Codingが凄く便利 初期設定とかTipsとか 制作前に知っておくと便利なコードとかTipsいろいろ。 css書く前にチェック。 もう、cla
ボックス内をスクロールすると自動でコンテンツをロードするjQuery - かちびと.net
IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 去年くらいの記事ですけど見逃してたのでメモ。 Facebookをやられてる方はピンと来るかも。下までスクロールすると自動で次のコンテンツが読み込まれますが、それをボックス内で実装したものです。基本的にどのブラウザでも動くみたいです。 Scrolling Dynamic Content box このボックス内でスクロールすると自動で次のコンテンツが読み込まれ、アイテムの数も表示されます。というか、見たほうが早いですね。 デモ コード コードです。 $('document').ready(function(){ updatestatus(); scrollalert(); }); function updatestatus(){ //ロードしたアイ
IE6、7でも動いてくれる&実用性の高そうなjQueryプラグイン30個まとめ - かちびと.net
使いやすそうなjqueryプラグイン をまとめました。最低でもIE6,7でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな（適当）。 デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能（DD_belatedPNG.jsとか）なのでそこは抜きにして動作する事を条件に挙げています。主観入ってるので参考程度に・・ Horizontal Subnav マウスオーバーでサブメニューがプルダウンするcssメニューです。サブメニューは横に広がってくれます。 Horizontal Subnav Simple jQuery tabs コンテンツをタブで切
「吹き出し」をツールチップとして実装するjsいろいろ
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
結局、一番使いやすくて高機能なSEOツールはSEOチェキ！だった - かちびと.net
Firefoxのアドオンやよく言われる 海外のSEOエキスパートみたいな 方々の作成したSEOツールも凄いけど 結局僕が一番使いやすくて高機能 だと思ったSEOツールは国産の SEOチェキ！でしたので機能をご紹介。 使い方次第なのかもしれませんが、結局一番使うのはSEOチェキなので紹介します。アライグマかレッサーパンダか未だにその正体を教えてくれない友達のロプロスさんの作ったツールですが、贔屓なしに現時点で最高のSEOツールです。 ※書いてある順番は適当です。書かないと分からないようなので追記しました。 Ajaxで動くのでとにかく軽快 国産なので開発者と連絡が取れる 無料で広告も無い 調査できる必要項目がほぼ全て揃ってる やたら見やすい といった感じで重宝しています。とにかく動作の軽快さ。これが大きいです。SEOツールなのに動作が重いってユーザビリティ的にどうなの？って気がしますのでいくら
ソースが公開されているcss小技11エントリーまとめ
cssを使った小技テクニックの エントリーが様々なブログで 公開されていますが、必要な時に 探すのが面倒なのでまとめます。 ソースコードを公開している記事に 絞ってまとめています。 CSSで実装する、ちょっと凝ったパンくずリスト cssでパンくずをデザインする方法とサンプル CSSで実装するちょっと凝ったパンくずリスト CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント ユーザービリティ（見易さ）を考慮したbodyに設定する。CSS HappyLifeさんも 記事を参考に別コードを公開。 CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント CSSだけでフレームを作るテクニック frameタグを使用しないで擬似フレームを作成。IE6対応。 CSSだけでフレームを作るテクニック テキストに影を付け印象的にする JSとｃｓｓでテキストに影を付けるテクニック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
