今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」! 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読!5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する!これは本当にすごい!! まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
初めまして。LIGフィリピン支社代表のせいとです。 今回は『yuga.js』というjQueryのプラグインを使用して、WEBサイトに�↑のお姉さんのような”優雅さ”を加えるやり方を書かせていただきます。 『yuga.js』とは? yuga.jsとは、Kyosuke氏によって作られた、WEBサイトをなんかこう、カッコよくするヤツです。 これを使うと、たとえば… カーソルを合わせると画像が切り替わる動き(マウスオーバー)が簡単にできる。 画像をオシャレに表示させられる。 「ページトップへ戻る」とかのリンクの動きがスムーズになる。 といったことができるようになります。 この記事では、個人でWEBサイトを作られている方や、WEB初心者の方に読んでいただけるようにコピペだけで実装できるよう解説していきます。 それでは早速始めましょう。 ダウンロード&下準備 まずはこちらのページからyuga.jsをダ
jQueryで奥行きのある背景スクロールを作ってみる 普通に背景画像を指定するだけだとスクロールに追従して画像も移動しますが、jQueryで背景位置を調節することでスクロールの速度をずらすことができます。 この記事ではこの機能を利用して、スクロールすると奥行きの感じられる動作を作ってみます。 投稿日2011年05月13日 更新日2011年05月13日 画像を手前は早く、奥は遅く移動 デモを見て頂ければわかると思いますが、やってることは手前の背景画像を早く動かし、奥の画像を遅く動かしているだけです。 html + css 画像は当然ですが2枚以上用意しましょう。 ここでは3枚画像の画像を使用します。 なのでdivを3つ用意し、それぞれに背景画像を指定します。 html <div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --
Posted: 2011.05.30 / Category: javascript / Tag: jQuery, Plugin マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」のご紹介です。 最新のはわかりませんがIEだと動かないかもです。 「jquery.parallax.js」のダウンロードとインクルード プラグインを下記URLからダウンロードします。 ここでは現時点で最新版である「0.2」を使用します。 jQuery Parallax | jQuery Plugins ダウンロードしたらjsファイルを読み込みましょう。 jQuery本体も忘れず読み込みます。 html <script type="text/javascript" src="jquery1.5.1.js"></script> <script type="te
jQueryでマウスホイールで横にスクロールする横型コンテンツ 通常のWebサイトは縦長でマウスホイールで下に移動していきますが、最近よく見かけるようになった横長タイプのコンテンツをjQueryを使用して作成する方法をご紹介します。 機能としてはマウスホイールで横に移動と、ナビゲーションボタンをクリックで指定位置までスライドするということをやってみます。 投稿日2011年07月21日 更新日2011年07月21日 html+css htmlはナビゲーションであるリストとコンテンツを入れるためのdivが5つあります。 html <div id="contents"> <ul id="nav"> <li><a href="#s01">01</a></li> <li><a href="#s02">02</a></li> <li><a href="#s03">03</a></li> <li><a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く