"Docklr" - Simple jQuery OSX-like Dock Menu | jQuery Plugins Mac OS X風のドックを上下左右どこでも設置できるjQueryプラグイン「Docklr」。 次のように上下左右、ページ内、どこにでも設置できるDock風UIを実現できるプラグインです。 ページの左側に設置してもなかなかオシャレですね。 デモページ アイコンをクリックするとバイーンとアイコンがアニメーションするあたりもそっくりです。 上下左右だけでなく、ページ内に普通に設置することもできるみたいです 関連エントリ レイアウトに関する強力なjQueryプラグイン６つ 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」 画像スライダーに関することならお任せ！なjQueryプ
「かっこいいサイト作るぞ！」 と意気込んでみたももの、いざ作ってみると 「あれ･･･なんかダサい･･･」 WEBサイトを作成したことのあるプログラマーの方なら、 経験したことがある方も多いのではないでしょうか？ WEB制作は、基本的に、デザインはデザイナー、システムはプログラマー、という 役割分担の元に作業が行なわれるため、プログラマーが見栄えのするサイトを作ることは、 簡単なようで、なかなか難しいことです。 かくいうプログラマーである私も、いくつかのWEBサイトを個人的に作成してきましたが、 自分で納得のいく見た目のサイトが作れず、夜中の謎のハイテンション時にデザイン を完成させ、1度寝てから再度確認すると、そこには見るも無残なWEBサイトが･･･ なんていうことを何回も経験してきました。 そこで私が試行錯誤した結果を元に、プログラマーが、シンプルながら ある程度見栄えのするWEBサイト
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
最近はスマートフォン用のサイト作成をする事が多くなってきていますが、HTMLの確認を複数の実機でやるのは大変ですよね。 そんな方のために、HTMLのプレビューがiPhone/Androiで同時に確認できるMobilizerが便利そうなのでご紹介します。 実機で動作確認はできるだけやりたくない、、、。そんな時に使えそうですよ。 詳しくは以下 Mobilizerは、Adobe AIR製のアプリで、複数のモバイルデバイスを立ち上げて URLやローカルファイル（HTML、画像やFlash）のプレビューを表示できます。 ↑デバイスはiPhone 4、Palm Pre、HTC Evo、Blackberry Stormの4機種となっています。 また、プレビューした画面は右クリックから簡単にPNGにエクスポートする事も。 JavaScriptなどはどこまでエミュレートできてるのかちょっと不明な所もあります
GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日本語にし、シンプルしたものをアップしました。 デモページ（当方日本語化） 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ（当方日本語化） <a href="#" class="button">Post comment</a> <input class="
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
サンプルを用意しました！フォークしてjQuery Mobileを体験してみよう！ スマートフォンサイトをプレビューするには、エディタ画面の「Smart Phone Preview」ボタンをクリックしてください。 こんなことを試してみるとオススメ！ aタグに data-transition 属性を付加するとトランジションのエフェクトを選ぶことができます。 Footer要素を画面下に固定することができます。data-position="fixed" フォーム周りの要素もjQuery Mobileで表示できます！ そもそもjQuery Mobileってなんだっけ？ jQuery Mobileはモバイルサイト構築のためのフレームワークです。 スマートフォンサイトやWebアプリを作成する際に利用します。 非常に手軽に利用でき、少し勉強するだけでそれなりのものが作れてしまうんですよ！ ということで、j
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
PerkinsはHTML5/CSS3のデザインテンプレート。多数のパターンに対応している。 PerkinsはHTML5/CSS3製のオープンソース・ソフトウェア。アイディアを思いついてすぐにコーディングにとりかかるが、Webデザインで詰まって投げ出してしまったという経験はないだろうか。デザインが今ひとつだと開発する気力までなくなってしまうというものだ。 2カラム 必要なのはある程度までパターンとして対応できる汎用的なテンプレートだ。それを実現するソフトウェアとしてPerkinsを紹介しよう。 PerkinsはHTML5/CSS3でデザインされたテンプレートだ。2カラムまたは4カラムのデザインで、ヘッダーやリスト、引用、コード記述、画像の回り込み、テーブル、フォーム、エラー（または通知）メッセージ、ボタン、角丸、傾き、細かく分けたブロックなどが用意されている。 リストなど さらに文字をアイコ
iPSim - Chrome Web Store ChromeをiPhoneシュミレーターにできる拡張「IPSim」 IPSimを使えばChromeをiPhoneシミュレーターにすることが出来ます。 インストールすると次のようにボタンが追加されます クリックするとシュミレーターが現れます。 縦・横方向での表示が可能。 以下、横表示の例 Chrome自体がWebKitベースなので実機でもそれほと差異がない点にも注目。 ChromeでサクッとiPhone対応したい場合に入れておくとよさそうですね。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 PHPフロントエンドのコンソールロギング用Chrome拡張「C
WebアプリケーションにおけるCSS(カスケイディングスタイルシート)はスタイル、レイアウト、アピアランスを宣言することにより、同一のHTMLから様々なコンテンツを生成する役割を担っている。 そもそもCSSにより様々な属性を記述するのを一箇所に集約するのは、いわゆるDRYの原則に従うためなのだが、モバイル機器とPCで同一のスタイルシートを使用するのは前回紹介したmetaタグのようにデバイスに合わせて振る舞いを変えるタグを以てしても困難だと思われる。 そこでPCとモバイル機器によってスタイルシートの属性を変えたり、そもそも別なスタイルシートを適用することが次善の作となるのだが、そのスタイルの切り替えに使用されるのがメディア・クエリ(media quries)である。 Media Queries このメディアクエリ、どのように使うかだが、典型的なのは例えば以下のようにデバイス(媒体)のスクリー
親要素の幅に収まるようにフォントサイズを変更するjQueryなJavaScriptコードを、Harmonize Textという名前のjQueryプラグインにしました。FitTextを見て「コード短くて凄い！」とか思ったんですけど、自分の求めているものとはずいぶん違ったので、自分で書いたのをjQueryプラグインにしようというモチベーションが湧きました。 Repository: hail2u/jquery.harmonize-text 内容はリサイズに対応するようにした以外は特に変わっていないので、スクロールバーの有無によってぴったり収まらないバグは直っていません。リサイズは重いし、遅延させた方が良さそうな気がするので、そこら辺のオプションを指定できるようにしようかなと考えています。-1を引数として渡すとでリサイズに対応しない、正の整数ならそのミリ秒だけ遅延させてからリサイズ処理を行うとかで
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 チェックボックスやラジオボタンなど、フォーム周り のデザインを美しくする事が出来るjQueryプラグ イン・Ideal Formsのご紹介。スタイルもいくつか 用意されており、フレームワークとして使えるよう です。デザインテーマもいくつか用意されている ので好みで選ぶことも出来ますね。 ボタン、セレクト、ラジオボタンやチェックボックス等のフォームデザインを変更できます。デザイの変更はcssのみで可能なフレームワークタイプなのでノンプログラマーな方でも気軽に使えそうですね。IE6以外は対応しているようです。 フォームのデザインをガラッと変えることが出来ます。よりデザインに統一感を出せそうですね。 テーマも用意されている Ideal Formsはフレームワークとしても利
最近のブラウザではWebフォントの利用を可能にする@font-faceをサポートしており、使われているサイトもよく見かけるようになった。@font-faceはWebフォントの利用に限らず、ローカルのフォントの再定義にも使えるので、ユーザースタイルシートで利用すればＭＳ Ｐゴシックをメイリオに置換することが出来る(Chromeでも)。これに留まらず@font-faceデスクリプターのunicode-rangeプロパティを利用すれば、英数字はArialで日本語部分はメイリオで置換するなどというわがままなことが出来る。 unicode-rangeプロパティはグリフのコードを範囲指定することによってsrcプロパティで指定されているフォントのどの部分を利用するかを決定するもの。つまりArialから英数字(PDF: Basic Latinと呼ばれる範囲)を取ってきてＭＳ Ｐゴシックを置換する場合はGo
ChocolateChip-UIはHTML5製のスマートフォン最適化サイト用フレームワーク。 ChocolateChip-UIはHTML5製スマートフォン用のオープンソース・ソフトウェア。スマートフォンはこれまでのデスクトップ型に比べると圧倒的に画面サイズが小さい。そのためWebサイトのデザインを行う上で注意すべきことが色々ある。またiOS風にデザインするのも難しい。 リスト そのためデザインテンプレートを使うのが一般的になっている。Webデザインだけを提供するもの、jQuery Mobileのように統合的に提供するものなど色々あるが、ChocolateChip-UIは後者に属するスマートフォンWebサイト向けフレームワークだ。 ボタン ChocolateChip-UIで提供されるのはテーブルビュー、アコーディオンビュー、ナビゲーションバー、リスト、各種ボタン、ポップアップ、スライダーなど
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く