パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
Movable Typeでタグのインクリメンタルサーチを実現する
Movable Typeの検索フォームを使ったタグ検索で、インクリメンタルサーチが行えるようにするカスタマイズです。 このカスタマイズを行えば、次のようにタグ文字列を1文字入力するたびに、候補を表示してくれます。ご覧のとおり、途中の文字の検索もできます。 日本語の検索も可能です。 タグのインクリメンタルサーチを導入すれば、タグクラウドのようにページを占有する必要がなくなります。タグ数が多いほど有効です。頻度の高いタグだけを表示するタグ一覧と併用するという手もあります。 ここでは「クラシックブログ」テーマに適用する方法を紹介します。 検索フォームを使ったタグ検索の動作については「Movable Typeの検索フォームでタグ検索をする」をご覧ください。 １．ライブラリのダウンロード・アップロード 「suggest.js - 入力補完ライブラリ」のページにアクセスして、「suggest.js」を
SaCSS vol.26「ちょっと本格的なFacebookページを作ろう」
SaCSS（札幌コーディング勉強会） vol.26の、Facebookページ制作に関するLTの資料です。
それほんとにTable？ Google Chart Toolsでちょっとリッチなグラフを見せよう！ | istis
どーも初めまして！ 入社4年、主にHTML/CSS、Javascriptのコーディングを担当しております、上野と申します。 このブログではサイト実制作で役に立つ情報を発信していければと考えております。 今回は意外と認知されていない便利なGoogleのAPIをご紹介です。 意外と使える「Google Chart Tools」 GoogleのAPIサービスといえばGoogleMapsがよく使われますが、他にも便利なAPIがあるんですよ。 この「Google Chart Tools」もそう。HTMLページに簡単にグラフを表示してくれるとってもナイスなガイです。 これを使えば数字統計データの見せ方はテーブルor画像だけじゃなくなりますね。 これもGoogle Chart Toolsのグラフです → Google Chart Tools Google Chart Tools は大きくわけて3
CSS3について知っておきたいことのまとめ
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 CSS3セレクタはW3
[JS]CSVを読み込んでJSONに変換してくれるライブラリ「csonv.js」 | Web活メモ帳
ajaxを使用してデータベースの情報を表示する仕組みは一般的になってきたと言ってもいいと思いますが、 そこまで手をかけたくない小規模の案件も多いですよね。 そんな時に使えそうなのが、CSVをJSONに変換してくれるJavaScriptライブラリ「csonv.js」です。 CSVデータさえアップロードしてもらえば、常に最新の情報を表示する事ができるようになりますよ。 CSVの形式 CSVの作り方には制約があり、最初の行はキー名にする必要があるようです。 データは2行目以降でなければいけないようですね。 文字列の中に,(カンマ)を使いたい場合には、;（セミコロン）区切りでもOKなようです。 使い方 使い方はいたって簡単でCSVのパスを指定するだけです。 var members = Csonv.fetch("path/to/csv/family.csv"); var result = JSON.
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
実装が簡単で、フォームの使い勝手を向上させるJS 3種
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス の、CSSんところにちゃっかり、CSS HappyLife ZERO が載ってて嬉しい＞＜ さて、今回はフォームです。 お問合わせフォームとか資料請求フォームとか、ウェブサイトには結構な確率で何らかのフォームが有るかと思います。 このフォームの使い勝手の良し悪しが、とても重要なのは言うまでも有りません。 でもまぁ、ビミョーなフォームが多いですよね。 本気でやり出すと、サーバーサイドに手を加えたりして云々だと大変なので、コストがかかるとかで出来ない場合も有るかも知れません。 しかし、フロントエンドで出来ることも有るので、フォームを実装する際に何事もなかったかのように極々自然と使い勝手が良くなる（だろう）機能を盛り込んだらステキですよね。きっと。 しれっとコーダーが、フォームに今回紹介する機能を実装しておけば「おー！
[jQuery Mobile]役立つコード集とつまづきやすいポイント | コリ
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
twihelp.me
twihelp.me 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery
ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」:phpspot開発日誌
CJ Object Scaler 3.0 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」。 幅300pxのブロックに、幅500の画像がきたらデザインが崩れてしまいますが、これをjQueryで自動補正してくれるプラグインのご紹介。 スクリプトでやってくれるため、予め自分でサイズを計算して指定しておく必要はなく、かつデザインを崩しません。 ブログなんかで、画像をアップしたけど、ちょっと大きくてデザイン崩れるかもっていう場合にも、自分でリサイズしなくてもやってくれるというのは楽でいいですね。 調整方法も２種類選べます。 ぴったりと埋める Fill 画像の表示領域をそのままで表示するFit 使い方は $(element).cjObjectScaler(options, callback) で、調整後のコールバック関数も呼べます。 $(element)
使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」:phpspot開発日誌
JK - jQuery SimpleFAQ 使いやすいFAQをサクッと作る際に便利なjQueryプラグイン「SimpleFAQ」。 FAQというと内容が多くなればページが長くなって見難くどんどん使いづらくなっていきますね。 そんな場合に、項目は並べつつも、クリックした際にアニメーションで質問のすぐ下に現れるようなFAQが簡単に作れます。 質問のリスト。 とりあえず質問が並んでいるので分からないことを探してもらいます。 そんなに大規模なFAQじゃなければ質問項目を羅列しておくだけでもそれなりに使いやすいです。 クリックすればページ移動とかもなく、その場にアニメーションしながら答えが表示されます。 別ページに移動したりといったことがなく、ストレスフリーで内容が見れます。仮に答えが的外れでも戻ったりせずにすぐに他の質問に行けます で、何がいいかという個人的におすすめする点は、作り方。 作り手は、
レイアウトをユーザの手によってデスクトップアプリ風に調整可能にするjQuery「UI.Layout」プラグイン:phpspot開発日誌
レイアウトをユーザの手によってデスクトップアプリ風に調整可能にするjQuery「UI.Layout」プラグイン 2011年02月27日- UI.Layout Plug-in - Home 2 レイアウトをユーザの手によってデスクトップアプリ風に調整可能にするjQuery「UI.Layout」プラグイン。 次のような複数ペインにわかれ、なおかつドラッグ＆ドロップでペインのサイズを変えられるようなUIが作れます。 レイアウトだけではなく様々なコンポーネントも含まれるため、Ext.JSのようなリッチなUをjQueryで実現できます。 出来ることが豊富で、デモページをひと通り見れば便利さが分かるはずです。 ドキュメントもしっかりしています。 関連エントリ Extばりのリッチなタブ等のＵＩを実現「dhtmlxTabbar」 Extバリの超クールなUIを提供するJavaScriptライブラリ「Jx L
iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った
iPhoneやAndroidなどの人気の スマートフォン向けのJavascript製 フレームワーク・wink toolkitを触っ てみました。動作サンプルが豊富 で割と応用できそうだったので日本 語でサンプルを作ってみました。 スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので（完全ではないけど）日本語サンプルを作成してみました。 スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜
ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」:phpspot開発日誌
ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」 2011年02月16日- jQuery plugin: jQuery.FixedTable - Nova download ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」。 テーブルは便利ですが、左から2番目のカラムは何を意味するんだっけ？という時に下の方にスクロールしていると上まで戻らないといけなかったりしますね。 そこでテーブルヘッダを固定位置にして分かりやすくできるというもの。 テーブルの最左部を固定にしてテーブルを横長にすることも出来ます。 テーブルのヘッダを固定にして通常のテーブルっぽくすることも出来ます。 デモページ 実装も基本的に $(element).fixedTable( options ) で簡単実装
[JS]ページをめくるアニメーションが楽しい、本のように表示するスクリプト -Viewbook
div要素で配置したコンテンツ（パネル）を自動で重ねて、本のようにページをめくるアニメーションで次々にコンテンツを表示するスクリプトを紹介します。 Viewbook - jQuery Plugin デモ [ad#ad-2] 次のページをめくるには三通りの方法が用意されています。 「Next」「Previous」で、次・前へ ページのナンバリング ※違和感がありますが キーボードの矢印キー 中でも、キーボードでの操作が楽でいいですね。 Viewbookの実装 各パネル（ページ）はdiv要素のため、画像やテキストなどさまざまな要素が配置できます。 HTML コンテンツはdiv要素の入れ子で構成されています。 idのmybookは自由に変更できます。 <div id="mybook"> <div class="vb-load"> <div>Page 1</div> <div>Page 2</di
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
【デザイナー必見】iPhone/AndroidアプリをHTML+Javascriptで作成(PhoneGapのススメ)
IDEA * IDEA
