Xlune::Blog
非同期ページ(部分)遷移jQueryプラグイン(jquery.smartPage.js) 元々jQueryは基本的な非同期ページ遷移機能は付いてんだけど、もうちょっと機能を追加しつつ、汎用性を持たせたものが欲しいなーと思ってとりあえず書いてはみました。 ステータスとしては、「書いたよ」じゃなくて「書き始めた」けど限が無さそうなので、自分のサイトで使える程度でいいや、、、です。 html5のpushState(pjax)と"#!"を利用したロケーションハッシュによる非同期ページ遷移の両方を実装したモノを目指してます。非対応(IEとか)の場合は普通に同期遷移します。 非同期ソースに、"script"タグがあったり、"document.write"の記述があっても、なるべく表示を再現するよう試みますよー。 jquery.smartPageのオプション/コード Download github zi
ページ遷移時にエフェクトを与えるjQueryプラグイン「jQuery Pageswitch Plugin」
twitter facebook hatena google pocket ページ遷移の際に何らかのエフェクトが発生するサイトがありますが、今回紹介するjQuery Animated Pageswitch Pluginを利用することで、それを簡単に再現可能です。 sponsors 使用方法 jQuery Animated Pageswitch Pluginからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.3.min.js"></script> <script src="jquery.pageswitch.js" type="text/javascript"></script> <script> $(function() { $('#id名 a').pageswitch({ url: '/test/', //
流行のjQueryでスクロールするサイトを集めてみました
jQueryでコンテンツをスクロールさせる海外サイトを最近見るのですが、あれはかっこいいですね。そこで、今回の記事では、jQueryでコンテンツをスクロールさせているサイトをいくつか紹介しつつ、このタイプのサイトに特有の問題についても触れてみたいと思います。 はじめに コンテンツをスクロールバーではなく、JavaScriptでスクロールさせる場合、ブラウザのスクロールバーが出ないため、「ブラウザからはみ出るコンテンツをどのように扱うか」の課題に直面します。以下のサイトで、この問題をどのように解決しているかにも、注目して見てください。 01. Reverse Büro 自由自在に縦、横方向にスクロールします。マウススクロールにも対応しています。コンテンツ自体がブラウザ幅に合わせて拡大・縮小するのでスクロールは必要ないですね。写真だけのサイトでは、こういった解決策もアリなんだと思います。 ※サ
綺麗なプレゼン用スライドを作る、10のテクニック
最近、keynoteでプレゼン資料を作ることが増えてきました。 PowerPointで作成するよりも、keynoteで作る方が、フォントが綺麗だし ガイドのラインも出て、配置も綺麗にそろえられるため keynoteを多く使うことが増えてきました。 プレゼンの資料は、中身が勝負でテクニックじゃないのですが あまりにも、見た目の悪いプレゼン資料だと、見てもらえないと せっかく作った良い内容も、台無しになるので、 いままで本などで読んだ、テクニックをまとめておこうと思います。 ポイントについて、個別に説明していきます。 １．見やすいフォント フォントを見やすくするために、「ヒラギノ角ゴStdN 」を指定します。 このフォントにすると、太文字ではっきり見えるので、 プロジェクターに表示しても見やすくなります。 また、フォントの大きさも、72pt、64pt、48ptを使います。 バラバラの大きさを使
グラフ作成やデータ可視化を楽に美しくできる便利なサービス22個まとめ | Web担当者Forum
このコーナーでは、ネットビジネスを強力に支援する製品について、それを支える技術や市場動向を説明し、さらに各社から提供されている製品を紹介する。競合商品がひしめく市場で、他社に差を付けるための武器として、ぜひ導入を検討してみてほしい。今回は、「グラフ作成・データ可視化」サービスだ。 売り上げの推移、業界におけるシェア、自社製品の出荷数内訳などなど…。「顧客の説得のため、ウェブサイトでもグラフ要素を掲載したい」といったケースは増えている。大手企業では、PHPを使いデータベースと連動させて動的に最新グラフを表示させる、といった仕組みを用意できる場合もあるが、たいていは「エクセルで作成したグラフを画像として貼り付け」といった、手作業感あふれるものだった。 だが、昨年末にGoogle Chart APIが登場して以降、さまざまなサービスや独自APIが増加し、選択肢がグッと増えてきた。無料で利用できる
Open Flash Chart - Home
Info: Open Flash Chart 2 is out. Version 1.x and these pages will never disappear and the charts will continue working forever, but further development on 1.x has stopped. Take a look at version 2 here Open Flash Chart 2. Hello, this is the Open Flash Chart project. Get graphs like this for free: How does it work? User browses to your web site. The browser downloads the web page which contains the
効果的なナビゲーションを設計する5つの大切なポイント
How To Design Effective Navigation Menus [ad#ad-2] 下記は各ポイントを意訳したものです。 Positon -ポジション Simplicity -シンプル Wording -ワーディング Color -カラー Icons -アイコン [ad#ad-2] Positon -ポジション ナビゲーションをページのどこに配置するかは、非常に重要です。 ユーザーがページを見る際にある特定のパターンがあります。ユーザビリティの大家ニールセンによるFパターンが有名です（F-Shaped Pattern）。これは、ユーザーがページを走査する際、上部と左部に（Fの文字のように）フォーカスを合わせるというものです。 こういったパターンを理解し、それがどのように機能するかを学び、何を期待するべきかのアイデアを得るために使います。数多くのサイトを見て、ユーザーに配慮
良いデザインって？技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと
デザイナーになりたいって思った時にPhotoshopやIllustrator、cssやhtmlを勉強しなきゃな〜><て考えると思うのですが、技術的なことを学ぶ前にまずデザインが出来なきゃ始まりませんよね。 センス？かっこ良さ？奇麗さ？良いデザインにしたいけど、何をしたらいいかわからない。そんな時に何を考えたら良いのかデザインの基本をまとめてみようと思います XD はじめに 良いデザインって？ 最良の方法？ 1.コンテンツの目的 2.ターゲット 3.これらを組み合わせた例 デザインの基本 1.書体について 2.ジャンプ率 3.ホワイトスペースを生かす >ホワイトスペースで情報を分割する >ホワイトスペースで囲む >ホワイトスペースにあえてはみ出す 最後に はじめに デザインという言葉を聞くと、かっこいい、かわいい、おしゃれ、きれい、などと感覚的なものを思い浮かべる方が多いのではないでしょうか
完全にフォントだけで勝負しているカッコよくてシンプルなサイト集
日本デザインセンター / Andreas Pihlström / TYP他...全14件
文章の作り方 - 伝わるデザイン 研究発表のユニバーサルデザイン
研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演（アウトリーチ活動）の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者（研究仲間や審査員、一般市民）へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく
良いネーミングをするために覚えておきたい英語のルール5つ - プログラマー幸福論
Photo by muraterturk こういった記事って、ネーミング規則や慣習の視点から書かれていることが多いんですけど、この記事では、英文法に視点を置いて、参考になりそうなことをいくつかピックアップしてみたいと思います。 「省略形は使わない」などの規約的なものは、各プロジェクトのルールに従えばいいので、ここでは書きません。あくまで英語という視点から書いているということを、ご理解ください。 Rule 1 : “検索”は名詞 一般的な英語辞書のルールでは「検索」は、動詞ではなく「検索する」が動詞になります。「検索」は、検索することの名称 だと考えられるため、動詞ではなく名詞として扱います。 英語辞書には、日本語の品詞ごとに表記のルールがあります。これが理解できていると、和英辞書などで品詞を意識して検索できるようになります。以下に、一般的な英語辞書の表記ルールをまとめてみました。 ＜各品詞
画像を背景にフルスクリーンで表示する「jQuery Fullscreen Slideshow with zoom/slide animation」
twitter facebook hatena google pocket フルスクリーンで画像を背景に表示させるとインパクトが出せます。 jQuery Fullscreen Slideshow with zoom/slide animation | jQuery Pluginsは、これを可能にし、またズームなどのエフェクトを全自動で付けてくれます。 sponsors 使用方法 jQuery Fullscreen Slideshow with zoom/slide animation | jQuery Pluginsからファイルをダウンロード。 下記を記述すれば完成です。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.
jQueryでサイト内に簡単にRSSフィードを組み込めるプラグイン「zRSSFeed」｜BLACKFLAG
サイト内にRSSフィードを読み込む方法はたくさんありますが、 jQueryを使って簡単に組み込めるプラグインがないか探したところ、 必要最低限の要素で組み込むことが可能となる理想のプラグイン 「zRSSFeed」に辿りついたのでここでも紹介してみます。 zRSSFeed – RSS Feeds Reader for jQuery zRSSFeed – RSS Feeds Reader for jQuery 上記ページからダウンロードできるプラグインファイルと併せて 実行させる為のIDをつけた＜div＞などを用意し、 スクリプトを実行するだけ。 実装方法のサンプルについて。 HTMLは下記の様に任意のID名がついたブロック要素を配置します。 ※今回のサンプルではID名を「feed」にします。 ◆HTML <div id="feed"></div> そして下記の様にID「feed」に対して、ス
スクロールバーのデザインをカスタマイズできるjQueryプラグイン「jQuery CUSTOM CONTENT SCROLLER」｜BLACKFLAG
Webページ内で限られた範囲内にテキストなどを多くの情報を掲載する場合、 インラインフレームの様なスクロールエリアを設置することはよくあること。 ですが、ブラウザのデフォルトスクロールバーでは見た目があまりにカッコ悪かったりします。 その様な際に使える簡単にスクロールバーのデザインをカスタマイズできるjQueryプラグイン 「jQuery CUSTOM CONTENT SCROLLER」のご紹介。 ≫jQuery CUSTOM CONTENT SCROLLER ≫デモはこちら【Demo: jQuery custom scrollbar demo】 デモ画面やサンプルデータにあるように 様々なパターンのスクロールバーのデザインが用意されています。 実装しても動作が重くなるようなこともなく、 マウスホイールでのスクロールもきちんと対応しているところなどが◎。 スクロールの「縦」と「横」の種類の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.css-lecture.com/log/css3/css3-gradient.html
ウェブデザインのアイデアに悩んだ時に訪れたいサイトをまとめて一覧できる -Visual Heap
漢字も揃ってる、日本語のフリーフォントのまとめ -2011年版
2011年総まとめ：商用利用も無料、英語の高品質なフリーフォント集
Developer's Guide - Google Chart API - Google Code
Tarmac by Max Winokan — Simple Desktops