Tumblrのオリジナルテーマを作成する為のHTML5製テンプレート・「tumblr boilerplate」tumblr boilerplateはTumblrのオリジナルテーマを作成するためのスターターテンプレートです。HTML5で作られています。装飾は一切なく、よく利用されるタグが概ね用意されていますので1からテーマを作るのに便利そう。CSSのセッティングタグが少し弱いかも。ライセンスはMITとの事。 tumblr boilerplate
Googleカレンダー対応の、シンプルなイベントカレンダーを実装出来るjQueryプラグイン・kalendar
Googleカレンダーで設定したイベント等に対応したカレンダー実装スクリプト・kalendarのご紹介です。勿論、普通にイベント設定も可能。jQueryに依存しています。 イベント対応のカレンダーを手軽に実装出来る、というスクリプトです。 こんな感じのカレンダーです。日付を押すとその日のイベント一覧に切り替わります。 Sample events: [ { title: "hoge", start: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, end: { date: YYYYMMDD or "YYYYMMDD", time: "HH.MM" }, location: "huga", url: "http://example.com", color: "string" } ],イベントは上記の要領で設定すればいいみたい。 他、Google
固定ページに任意のウィジェットを簡単に追加出来るWordPressのプラグイン・Page Builder
地味に便利そうなプラグインがあったので備忘録的に。固定ページに、使用中のテーマで使えるウィジェットを簡単に追加出来る、というもの。ウィジェットを使いこなしている方には良さそうです。 ウィジェットは個人的にはクライアントワークでは欠かせない機能なので、こういったプラグインはちょっとありがたいです。 ウィジェットを固定ページに追加できる、というもの。その場でウィジェットタイトルも設定できますので、いちいちページ移動してウィジェットを管理する手間もありません。 プラグインを有効化すると固定ページを追加するところにタブが表示されます。ここでウィジェットを自由に追加します。カラム数を設定して横並びのレイアウトにする事も。 ウィジェットの追加は上記のようなlightboxで表示、選択する事が出来ます。 ただし、通常通り書いたコンテンツが無視されてしまいますので、テキストや画像は「テキスト」というウィジ
サイドからスライドインするフィードバック用フォームを実装するjQueryプラグイン・Feedback Me
よく見かけるフィードバック用のコンタクトフォームを実装するスクリプトのご紹介です。外部サービスだと使い勝手がアレなのでこうして独自で設置できるといいですね。 Webアプリ等で見かけるフィードバック送信用のコンタクトフォームを設置できる、というスクリプトです。 こんなやつ。クリックするとスライドインしてくる様になっています。 以下サンプルです。 Sample コード<link href="css/jquery.feedback_me.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script ty
iPhone向けWebサイトの制作等に役立ちそうな情報まとめ - かちびと.net
iPhone向けのWebサイトを制作する 際に役立ちそうな情報のまとめです。 情報が多くて混乱し始めたので、個人 的なメモ。iPhone関連のWeb制作情 報は基本的に載せています。アプリ 制作とかそっち系はたいして無いの でご了承下さい。 個人的にグッと来たiPhone / iPad周りの情報をメモ的にまとめておきます。素材とかフレームワークとかTipsとかそういうの中心で、SDKとかObjective-C的な情報は無いです。順不同。 フレームワークとかスクリプト WebアプリとかiPhoneサイト向けのフレームワークとか。 jQuery Mobile スマートフォン向けのjQuery公式ライブラリ。リリースが待ち遠しいですね。 jQuery Mobile Sencha 以前触ってみたので記事にしました。HTML5とjsのみのWebアプリ向けフレームワーク。 Sencha Titaniu
PCサイトではタブによる切り替え、スマフォ等ではアコーディオンで実装できるスクリプト・Easy-Responsive-Tabs-to-Accordion - かちびと.net
必要になりそうだったのでメモ。通常のPCサイトではタブ、スマフォ等の画面の狭いデバイスではアコーディオンで実装するスクリプトのご紹介です。jQuery依存になります。 Easy-Responsive-Tabs-to-AccordionはレスポンシブWebデザイン対応のWebサイトでタブコンテンツを使いやすくするライブラリです。アコーディオンの方がみやすくタップしやすいケースもあるので覚えておくと良いかも知れません。とはいえ先発ライブラリも確かあったはずなので使いやすいほうで。 動作サンプルです。直接見に行って実装エリアをリサイズすれば確認出来ると思います。 コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <sc
jQueryのプラグインを大量に収集している・「Unheap」 - かちびと.net
UnheapはjQueryのプラグインを大量の収集、紹介しているWebサイトです。かなり細かくカテゴライズされているので探しやすい印象でした。社内向けに作ったリソースサイトらしいです。 Unheap
マウスホバーで画像を拡大させるjQueryプラグイン・Image Zoom Plugin
よくあるマウスホバーによるイメージズーマースクリプトです。様々なタイプのズーマーを実装出来るのでなかなか便利そうだなーと思って備忘録。とはいえ同じ物も沢山あるのでお好みで良さそうです。 ECサイトなんかでよく見かけるやつですね。マウスを乗せると拡大され、動かす事で細かい部分を確認出来る、みたいな。
HTML5によるWebカメラの導入をサポートするjQueryプラグイン・Photobooth.js - かちびと.net
HTML5でWebカメラに対応可能なWebサイトを実装するのを手助けしてくれる、というスクリプトのご紹介です。トリミングや色彩変更などの編集も可能のようです。 自分自身がWebカメラに対応したデバイスを現在手元に持ってないので動作テストしてないです。あとで検証しますが、現時点ではあくまで備忘録ですのでその程度の記事という事でご了承下さい。 当方の端末では対応して無いのでこのようにエラーが表示されてしまいますが・・編集も可能と言うのは凄いです。 実際はこのようになると思います。 getUserMediaに対応したブラウザならJavaScriptでWebカメラにアクセス可能です。マークアップはvideoとcanvasで実装出来ると思いますが、Photobooth.jsは、+編集が出来ます。 ご興味のあるかたは是非試してみてはいかがでしょうか。尚、実装テストしていないので詳細は割愛いたします。正
商用でもフリーの日本語フォント・こども丸ゴシックに細字タイプが追加
制作者さんよりご連絡頂いたので ご紹介。いつも有難う御座います！ 以前ご紹介した、商用でも無料で 利用可能、クレジット表記も不要 の日本語フォント、こども丸ゴシ ックに細字タイプが追加されたと の事です。 手書き風の日本語フォント。商用でも無料で利用可能です。漢字は小学校1~3年で習う漢字が入っているとのこと。 こども丸ゴシック細め 公式のキャプチャ。かわいいです。 試しに思いつきで作って見ました。 ※この委員会が存在するかは知りません。子供の画像から思いつきで書いただけですので誤解無きよう。 フォントは何もデザイナーさんだけが必要としているものでは無いので商用で利用出来る日本語フォント、というだけでも多くの方にとって価値の高いものかなと思います。 ダウンロードは以下よりどうぞ。 Typing Art
コンテンツのスライドイン・アウトと簡易的なスライダーを兼ね備えたjQueryプラグイン・TOGGLE SLIDER
コンテンツのスライドイン・ アウトと簡易的なスライダー を実装する、というスクリ プト。うまく説明できません が、目を惹くことは出来そう です。 デモを見てもらったほうが早そうなので見た目の解説は割愛します。語彙が欲しい。 動作サンプルご覧頂いたほうがいいっぽいです。 Sample 素敵な動きですね。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="custom.js"></script>サンプルのようにする
jQuery Mobileでシンプルなイメージギャラリーを実装する為のプラグイン・ImageFlip
JQM向けのイメージギャラリーを 実装する為のjQueryプラグイン です。フリック操作で進める事 が出来ます。特に変わったエフ ェクトも無いのでシンプルで使 いやすい印象でした。 jQuery Mobile向けのシンプルなイメージギャラリーを実装する為のプラグインです。 フリック操作に対応したイメージギャラリーです。スマフォ向けなので凝ったエフェクトもなく、なかなか軽量なライブラリとなっています。JQM自体軽量とは言えないのでこういったスクリプトは軽量であって欲しいトコロです。 JQMに準じたカスタムデータ属性を含むDOM要素を生成したりswipeleftメソッドで送ったり、みたいな感じっぽいです。良く見てませんけど。 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="jquer
:invalidや:valid擬似クラスを使ったフォームバリデーションエラーメッセージのスタイルサンプル
今更ながら擬似クラスを使ったフォームバリデーションのスタイリングを試してみましたのでメモがてら。目新しい情報でもないので適当にスルーして下さいませ。 自分用のメモです。CSS3からフォーム向けの便利な擬似クラスが追加されてるのですが試してなかったのでテスト。 フォームサンプル HTML5のフォームバリデーションサンプルです。A List Apartのデモを少し変えただけ参考に。 <div> <label for="email">メール</label> <input type="email" id="email" name="email" placeholder="example@example.com" required /> <p class="val"> <span class="invalid">正しいメールアドレス入れてくださいまし。</span> <span class="val
地味に使えるCSS小技のメモ&サンプル集 - かちびと.net
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード .centered { position: relative; overflow: hidden; } .centered ul { position: relative; le
マウスを乗せると背景画像が動く
Result jQuerydistance = 100; sensitivity = 17; var distHalf = distance / 2; var parW = $('#par').width(), parH = $('#par').height(); $('.layer').each(function() { var layer = $(this); pixPos = distance * (layer.index() + 1); pixPosHalf = distHalf * (layer.index() + 1); layer.width('+=' + pixPos); layer.height('+=' + pixPos); layer.animate({left: '-' + pixPosHalf }, 0); layer.animate({top: '-' + pi
シンプルで使いやすく、IE7にも対応可能なレスポンシブWebデザイン向けフレームワーク・BASE
結構良さそうなフレームワーク だったのでメモがてらご紹介。 シンプルなレスポンシブWeb デザイン向けフレームワーク・ BASEです。IE7にも対応可能だそ うです。 IE7でも表示が崩れず、スマフォ等の幅狭なデバイスにも対応できるレスポンシブなWebデザイン向けのフレームワークです。 個人的には好みのフレームワークでした。多分使わせてもらう事になりそう。IE7でも表示が崩れないクロスブラウザ対応との事です。 デモページのキャプチャです。 CSSはリセット込みで11KBほど。フレームワークにはMedia Queriesが使用されていませんので、必要に応じてブレークポイントを指定してCSSを書く感じです。自分好みだったので使ってみようと思います。 BASE
閲覧しているHTML5製のWebサイトの構文チェックをサクッと行えるブックマークレット
構文チェックといっても、バリデーション サイトに飛ばす、というブックマークレット なんですが、あれば便利だなぁと思った のでシェア。HTML5 Validatorという WebサービスにURLを放りこんでくれる ブックマークレットです。 楽なので覚えておきたいですね。ブックマークレットも増えすぎると微妙ですけどね・・ HTML5 Validator Bookmarklet ご利用のブラウザにHTML5 Validatorをドラッグ＆ドロップしてください。 使ってみる 試しに使ってみます。上記は、designbitsさんのサイトで、HTML5で構築されています。ここでブックマークレットを使ってみます。 直ぐにHTML5 Validatorでの検証結果が表示されます。ワンクリックで済むので手間が省けていいですね、これ。designbitsさんは見事に問題無しでした。すてき。 という訳でHTML
パスワードによる閲覧制限機能やQRコード生成機能付きのシンプルな短縮URLサービス・flavr.fi
ユーザー登録不要でパスワード による閲覧制限可能な短縮URL サービスを探してたのでメモ。 短縮URLサービスは既に数多に 存在する、というか乱立に近い 状態ですけど。 個人的にはどの短縮URLサービスもあまり肌に合いませんでしたが、flavr.fiは自分の好みに今までで一番近かったので暫くはこれを使おうと思います。 お洒落な写真を使っていますがコンテンツとは無関係です。 URLを入力するだけ ↑ URLを入れると即座にショートURLとQRコードを発行してくれます。 パスワード制限 ↑ 下部にあるメニューからCustomに進むとパスワード制限をかける事が出来ます。Many Urlsでは複数サイトの短縮URLを同時に作成出来ます。 ブックマークレット ↑ ブックマークレットを使うとその場で短縮URLとQRコードを発行、TwitterやGoogle+、Facebookへの投稿ボタンも表示されま
ページ内の特定の要素を目次として生成出来るjQueryプラグイン・MagicNav.js
良さ気なプラグインだったので 備忘録。ページ内の特定の要素 を指定すると、その要素を目次 として生成出来る、というjQuery のプラグインです。長文のブロ グを書く方は楽できるのでは。 ページ内の要素・・多分指定する要素はh2とかh3になると思いますが、これらを目次として生成出来る、というもの。 動作サンプルです。指定箇所にナビゲーションが生成されています。 コード<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="magicnav.js"></script>jQueryとプラグインを読み込みます。 var magicNav = $.MagicNav( $('.foo'), $('.bar'), {titles:'hoge'} );見出しを作る要素と
CSS3のFilter Effectsを使って画像にチルトシフト効果を与えるjQueryプラグイン・tiltShift.js - かちびと.net
Webkit系で使えるFilter Effectsを 利用して、画像にチルトシフトっぽい エフェクトを与えられる、という jQueryのプラグインです。非常に 限られたシーンでしか利用できませ んがこういう加工がPs不要で出来る のは素敵ですね。 CSS3+jQueryで実装するチルトシフトエフェクトです。利用シーンは限られものの、ちょっと面白いです。 こんな感じのチルトシフト効果をJSとCSSで与える、というもの。デモではマウスを乗せると元画像を確認出来ます。 Sample サンプルです。ChromeかSafariでご確認下さい。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type='t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
