Reflection Link Text Link Text Link Text Link Text Shadow Link Text Link Text Link Text Link Text Read the full article here.
With the revised and improved edition of HTML, the authors as well as the web developers have been given some more flexibility and interoperability in order to create more interactive and creative websites. HTML5 has been proposed recently because the community believed that now it is the time to move forward and push the limitation of HTML further more in every direction. In today’s collection, w
How many slaves work for you? What? Take Survey See 10 Years of Progress
F F an Study I I kon Pass Destinations G G lobeKit I I kon AR Maps E E xperience Center E E ven B B oundary Supply J J aybird I I n-Car Navigation T T actical Mapping I I nside Design Y Y ouMap C C hat F F ranklin Square S S NKRS F F ox Sports S S tance G G lobal Payments L L uxe Valet E E picurrence B B oston Globe G G enworth W W orld Atlas E E SPN FC M M erchant App C C ity Guides N N ational P
「Swip」はiPhoneなどでスワイプを行うとページを切り替える様な処理が簡単に実装出来るライブラリです。 公式サイト ライブラリのダウンロード先(GitHub) 使い方 主な記述は以下の様になります。ここがスワイプ可能な部分になります。 <div id='slider'> <ul> <li style='display:block'><div>1</div></li> <li style='display:none'><div>2</div></li> <li style='display:none'><div>3</div></li> <li style='display:none'><div>4</div></li> <li style='display:none'><div>5</div></li> </ul> </div> ライブラリはCSSとJSファイルで出来ています。 CS
皮肉をこめて「みんな大好きカルーセル」と言われるほど、スマートフォンサイトでは頻繁にカルーセルが使われています。(特にECサイト) 今回は、そんなカルーセルの特徴や注意点を改めてまとめてみました。 カルーセルの特徴 カルーセルとは、指を左右皮肉をこめて「みんな大好きカルーセル」と言われるほど、スマートフォンサイトでは頻繁にカルーセルが使われています。(特にECサイト) 今回は、そんなカルーセルの特徴や注意点を改めてまとめてみました。 カルーセルの特徴 カルーセルとは、指を左右にフリックすることで画像やテキストを切り替えることができ、情報を効率よく閲覧できるのが大きな特徴です。 と、言葉で説明してもイメージしにくいと思うので、実際に使われている例を紹介します。 メインビジュアル スマートフォンサイトでカルーセルを採用する場合、最も多く使われるパターンはメインビジュアルとして使われるパターンで
Webサイトの待ち時間の80%はフロントエンドの処理によるもの なんて言われるとドキっとしちゃいます。どんな素敵にデザインして綺麗にコーディングしても、ページが重くてイライラしてるユーザーがいたら台無しです。なのでスマホ向けサイトのデザインに入る段階から、高速化・軽量化を意識するために、いくつか項目をメモしておきます。 デザインの段階から軽量化を意識する 画像を極力使わないで魅せる努力をする 当たり前ですが、画像を使えば使うだけレスポンスは遅くなります。背景画像にドデーンと写真を使ったり、見出しを使うたびに大きなアイコンを入れるなど、わざわざページを重くさせるようなデザインにする必要はありません。 多少シンプルになったとしても、色のメリハリ・1pxの線などでカバーしましょう。テキストも可能な限り画像にせず、デフォルト文字にするべきです。Webデザイナーの腕の見せ所ですね。 HTML5+C
前回の記事で、iPhoneやiPad、Androidなどに加えてPCでも動作する フリック/スワイプ動作UIをjQueryで実装する方法を紹介しましたが、 前回の単純なフリック/スワイプのUI動作に加えて、 自動で次の画像に切り替わるスライドショー動作と メインビジュアル部分にNEXT/BACKのボタンを追加したパターンでの 画像ギャラリーを作ってみたので紹介してみたいと思います。 jQueryでフリック/スワイプ動作付きの自動再生スライドショーを作成する実験 まずは動作サンプルから。 別枠で表示する場合はこちらから 一定の間隔で自動で次の画像に切り替わります。 画像の切り替えはサムネイルクリックの他、メインビジュアル部分の左右にあるNEXT/BACKボタンと メインビジュアル部分をフリック/スワイプすることで切り替えることが可能になっています。 メインビジュアル部分にマウスオーバーしてい
iPhoneやiPadなどのスワイプで動かせる カルーセルを実装する軽量なライブラリ・ SWIPEVIEWのご紹介。jQueryやmootoolsな どのライブラリにも依存しない、非依存型 の軽量スクリプトですので既存のサイト にも導入もしやすいかもしれません。 スワイプで動かせるカルーセルです。他ライブラリに依存しませんので使い勝手はなかなか良いかなと思いました。この手のはカクカクしがちですけど、これは動作も結構スムーズです。多少はありますけどね・・ まだ画像しか対応していませんが、今後対応していくとの事です。jsファイル自体も8KBほどの軽量スクリプトですよ。完璧とは言いませんが今まで触った中でもなかなかスムーズな方ではないかと。 サンプル作りましたので以下よりお持ちのスマフォでどうぞ。 Sample お持ちではない場合はスクリーンキャストをご覧ください。 エミュレーターですけど、動作
メディアクエリを正しく使うとWebページがどのデバイスでも正しく表示されます。OSや画面の大きさに関わらずデザインがレスポンシブになり、CSSがメンテナンスしやすくなります。このビデオでサンプルページを利用してメディアクエリの正しい使い方(つまりブレークポイントの利用)をご紹介します。
先日、Twitterで 『レスポンシブWebデザインをする際に、ナビゲーションなどをPC用とSP用の2種類、HTML内に書いて、出し分けることがあるようだ』 というようなことをつぶやいたのですが、自分では思ってもいないところでリツイートされました。 自分はちょっとした愚痴のつもりで書いたのですが、これはもうちょっと深く考えるべき問題なのかもしれない。と感じ、 自分なりにもうちょっと考察して、人と話して、自分なりの答えが見つかったので書いてみます。 私の周辺では、レスポンシブWebデザイン(以下、RWD)の案件をやるとき、「PC用」「スマホ用」2種類のデザインをお客さんに提出し、それをベースにコーディングすることが多いです。 PCサイトとスマートフォン最適化サイトを両方作るのと同じような手法です。 いわゆる「スマートフォン最適化」では、PCとスマホ用のHTMLは別で作れますので、デザイン上の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く