Category: jQuery & JS

jQuery ドラッグ&ドロップをマスターする!

この記事は、http://www.onextrapixel.com/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 これまでにもドラッグ&ドロップスタイルの開発は行われてきましたがjQueryを始めとするオープンソーススクリプトを手掛けるプログラマーの増加に伴い、古くからのやり方が激変していくのも至極当然のことなのかもしれません。JavaScript libraryは非常に適応性も高く、次世代のWEBに対応する為に様々な改善を案提供しています。 今回は自由自在に動かせる非常に動的なドラッグ&ドロップボックスのスクリプトをご紹介します。プロセス全体としてはjQueryの機能を搭載し、細かい部分でGeneral Public License v3のスクリプトを利用していきます。殆どのスクリプトが既述のものなので、大幅な時間短縮が可能かと思います。ちなみにこのドラッグ&ドロップライブラリのコードは今度もプロジェクトやアプリで再利用が可能ですよ。 コンテンツの下準備 まず手始めに小さなプロジェクトサイトを開発してみましょう。今回はindex.htmlの他にjsファイルとcssファイルを使用していきます。そして今後のプロジェクトに活用出来るように、また理解し易いように極めてシンプルなコーディングにしてあります。 下記が基本となるHTMLファイルです。ヘッダーにはメイン部分のjQuertyを引用することになるGoogle Codeサーバを含め、全部で3つのスクリプトが指定してあります。これによりページロード時のHTTPリクエスト削減につながるので、訪問者にとっての時間短縮など負担を軽減させることが出来ます。それからドキュメントに基本的なレイアウトを施す為のstyle.cssファイルも指定してあります。 ボディ部分は2つのDIVタグで大分していて、それぞれドロップボックスを含有しています。コードは比較的単純で、どの部分が何に使用されるのか一目瞭然なのではないかと思います。ボックス内にはそれぞれ「handler」クラスと「handler2」クラスを付けたH2タグが既述されています。ボックスの動作は個々に異なるので、ドラッグして関数が呼び出された時にこのクラス名が重要になってきます。 CSSスタイリング HTMLはとてもシンプルなものにしたので、そんなに時間を取られることもなかったのではないでしょうか。基本的なマークアップ言語をご存知ならばCSSの方も余裕だと思います。今回は複雑なスタイリングはせず、大体が個々のパディングやマージン、色の指定をしているだけです。 こちらの「body,html」セレクタはデモページ用です。インデックスファイル内にはドラッグ用のボックスが2つあるだけなので、見栄えがよくなるようにしています。またこうすることによりCSSプロパティはデザインフィールを残したままスリム化することが出来ます。 「.dv1」クラスと「.dv2」クラスでは絶対配置指定させています。本当はこうする必要もないかもしれませんし、こうしない方がいいのかもしれません。けれど今回のデモではページをリロードした時に元の場所に戻ってくれるので、これでいいのではないかと思います。それと、2つのクラス間でフォントサイズとパディング幅が異なるのにもお気付きいただけるのではないかと思います。2つのボックスをはっきり区別する為にこういう工夫がしてあります。 この他にはDIVタグ内部やH2タグは大体同じです。もし今回のコードをコピペして使用したい場合は、実行する前に1つ1つ名前など確認してから使ってくださいね。ドラッグ用のボックスが重複しないように、クラスではなくてIDを使用した方が賢い方法と言えるかもしれませね。 JavaScriptの解説 これらのボックスがうまく動作する為に必要なコードは、2つのJavaScriptファイルに全て含まれています。本日はちょっと本来の目的から外れてしまうのでjQueryの生のコードの詳細説明まではしないでおきますね。1つ目に注目したいファイルは「jquery.dragndrop.js」です。 このファイルの中に関数が幾つかありますが、中でも需要なのは22列目のDragsです。 ここではDrags用の戻り変数を設定しており、また初期データ型も設定しています。こうすると他の関数とオプションをやりとりする時にコード内でのスペースを節約出来るので、jQuery開発者間でよく用いられる手法です。内部ではドラッグボックス間でやりとりされる可能性のある各オプションを拡張する為の変数を設定しています。 それに続けて変数「dragndrop」用に設定した2つのイベントハンドラ関数が記述されています。イベントパラメータが渡されると「drag」も「drop」も関数としてコールされます。このイベントはドラッグしようとボックスをクリックする時と、リリースした時に発生します。 これで関数が各オブジェクトのCSSポジショニングを操作しているのを確認することが出来ます。JavaScript関数は定義済みのスタイルも上書きしてしまうので、絶対配置外に変更されてもボックスには影響を与えません。あとは関数のハンドラを確認したり、お化粧用のスタイル変更用コードなどが書かれています。具体的には透過度の低減、フォントスタイルや色、新規段落の追加などです。 生のDrag/Drop関数 2つ目のファイル「fn.js」はそんなに複雑ではありません。コア関数をコールする為のオブジェクトやドキュメントの読込が完了したらjQueryを介してチェックしています。先ほど既に取り上げたDrags関数のインスタンスを2つ定義しています。 「.dv1」と「.dv2」クラスを含んだ2つのブロックがありますよね。もしドラッグ可能なボックスは1つだけでよかったら、スペースを確保する為にも後半のコードは削除してしまってください。また新しいボックスを追加しても構いませんが、新しい関数をこのファイル内に設定する必要があります。 初めにセットするのは先に取り上げた変数名に基づいたオプションです。定義それぞれで最も重要なのはハンドラ名を設定することです。ハンドラ名は文書内の特定個所をクリックするかリリースした時にjQueryにイベントハンドラを伝える為に使用されます。クラスやIDでも構いませんし、DOM指向でもあなたのやり易い方法で大丈夫です。 1つめの関数内に、「onMove」と「onDrop」という2つのイベントハンドラがありますよね。両方とも変数「e」として現在のイベントに渡す新しい関数をコールします。そのあとはボックスが動くたびに、HTMLの内部を操作して変更しています。これはシンプルなjQueryイベントを使ってどれだけコントロールすることが出来るのか実証するのに一役買っていると思いますよ。 2つめの関数はプロパティもとても少なくて、「zIndex」と「opacity」を呼び出しているだけです。もしいろいろ追加する時は、プロパティ設定をチェックするために先述のJavaScriptファイルも編集する必要がありますのでお気をつけくださいね。一例としてはどっちのボックスが移動しているかによって、フォントスタイルや高さ・幅の変数を渡すことが出来たりします。結構面白いですよ。 終わりに・・・ オープンソースコードにちょっと手を加えるだけで、こんなに面白いドラッグアンドドロップインターフェースを開発することが出来ます。jQueryはせっかちな開発者にも膨大なベネフィットを提供してくれており、のバックエンドインターフェースはデータを定義する新しい方法も示しています。 というのも、イベントベースの関数だけではなくてドラッグボックス間で新しい変数やりとりさせていますよね。これは様々な可能性を示唆していると思いますよ。今回のデモではこのコードを使ってどんなことが出来るのか簡単なアイデアを提供しているに過ぎません。もしもっと深く探求してみたくなったら、jQuery Documentationをみてみてくださいね。

詳細を読む »

CSS3&jQueryを使ったパララックススライダー

本日はシンプルなパララックス対応のコンテンツスライダーをご紹介したいと思います。CSSアニメーションを使ってスライダー内の個々の要素をアニメーション化させます。それからスライダーの背景もアニメーション化させることによりパララックス効果を実現させます。 このアイデアはKendo UIのホームページを基にしています。この効果に対するリクエストやご質問を何件かいただいたので、再現してみることにしました。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ スライダー内は複数のスライドで分かれていて、それぞれのスライドにはH2タグ、Pタグ、リンク用Aタグ、画像用DIVタグが含まれています。 このスライダーで大切なのは、各要素ごとのアニメーションです。それぞれのスライドに「direction class(方向クラス)」を与えることにより、個々の要素の動作を制御します。方向クラスにはスライド可能な向きに基づき4つの種類があり、例えば右にスライドさせるものには「da-slide-toright」クラスを適用させると言った具合です。 .da-slide-fromright .da-slide-fromleft .da-slide-toright .da-slide-toleft これらの方向クラスを割り当てることによって、個々の要素のアニメーションの制御が可能となります。 オプション csliderプラグインをコールすれば以下のオプションも使用可能です。 パララックス効果は、スライダーの背景を反対方向に移動させることで実現しています。「bgincrement」を使えば、何ピクセル移動させるかと言う事まで指定することが出来ます。 デモ Demo 1: デフォルトのオプション Demo 2: スライドショー(別のタイプのアニメーション) ☆CSSアニメーションやトランジッションをサポートしていないブラウザ用に、簡単なフォールバックを使用しています。 是非色々試してご活用くださいね。

詳細を読む »

jQueryを使ったパララックススライダー

今回のチュートリアルでは動きのある画像スライダーをご紹介したいと思います。メインの選択画像をスライドさせる時に、立体感を出す為複数の背景レイヤーにパララックス(視差)の原理を使用しています。こうすることにより、画像が切り替わる時に素晴らしい奥行き感を実現することが出来ます。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 デモ内で使用しているきれいな画像はTetsumoさんのFlickrからお借りしています。 それでは早速始めましょう! HTMLマークアップ HTMLの構造としては、まず一番外側の大本のコンテイナーに「pxs_container」というクラスを設定しています。パララックス効果を実現させるためには3枚の背景が必要になるので、背景にもそれぞれラッパーを追加します。奥行きを持たせる為にそれぞれの背景画像が移動するのを「見える」ようにしたいので、透過度を加えます。 それからローディング要素と、フルサイズ画像とサムネイル画像用にULリストを2つ加えます。最後にナビゲーション要素も追加します。 さて、次にスタイリングを見てみましょう。 CSSスタイリング まずは大本のメインコンテナーの設定からです。スライダーの幅はページ全体を利用したいので100%に設定します。メインコンテナー内部の要素は全て絶対配置させるので、メインコンテナーは相対配置にしておきます。(内部の要素はページに対してではなくコンテナを基準にして配置したい感じです。) パララックス用の背景画像をラッピングしているDIV要素には、「背景画像繰り返し」の設定をします。ここで使用している画像はシンプルなグラデーション画像です。 ラッパー内部のDIVタグは、以下のスタイルプロパティを共通で設定します。 幅はJavaScriptで動的に設定します。背景DIVタグ1つ1つにそれぞれ異なる背景画像を割り振っています。 残りの要素も動的に設定するのですが、それはまた後でご説明するとして、まずは他の要素をのスタイリングを確認しましょう。 下記のラッパーは、初めは見えない状態にセットしてあります。 この中には最初にロードしておきたい要素全てが含まれていて、ロードが完了してから初めてラッパーとコンテンツが表示されるようにしたいのです。 2つのULリストもリセットしておきましょう。 このスライダー用リストでのこだわりは、LI要素内のコンテンツをページ幅全体に表示させることです。なので実際画面上で表示されているスライダーは、1つのLI要素の全体像なんです。ULリストの幅は、Window幅と画像の数に応じて動的に変化するようにしてあります。LIタグを「float:left;」に設定して動的なUL幅を用意することで、LI要素はきちんと横並びに整列してくれます。 LIタグ内のスライド画像は、左右にオートマージンを設定して水平方向でセンタリングさせています。 透明のボーダーとボックスシャドウを追加して、画像の周りにガラス枠があるように演出します。 サムネイルリストも絶対配置です。「left:50%;」を設定しているのは、JavaScriptにより動的幅やレフトマージンが負の値になってもきちんとセンタリングさせたいからです。 サムネイルの周りには白い枠線を加えて、自然なボックスシャドウも追加しています。 選択されているサムネイル画像は、不透明にしてクッキリ表示させています。 2つのナビゲーションスパンには以下の様に共通の設定を施します。 それから矢印を加えます。 画像の左端と右端に表示させたいので、左矢印(pxs_prev)右矢印(pxs_next)要素も動的に設定します。 最後にローディング部分がきちんと真ん中に表示されるように設定してお終いです。 これでスタイリングは完成です。最後にjQueryを仕上げましょう! JavaScript 今回のスライダーで大切なのは勿論画像をスライドさせることなのですが、それだけではなくて奥行きを持たせる為に3枚の背景画像をそれぞれ別々にアニメーション化させる必要があります。例えば次の画像に移動する時、スライダー用のULタグの左の値はWindow幅分マイナスに差し引かれます(すなわちこれが一つのLIタグ分の幅と言う事になります。)。それから一番手前の背景用のDIVタグもアニメーション化させるのですが、これはWindow幅の半分しか動かしません。2枚目の背景画像はWindow幅の1/4だけ・・・とそんな感じになります。なので奥の背景画像ほど、動く幅は少なくなるというのがパララックスの原理の基本です。 スクリプト外でプラグインを作成したいので、先にいくつかのオプションを定義しておきましょう。手始めに最も重要な要素をキャッシュします。 スライダー用には以下のスクリプトを追加します。 スライダー用のオプションはこんな感じになります。 auto: 周期的にコンテンツをスライドさせる秒数(0の場合は自動再生は無効) speed: 各スライドのアニメーション速度 easing: スライドアニメーションのイージング(緩和)効果 easingBg: 背景アニメーションのイージング効果 circular: 円形スライダー thumbRotation: サムネイルがランダムに回転 以上で完成です!今回のチュートリアル、お楽しみいただけましたか?是非活用してみてくださいね。

詳細を読む »

AJAX 入門講座

AJAXというメソッドが世に出てからしばらく経ちますが、一般のウェブサイトなどで活用されたわけでもなかったが、ここ最近になってWebアプリケーションの中でUI/UXの重要性がたかまったことで、注目をより集め始めました。AJAX自体はプログラミング言語ではなく、Webページに対してJavaScriptを活用する新しい方法と呼べると思います。この新しいテクノロジーはWebページをより速くしたりユーザーフレンドリーにしたりと、機能全般的により効率のよいものにしてくれます。 AJAXは「Asynchronous JavaScript and XML」の略で、JavaScriptを経由してサーバとの双方向のやり取りや更新に使用され、画面遷移せずとも部分的な更新を可能にしてくれます。今回のアーティクルではWebサイトにAJAXを実装する為に必要な基本的なことをカバーしていきたいと思います。 この記事は、http://www.onextrapixel.com/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 JavaScriptを知ってれば余裕♪ もしJavaScriptの基本を少しでも知ってたら、AJAXを理解するのにそう時間はかからないと思いますよ。JavaScriptを使えば、ユーザーと相互作用(インタラクト)するようなWebページを作ることが出来ますよね。ユーザーとのインタラクションに基づき、必要な時にサーバのレスポンスに応じてWebページの内容を送信、受信、更新することが出来ます。 ではここにシンプルなボタンがあるとしましょう。そしてこのボタンはWebページの何かしらのデータを更新する為に使われるものとします。勿論更新する為のデータ収集用の入力フィールドもあると想像してください。 <button onclick=”updateProfile()” type=”button”>Update</button> 上記のボタンコードで分かるように、ボタンをクリックすると「updateProfile()」というJavaScriptの関数を呼び出すことが出来ます。もし既にJavaScriptをご存知でしたらもうここら辺は余裕だと思います。scriptタグ間で定義されている関数が呼び出されます。 <script type=”text/javascript”> function updateProfile(){ // JavaScript code to be executed } </script> こういったscriptタグやその内部のコードなどは、bodyタグの直前に配置するのが通例となっています。またサイトの構築方法やページに対する特別なニーズにもよりますが、JavaScriptはヘッダー内に配置することも可能です。勿論JavaScriptファイル(拡張子.js)に配置して、ヘッダー部分で読み込むのが無難です。 さて、これでボタンが押された時に実行したいコードを関数内に配置出来ます。この辺も特に目新しいことはないかと・・・。従来のJavaScriptではサーバからのデータをそれ以上必要としない限り、そのページ内に既に存在しているコンテンツを自由に操作することが出来ましたよね。Freelance Finances Calculatorなんかは、JavaScript使用例の良い例だと思いますよ。 もし更にサーバからの情報が必要な場合は、サーバサイド・スクリプト言語を使ってページを再読込みさせる必要がありました。ここでAJAXの出番です!「updateProfile()」関数内にJavaScriptを介してサーバと通信する為のAJAXコードを記述すれば、ページを再読込みすることなく、必要に応じてサーバ上のデータを取得、更新、削除することが出来るようになります。 <script type=”text/javascript”> function updateProfile(){ // JavaScript code to be executed // AJAX code will go here as well! } </script> XMLHttpRequestとActiveXObject Objects AJAXを使用するにはまずブラウザに「サーバと通信しますよ」と伝える必要があります。JavaScriptにはAJAXが動作する為の手助けとなるオブジェクトが2つあります。それが「XMLHttpRequest」と「ActiveXObject Objects」です。これらのオブジェクトはJavaScriptによるオブジェクト指向の基礎となる部分なので、今ここでオブジェクト指向の概念を理解したり実装する必要はありません。またそれは追って説明していきますね。 どちらのオブジェクトもWebページの裏側でサーバとデータを交換したり処理したりと同じことを行いますが、サポートするブラウザが異なります。 「AJAXを使いますよ」とブラウザに伝えるには、以下のコードを使用します。(W3Schoolsから拝借) <script type=”text/javascript”> function updateProfile(){ // Create a variable to refer to our request object: var xmlhttp; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{ // code for IE6, IE5 xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); } } </script> 上記のコードは極めてシンプルです。まずオブジェクトを保持する変数を作成します。このオブジェクトは「XMLHttpRequest」か「ActiveXObject Objects」のどちらかになります。(けれどどちらもすることは同じです。)もしブラウザがwindow.XMLHttpRequest経由で「XMLHttpRequest」をサポート可能と検出出来るならオブジェクトを「XMLHttpRequest」に設定します。そうでないなら「ActiveXObject Objects」に設定します。 WEBサイトでAJAXを使用する場合は、いつもここからスタートすることになります。もし複数の関数を使用している場合、全関数の前にこのコードを宣言するのはあまりいいアイデアではないと思います。複数の関数を使用する場合は、ページロード時に変数を設定する方が効率的だと思います。 サーバからのレスポンス受信 これでAJAXをブラウザで使用する為の準備は整ったので、ここからがお楽しみパートです。サーバとの通信に移りましょう。ブラウザによってどのリクエストオブジェクトが使用されようと、AJAXを介してサーバから情報を取得したり送信したり操作する為に使用可能な事前定義された関数があります。 1つ目の事前定義プロパティは「onreadystatechange」です。何をするプロパティかと言うと、もうそのまま読んで字のごとくなのですが「readyState」が変更されると、自動的に保持している関数をコールしてくれます。「readyState」は単に「処理中」「ダウンロード中」「完了」といったオブジェクトの状態を示します。 xmlhttp.onreadystatechange = function(){ // This code will

詳細を読む »
CSS
winmonaye

LESS CSSを徹底解説

私はフロントエンドディベロッパーとしての仕事を、いかに簡単にそして効率よく行うか常々考えてきました。けれど最も身近な存在であるCSSに改めて注目し始めたのは、ほんのここ最近のことです。フロントエンド開発を楽にするためには、まずグリッドシステムとobject-oriented CSS(オブジェクト指向CSS)の考え方から始めまって、さらにCSSプリプロセッサという形で言語自体の拡張が容易になりました。最も知名度の高いのはLESSとSassですね。 今回のアーティクルではコードをモジュール化や再利用可能にすることにより、効率的にオーガナイズするベネフィットを探していきましょう。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 CSS開発お助けツール オブジェクト指向CSSは、ほぼどこでも使用可能かどうか、また将来的なプロジェクトの開発時間短縮に繋がるようなコーディングを自分が行っているかどうか確認する手段にもなります。OOCSS(オブジェクト指向CSS)の基本原則は以下の通りです。 構造とスキンの分離:個々の要素がレイアウトに沿うように適切なクラス設定がなされており、また目的に合ったスタイリングがされていること。 位置依存的なスタイリングの回避:OOCSS GitHubプロジェクトで完璧に説明されていますが、軽く説明すると、「.container h2」と書くより、セマンティック的に問題なければ何でもいいのですが「h2.tagline」などと記述することを推奨しています。こうすることにより全てのH2要素は必ず同じように表示されると言うような考え方です。 オブジェクト指向CSSで記述する際には、HTMLマークアップの時点から何をどのようにしたいのか注意しておく必要があります。例えばこのようなコードがあったとします。 それよりもこのように記述するべきです。 そしてCSSはこのように使うのです。 「.blog-post」の中身それぞれにCSSルールを適用させるのではなく、もっと特定した情報だけ与えて再利用可能にするのです。ただしこのままでは「HTML書き過ぎ」という問題があります。1つのシンプルなブログポストにしては、コードが若干複雑過ぎるのです。ここがLESSの目の付け所で、LESSを使えばもっとプロセスを単純化させることが出来ます。 LESSとはCSSプリプロセッサーのことで、CSS言語をとんでもなく便利な機能満載に拡張してくれます。一度使い始めたらその凄さにビックリすると思いますよ。LESSには非常に多くの便利な機能が備わっているのですが、今回はその中でも3つの機能に注目したいと思います。 変数: @color1: #df0290;といった形で変数を定義し、コードの中に埋め込んでいきます。 .container { background: @color1 url(‘img/bg_gradient.png’); } Mixin: 便利なファンクション(パラメータ有り無しに関わらず)を定義します。 .box (@w: 500px, @h: 200px) { display: block; width: @w; height: @h; } これもまたコードに埋め込んでいきます。 .modal-dialog ( .box(400px, 700px); } 入れ子式ルール: 説明するまでもなさそうですよね。みなさん今まで「CSSでこういうことが出来たらいいな」と思っていたのではないでしょうか。 article { font-family: serif; line-height: 1.4; h1 { font: 2em bold sans-serif; } h2 { font-size: 1.5em; &.category { color: #666; } } } アンパサンドマーク(&)を使用すると、親ルールを参照します。その為LESSコードがコンパイルされると、「&.category」は「article h2.category」に変換されます。 LESSを使用すれば、先ほどのブログポストの例もHTMLはこんなにシンプルになります。 CSSはこんな感じです。 CSSをオーガナイズする必要性 先ほどの例は極めてシンプルなものでしたが、WEB開発プロジェクトが大きくなればなる程、多用なスタイル設定が必要になればなる程、CSSをオーガナイズする必要性は現実味を帯びてくるのではないでしょうか。若干ダイアログは異なって見えるかもしれませんが、全体のルールを書き換えない理由にはなりません。単純にLESSとOOCSSの組み合わせを使って、スタイルコード(すなわちモジュール)を完成させましょう。先ほどの例のように、役割ごと細かくね。 スタイルコードのオーガナイズにこれほど重点を置くベネフィットの1つとして、様々なデザイン機能の分離が可能と言うことが挙げられます。この考え方でいくと、CSS(この場合はLESSですが)のライブラリを作成していくような感じになります。 /project/css/ – reset.css:ブラウザのデフォルト設定をリセット – grid.less:グリッドシステムにmixinを適用(上記の.col(@width)と言ったmixin) – type.less:フォント設定にmixinを適用(@font-faceルールなど) – colorscheme.less:デザインで使用する様々な色用のLESS変数 – interface.less:インターフェース機能用のmixin(ボタン、フォーム、ダイアログなど) – layout.less:サイトのレイアウトに特定したデザイン – style.less:メインスタイルシート(上記含め、サイトのデザインに必要なもの) このレベルでのオーガナイズは、ページ数の少ないものや1ページのアプリにはやり過ぎです。けれど多くの異なるページを所有した大規模なプロジェクトでは話が違ってきます。これが更に大規模になったら、search.lessやprofile_page.lessといったページやファンクションに特定したスタイリングファイルも必要になってくるでしょうね。 しかしながら、運用サーバー上でやみくもに多数のLESSファイルをロードするのも考えものです。以下にガイドラインを記しておきますね。 いつでもきちんとしたスタイルのCSSを記述するようにしましょう。全てはディベロップメントの為ですから、コードスタイリングで横着をするのは止めましょう。 LESSではコメントアウトする時、「/* */」ではなく「//」を使いましょう。LESSコンパイラで削除されてしまいます。 常にパラメトリック(媒介変数)mixinを使うようにしましょう。もし変数を持たないLESS mixinだとしても、空のカッコを追加して「.border () { border: 1px solid black; }」というふうに記述しましょう。こうすることによりLESS mixinがコンパイルされたコードに紛れることを防ぐことができます。 LESSコードをコンパイルしてからCSS用のミニファイを使って縮小させます。LESSには「node.js」用に書かれた独自のコンパイラーがあり、またPHPコンパイラーもあります(オンラインデモもあります)。PHPのLESSコンパイラーでエラーが発生したとよく聞きますが、私自身はまだそういうことはありませんね。

詳細を読む »
CSS
winmonaye

CSS3 3Dギャラリー

本日は、CSSの3Dトランスフォームを使って、3Dギャラリーを作ってみましょう! 3Dトランスフォームを使用すれば三次元空間の設定が可能となり、単純な要素でも色々と面白い動きをさせることができます。またCSSトランジッションも併用すれば、3D空間での移動を可能にし、より現実的な効果を産み出すことができます。 今回実現したいメインアイデアは、真ん中に1枚そして両脇に2枚画像があり、それが円形のギャラリー形式に表示されるようにすることです。CSSでperspectiveを使用しているので、画像を回転させると側面の2つの画像は立体的に見えるかと思います。 尚、CSS 3D transformをサポートしているブラウザでないと動作しませんのでお気を付け下さい。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ 今回は以下の様なHTMLコーディングで構築されています。 またこちらがギャラリーを初期化するコードです。 オプション また、以下のようなオプションを加えることも可能です。 お楽しみいただけましたでしょうか?

詳細を読む »

CSS3とjQueryでサムネイルをカッコよくイメージ拡大

本日はjQueryを使ってこざっぱりと綺麗にまとめられたサムネイルのプロキシミティ効果(接近効果)の作り方をご紹介したいと思います。これはマウスを画像にホバーすると自動拡大され、周辺画像もそれに合わせて適切なサイズに自動拡大されるというアイデアです。また同時に説明文も表示されるようになっています。 これは元々http://porscheeveryday.com/というサイトの効果をjQueryを使って実現出来るのかという読者からのリクエストに基づいており、この効果を私たちなりの方法で作り直したものです。 今回はJames Padolseyさんが作ったjQuery Proximity pluginを利用しています。 デモで使用しているイラストはFlorian Nicolleさんによるもので、Creative Commons Attribution-NonCommercial 3.0 Unported Licenseにライセンスされています。 この記事は、http://tympanus.net/codrops/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ 今回サムネイルにはULリストを使用し、各画像の説明文用にDIVタグを追加しています。(デモ2の画像をご覧ください。) それではこちらにスタイル設定を加えましょう。 CSSスタイリング ULリストはページ中央にセンタリングし、サムネイルの透明度が低いので「透けて見える」ような背景画像を追加します。 また疑似要素を使ってRGBA背景色を加えることにより、背景画像の色合いを増やしています。 リストアイテムは左側にフロートさせ、アンカーと画像のポジションは相対位置で設定しています。 サムネイルそれぞれは、幅100ピクセル、透明度0.2で設定します。 説明部分はデフォルトでは非表示にし、JavaScriptを使って表示されるようにします。 最後に説明部分のDIVタグの設定をしましょう。 これでスタイル設定は完成です!つぎにJavaScriptを見てみましょう。 [adrotate group=”2″] JavaScript まず大切なのが、サムネイル画像をホバーした際の説明部分のポジションとサイズを計算することです。勿論サムネイル画像がメインラッパーのどこに配置されているかによって、またサムネイル画像が最大化した際のサイズによって異なってくるので注意が必要です。例えばサムネイル画像が右端に近かった場合、説明部分はサムネイル画像の左側に配置したいわけです。 それからプロキシミティイベントを画像にバインドする必要があります。マウスの位置によって画像を上下にスケーリングするということです。画像が最大化されたら、そのz-indexを高いまま維持します。そうすれば説明文をきちんと表示させることが出来ます。 デモ一覧 デモを3種類ご用意しましたので、どうぞご覧ください。 デモ1: サイズ変更のみ デモ2: サイズ変更と説明文 デモ3: 小さ目のサイズ変更と説明文

詳細を読む »

CSSツール・ジェネレーター お役立ちツール

WEBデザイナーやディベロッパーのみなさんは、WEBサイトのデザインや開発にかける時間をいかに短縮するか絶えず模索していらっしゃるのではないでしょうか。そうすることによりWEBサイト構築の生産性を向上させ、自分の仕事を最大限に活用出来るよう改善していらっしゃるんですよね。ここではみなさんの貴重な時間を節約出来る、数々の優れたCSSツールやジェネレーターをご紹介していきたいと思います。 CSSツールは魔法のランプの様に機能し仕事をシンプル化してくれるので、WEBディベロッパーのみならずWEBデザイナーのみなさんにも不可欠なツールです。ほぼ全ての開発ツールは時間短縮を実現してくれるので、優雅で機能的で高度に最適化されたWEBサイトを近道しながら作り上げることが出来ます。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 CSSツールとジェネレーター

詳細を読む »
jQuery & JS
winmonaye

jQueryマウスで動くメニューバー

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ 以前Dirk Tucholskiさんから「FLOWmarketというWEBサイトのメニュー部分はどうなっているのか。」と言うメールをいただきました。なかなか面白い動きをするサイトだったので、私だったらどうするか考えてみました。このアイデアの面白いところはメニューリンクが垂直方向に長く連なっているところです。しかもそのメニュー全てが表示されているわけではありません。可視エリアをマウスで上下にスクロールすると、メニュー自体が上下に動き、それまで表示されていなかったメニューアイテムが表示されます。更にマウスが当たっているメニューはハイライトされています。 HTML 一般的なメニュー用コード: CSS初めの一歩 今回高さは固定設定します。なので、ここではオーバーフロー値はoverflow: auto;と設定しましょう。こうすることにより、メニューはスクロールしてくれますしJavaScriptに関係なくアクセスすることが出来ます。まずは基本的なスタイリング設定です。 JavaScriptの初めの一歩 ここでのアイデアはメニューリンクがホバーされるまでは静止状態で、ホバーされたらそれに応じて調整すると言うことです。スタイリングする為に「hover」クラスを追加し、効果を実行させる為に内側のdiv(今回追加します。)を上下に移動させます。ではどの位まで上下に動かしたらよいのでしょう?これにはどのリンクがホバーされているのか正確に把握する必要があります。てっぺんに近いところにあるリンク(もしくは底辺に近いリンク)はそれよりも中心に近い位置にあるリンクより、スクロールする幅が広くなります。この遠い位置にあるリンクには、距離を感じさせない為に「speed×乗数」で速度アップを図ります。位置を把握する為には、ループさせてデータ属性を適用させます。 $("div").data("pos");と言うようなHTML5のデータ属性(例:<div data-pos=1>)にアクセスすることも可能です。その方が簡潔でクールですね。 フェードアウト WebKitブラウザでデモをご覧になった方は、スクロールするとメニューの上端と下端がフェードアウトしていくのをご確認いただけるかと思います。これはただメニューに:beforeと:afterの疑似要素を加え、上端と下端で絶対位置指定し、白から透明へのグラデーションを使用しているだけです。 必要ならば他のブラウザのプレフィックスを使用してください。 「speed」が重要 メニューごとにシフトアップまたはダウンされる幅は、「speed×乗数」の計算結果によって変わってきます。ちなみに上記のJavaScriptではスピードは任意で13.5で設定されています。なんとかメニューアイテムの個数や高さその他もろもろに基づいて、適切な数字を数学的に割り出そうと試みましたがなかなかうまくいきませんでした。メニューが変わる度に計算し直していてはきりがないので、何かよいアイデアを思い付いたら是非教えてください。 キーボードナビゲーション 今のスピードですと、選択されたメニューへと的確に移動するのは少し難しいので、それをサポートするためにキーボードナビゲーションを加えます。「document」上で「keydown」イベントを監視し、ファンクションを実行することで完成します。コードの書き換えを減らす為に、現在アクティブなメニュー項目はそのまま選択された状態にしておき、上矢印か下矢印が押されたらそれに応じてメニュー機能を処理する用設定された「mouseenter」か「mouseleave」イベントをトリガーにします。 ここでは「cur」変数の設定がなされていませんが、デモ上ではきちんと設定されています。 使い勝手の面では・・・ このアイデアの核心である「ユーザーの期待よりもメニューが速くスクロールする」というものは、ユーザビリティで考えるとあまり良いものではありません。不慣れで微妙な動きの為に、選択したいリンクを確実に選ぶのはなかなか難しいと私も自覚しています。先述のキーボードナビゲーションはある程度の手助けにはなりますが、これもまた潜在的に馴染みがある考えとは言えないと思います。 今回の手法は長いメニュー全てに対処出来る解決方法ではありません(こちらもご参照ください)。どちらかと言うとむしろ面白さを追求した効果です。メニュー項目がそんなに重要ではないサイトや、ポエムを表示する方法などで使用するにはいいかもしれませんね。サイト上で問題なく動いていれば、多少のアクセシビリティは目を瞑ってもらいましょう。そう考えると、このFLOWmarketサイトは素晴らしいですよね。

詳細を読む »

映画CMのようなアニメーション文字

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ 先日「黒の画面上に文字が飛び込んできて、その下にあった画像が明らかになる」と言うようなコマーシャルを目にしました。視覚的にもとてもクールでしたし、それを見ていたらWebKitに-webkit-background-clipと言うテキストを通して背景を表示させるプロパティがあることを思い出しました。なので、似たような効果を再現することが出来るかどうか試してみようと思います。可能だとは思いますが幾つか興味深い問題点もありそうです・・・。 最終的にはこんな感じに仕上がる予定です: デモはWebKitブラウザ(Safari、Mobile Safari、 Chrome)上で動作します。 まずは基本コードから そんなに特別なものでもないんですけれどね: 文字を動かす 下記の様にspanタグで全て文字を囲んでしまうのがミソです: ここで使用しているのはただのspanではありません。インラインレベル要素でラッピングしていると言うことが非常に重要なのです。これがインラインブロックやブロックだったり、何か別なものであった場合もうまく動作してはくれません=( このspanタグのおかげで、相対配置を使っての文字移動が可能になりますね。メガ楽しみです! 上記のコードで最初の文字が上部左へと移動してくれるはず・・・。が!違います。失敗に終わります。ポジショニングのせいでうまく行かないようです。残念x2=(=( 試しにマージンを使ってみたら、なんとうまく行きました!やった~!やっと楽しいアニメーションの時間です。spanタグはインライン要素なので左右方向へのマージンは使えますが、上下方向には効果がありません。 Lettering.js まぁこんな感じに進んでいますが、実際1つ1つの文字を手作業でspanタグでラップする必要があると思いますか?答えはNOです。Lettering.jsというjQueryのプラグインを使えば、文字通り一発解決してくれます。要素のセットで呼び出せば、その位置を参照するクラス名を使用してspan内の全ての文字を個別にラッピングしてくれます。 超シンプルで超クールですね。もっと早く思い出すべきでした。 アニメーション化 今回の最終ゴールは個々の文字をアニメーション化して所定の位置へ動かすことでしたね。ゴールに向けて使用する最後のサンプルマークアップはこちらです: これをLettering.jsというJavaScriptの一行を使って、全ての文字をspanで囲みます: そしてその文字にtransitionを指定することにより、その「変化を指定されたプロパティ」はアニメーション化されます。これはWebKitブラウザ上のみで動作しますが、文字の動きだけなら他のブラウザでも同じような動作をするかもしれません。 Lettering.jsで適用されるクラスはchar1やchar2などなので、これらに大きな数字のマージンを適用させて文字をページから蹴りだします。 文字が動き始めるまでに少し時差を加えてみましょう。これによりLettering.jsによる文字を動かす為のラッピング作業も整い、また少しじらすことによって、「これから何が起こるのか?」と見ている人の期待感も高められると言う効果があります。 実際何をするかと言うと、1秒待ってからhtml要素にクラス名を適用させます。 このクラス名「step-one」は事前にセットしたマージンを上書きするために使用します。マージンを上書きしゼロにリセットすると、文字も本来のポジションに戻ります。 デモ内の小さい文字の方も同様にLettering.jsでspanタグを付け、CSSのtransitionやクラス名に対する時差を適用させています。唯一異なるのは背景画像を透過させていない点です。ただの白い文字なので、position: relativeを使用することが出来ます。 白い文字の方もスタート位置をランダム設定し、文字をオリジナルの位置にけり戻す為のクラス名を「step-two」としてもう少し遅いアニメーション開始時間を設定します。 ここではインラインスタイリングされたCSSの値にjQueryを適用させている為、!importantルールを使用する必要があります。!importantで値を上書きさせる為です。 要約 もしご興味があれば・・・ですが、ここで使用しているフォントはNewcomenと言うフォントでTypekitから入手が可能です。 マージンは左右方向しかコントロール出来ないはずなのに、実際のアニメーションで上下にも動いているのは、親要素のtop paddingのアニメーションのお陰です。 あ、あと、本当にRed Sonjaがリメイクされるかどうかは知りません。ただの噂みたいですけれどね・・・。

詳細を読む »

:hoverでHTML5サウンド再生

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ CSSでサウンド再生する方法をググると、大抵以下の様な検索結果が出るかと思います: Counter Strike: Sourceに関する何やら。 play-duringやcue-beforeに関する何やら。 こちらは一見使えそうに見えますが、実際には古いブラウザでメニューアイテムをロールオーバーした時に奇妙な音を立てるための機能だけでなく、聴覚スタイルシート(アクセシビリティとかスクリーンリーダー等)をサポートするためのものです。 サウンドもまたデザインの一部なのだから、CSSでコントロール出来るべきだと思うのですが、残念ながらまだそこまでは至っていません。指定したエリアをマウスオーバーした時にサウンドが再生されるようにするには、HTML5かFlashに頼らなければなりません。でもこれを読んでいる皆さんはFlashを使うよりも、HTML5を使って再生する方が興味があるはずです。 HTML5では<audio>要素(Firefox 3.5+、 Chrome 3+、 Opera 10.5+、 Safari 4+、 IE 9+で対応)を使って、サウンド再生することが出来ます。ブラウザのサポートを最大限活用するために、MP3ソース(WebKitとIE)とOGGソース(ForefoxとOpera)の両方を使ってみましょう。 上記のコードを丸々そのままページに記述したとしても、何も見えないし聞こえません。小さなプレイヤーを表示させたいなら、コントロール属性(<audio controls>)を使う必要があることを覚えておきましょう。音源だけ再生させてプレイヤーを表示させたくない場合は、オートプレイ属性(<audio autoplay>)が必要となります。 今回の我々のゴールは、メニュー項目など特定の要素の上にマウスオーバーさせると、サウンドが再生されるということです。しつこくなりますが、残念ながらCSSで<audio>要素に指示を与えることは出来ませんので、JavaScriptを使用することになります。JavaScriptを使ってサウンド再生するには以下のようなコードになります: イベントの取り扱いと選択が簡単になるので、jQueryを使ってみましょう。 ではこれに、指定した要素をマウスオーバーした時にサウンド再生するようにコードを加えます: その他の方法 Goodfootモバイルアプリのティーザーページでは「Available on the App Store」をホバーすると変な唸り声が聞こえるという、似たようなテクニックが使われています。このページではアイコンがホバーされる度に、DOMに新しいオーディオ要素が注入されるようになっています: 同様にOGGもサポートするには、もう少し改善しないといけないところもありそうですね。W3Cのスペックでも他のどこでも見かけたことがないので、ボリューム属性がどうなっているかはちょっとハッキリとは分かりません。こちらはジェフリー・ウェイさんによる修正版です: きちんと動作するように見えるし、言ってみればそれが最低条件なので、このアプローチの仕方はとてもいいと思います。一度サウンド再生されると、キャッシュされて再生速度が上がるようなのですごくいいですね。 他に考えうる方法としては、3つのオーディオ要素全てをページに記述してしまうことでしょうか。 それから、この内の1つがランダムで選択されるようにします: トライアルと問題点:サウンドオーバーラッピング 私の元々のアイデアは「ナビゲーションメニュー等をホバーすると小さなクリック音が再生される」というものでしが、すぐに問題点が浮かび上がりました:.play( )をトリガーするメニューアイテムを、サウンド音が終わるよりも断然早くホバー出来てしまうということです。単体のオーディオ要素は自分自身のサウンドをオーバーラッピング再生させることは出来ません。サウンドが再生し終わるまでは.play( )のリクエストを無視し続けてしまいます。 この対策として、まず.pause( )でサウンド再生を停止させて再度.play( )させることを思い付きました。けれどあまりうまくいきませんでした。きちんと停止してはくれるのですが、その後再び再生されないことが何度もあったのです。 一番スムーズに行く方法としては、オーディオ要素を全てのメニューアイテム用に複製することでした。こうすればメニューアイテム1つ1つがオーディオ要素を所有しているので、サウンド再生もオーバーラップも可能になります。

詳細を読む »
jQuery & JS
winmonaye

YouTubeビデオの幅をFluidにする

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 こちらのアーティクルは2010年9月2日に書かれたものを加筆修正致しました。異なるアスペクト比のYouTubeビデオへの対処方法、インラインフレームを埋め込む新しい方法、より効果的なスクリプトの書き方などについて触れています。 全てのビデオをカバーするためにこのアイデアを考えてみました。 画像(修正あり) YouTubeが現在提供している埋め込みコードは極めてシンプルなインラインフレームです。サンプルはこちらです: 上記のYouTubeのサンプルを含み、インラインフレームには親ページからはサイズを測定することが出来ない外部コンテンツが含まれています。(例えば画像などの)コンテンツの中身によってインラインフレームのサイズが決まるわけではないので、インラインフレームを記述する上で高さと幅の指定は必須項目です。けれど要素に固定の高さと幅を設定してしまうと、流動的であったりフレキシブルなタイプのデザインに問題が生じます。もし親ページ内でのエリアが実際のビデオ幅より狭く縮小されてしまったら、ビデオ自体がそれに合わせて縮小すると言うことはなく、枠からはみ出してしまいます。 先日Web Designer Wallというサイトで、この流動的なビデオへの対処方法に関して記事が公開されていました。このアイデアは元々ティエリ・コブレンツが提唱していたもので、彼個人のWEBサイトやA List Apartにも掲載されています。 私はこのアイディアが非常に気に入っています。巧妙で純粋なCSSが使用されているし、きっちり与えられた役割を果たしています。しかしYouTubeビデオに対する解決策には、問題点が2点ほど思いつきます。 ビデオのアスペクト比が事前に定義されています。padding-bottom: 56.25%と言う巧妙な記述は、アスペクト比が16:9のビデオにはうまく作用するのですが、全てのビデオをカバーしてはくれません。 追加のマークアップを記述する必要があります。全てのビデオは別のHTML要素でラッピングされていなければなりません。<figure>などを使うことには納得出来るのでセマンティック的ではないとまでは言い切りませんが、余計な仕事が増えると言うことは確実でしょう。 もし上記2つのいずれも気にならないのであれば、どちらかを使用すればよいのでここで解決です。けれどもし気になってしまうのであれば、JavaScriptに出動願いましょう。 jQueryを使ってみる このjQueryでの解決方法で声を大にして言いたいのは、ただYouTubeの埋め込みコードを貼り付けたいページにコピペすれば済んでしまうと言うことです。アスペクト比など何も気にしなくていいのです。マークアップの追加記述も必要ありません。 押さえておくべきことは以下の通りです: ページ上の全てのビデオのアスペクト比を調べて記録する。 ウィンドウサイズが変更される場合は、変更後のページでのコンテンツサイズを確認し、変更後のサイズをオリジナルのアスペクト比を基に定める。 実際のスクリプトはこのようになります: このスクリプトをご自身のサイトで使用する際にやらなければならないことはただ1つ、\$fluidEl = \$("body");ラインの変更です。 ("body")セレクターをコンテンツの親になっている流動幅な要素に変更すればよいだけです。もし要素が<section id="main-content"></section>などと記述されていたら、おそらくその"#main-content"でしょうね。  window.resizeに関しての提唱:ウインドウのリサイズイベント時にファンクションを実行させる際には、気を付けておくべきことがあります。その特定のイベントはブラウザによって異なる頻度で実行されます。WebKitはリサイズの最中に何千回何万回はたまた何百万回と実行してくるので、もし同時に何か重い作業をさせるとページパフォーマンスに支障をきたすことがあります。リサイズを「デバウンス」する対処方法として、ポール・アイリッシュさんのプラグインのご使用を強くお勧めします。 デモ ファイルダウンロード 以前のYouTube埋め込み方法(object要素やembed要素)をカバーするために、ダウンロードのデータ内にアーティクル更新前の古いバージョンも残しておきますね。

詳細を読む »

input レンジ入力をカスタマイズして実用性を高める

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 レンジ入力欄をHTML5で作成するとこのようになります: 対応しているブラウザでは以下のように表示されます: これは非常に便利な機能で、ユーザーから最小値や最大値を収集したい場合には、どこでも使用することが出来ます。 しかし、少し変だと思いませんか? このスライダーだけだと、レンジ入力欄はユーザーに対し実際に送信される正確な「数値」を目視させていないのです。もしあなたの質問事項が「お元気ですか?」だったとして、左に行けば行くほど「哀しい」、右に行けば行くほど「嬉しい」というような値を表現しているのであれば、実際にユーザーに数値を確認してもらう必要はないかもしれません。けれども大抵は数値を表示させる方が無難なことが多いでしょう。 公正を期すために、スペックにはどのように書かれているか参照すると: input要素とは、数値を表す文字列に要素の値を設定する働きをしますが、正確な値は重要ではないという警告が付いており、UAにより数値を求める時よりも、シンプルなインターフェースを提供させることを可能にしています。 けれども、それは自分たちが見栄えの良いスライダーを使用したいがために、送信した数値をユーザーに見せなくていいということにはつながりません。 各ブラウザがUIコントロールを変更して、自動的に数値を表示するようにしてくれたらありがたいのですが、まぁ自分たちで作ることにしましょう! このような場合にはoutputタグの使用がベストです。outputタグとはform要素内での何らかの計算結果を表示する時に使用されます。とてもシンプルな実装サンプルをご覧下さい。 けれど、こんなインラインJavaScriptは今どき流行らないし、jQueryを参照してCSSできちんと処理した方がよいでしょう。今回のゴールは、時間を求めたり、最低値最大値、またステップなどを求めたりと、どのようなレンジ入力欄の使い方をしたとしても、スライダー上の吹き出しに現在値を表示させることです。 それではまずoutput要素のスタイルを指定しましょう。当然のことながら、input要素の前に記入します。そうすることにより、一度JavaScriptで設定してしまえば、残りの値も調整することが可能になります。疑似要素でグラデーションを付けてたり、角を丸く削ったり、小さな三角形のポインタを付けることも出来ます。 次にすべきことは、全ての範囲において数値の変化を確認することです。すなわち今回の目的は、スライダーのスペースで吹き出しの左側をシフトしてみることです。 スライダーの入力幅や最小値最大値は任意に設定可能なので、これは言うほど簡単なことではありません。 少し数学のお勉強もしてみましょう。こちらはjQueryのJavaScriptで、コメントも載せてあります: 大変だったのは、1.3の値のところです。吹き出しの尖がった先端を、スライダーの真ん中に揃えようとしましたが、それは簡単ではありません。何故ならスライダーの真ん中が100%左端または右端に行くことはないからです。従ってこの数値は完璧ではありませんが、何もないよりは幾分かマシでしょう。 ボーナスとしては、レンジ入力をサポートしていない各ブラウザでも、吹き出しの動作を表示してくれます。 備考:上記のコードは最小値と最大値が定められているレンジ入力欄に対して有効であって、もし最小値と最大値が無い場合は、うまく動作しません。私は最小値と最大値を設定しないでレンジ入力欄を使用するのは少し違和感を覚えますが、もし最小値と最大値を設定しなかった場合、デフォルト値は0から100です。それを証明するには下記のコードでテストしてみてください。もし下記のコードに変なところがあれば、修正して試してみてください。こんな感じになると思いますよ。 それでは最小値と最大値を算出してみてくださいね。こちらにライブデモもありますので、よろしければご覧ください。改善案はいつでも大歓迎です!

詳細を読む »

ウェブサイトを HTML&CSSに基礎から構築 〜 第 3 回 〜

ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを4回に分けて説明しています。 これが今回のチュートリアルで作って出来上がったウェブサイトです。 完成したサイト 第1回: ウェブサイト作成の準備&ボディーのバックグラウンドイメージの設定 第2回: メニュー&ロゴ、ソーシャルリンクのCSS&HTML 第3回: jQueryを使ってイメージスライダーの設置 第4回: 最新のプロジェクトのCSS ビデオ講座 1.スライダー プラグインをダウンロード 画像を順番に表示させる、スライダー系のプラグイン色々とありますが、今回は、CSS Tricksの運営者Chris Coyierが初めて作って、その後数人のでプログラマーが参加し強化された、AnythingSliderを使いたいと思います。 AnythingSliderは、機能が豊富なのと、自分が好きな様にスタイルができるので、とても重宝すると思います。 それでは、早速ここからダウンロードしてください=>AnythingSlider ダウンロード 2.スラーダー用のファイルの設置 お決まりですが、とりあえずjQueryのスクリプトのリンクとAnythingSliderのスクリプトファイルと自分たちのスクリプットファイルをヘッダー内にリンクを挿入してください。 それと、AnythingSliderのCSSをリンクさせてください。これで、最低限必要なファイルは、全部OKです。 3.スライダー用にのHTMLマークアップ Anythingスライダーは、ul li を使いますので、一個一個のスライダーは必ず li の中に入れてください。今回は、li の中に入るのは、画像だけですので、とても単純に以下の様になります。 画像は、適当に用意いたしました。今回使う画像のサイズは、800×280 です。 4.Javascriptの設定 実際にスライダーを稼動させるには、Jqueryのいつもの $(document).ready(function(){}); のファンクション内にさっき程ulにつけたIDを指定して、anythingSliderのファンクションを付けます。 $(document) は、文字どうりドキュメントが、 .ready() で用意できたらー、となるので、訳すと”このファイルが全部ダウンロード完了したら” になります。 そして、.ready() 内に新しいファンクション function(){} を入れることで、実際にダウンロードが完了するとそのファンクションが稼動されます。いわゆる、callback ですね。 さて、今回のanythingSliderの設定は以下になります。 初心者でも理解出来る様に、上の各ラインが何しているか説明して行きたいと思います。 まず、DOM(簡単に言うとHTMLの各部分のことですが、詳しい説明は、WIKIでご覧ください。) を指定して、 これで、さっき程の ul で指定した ID をターゲット完了です。 そして、それに対して、anythingSlider のファンクションを発動させます。 これで、発動は完了です。 ただ、これでは、すべてのオプションがデフォルトのままになりますので、anythingSlider のファンクション内に、自分たちの好きなオプションを加えます。指定出来るオプションは、各ファンクションによって決まっています。anythingSlider のファンクションが指定できるオプションは、CSS TricksのスライダーのデモのページのDefault Optionのリストをご覧ください。 実際今回必要なのは、左と右の矢印だけなので、必要なオプションは、以下になります。 widthとheightで横幅と縦のサイズを指定して、buildNavigationをfalseで、ナビーゲーションの作成(スライダーの数や現在地の表示)は、なし に指定。 autoPlayLockedをTrueで、右クリックや左矢印を押しても、自動的にローテーションは止めない。enableKeyboardをfalseキーボードでのスライダーのコントロールは OFF にしてしました。 コンマ区切りでオプションを指定して、最後のオプションのコンマはいりません。すべてのオションは、javascriptのobject literalとしてファンクション内に指定しますので、 {} で閉じてください。 なので、最終的に全部をまとめると以下の用になります。 5.CSSの調整 あとは、自分のサイトのデザインに会う様に CSS でマークアップをしていきます。anythingslider.css 内のcssを変更してもいいのですが、新しいバージョンにアップデートした場合に、簡単に上書きできないので、すべてのCSSは、自分のサイトのメインのstyle.cssに入れていきましょう。 そんなに難しいCSSは入っていなので、説明ははぶいておきます。 なにか、分からないようなことが有れば、いつでもコメントを残してください。 これで、スライダーの完成です。必要があればスライダーのデモご覧になって遊んでみてください。 今回のチュートリアル分のデモ 第1回: ウェブサイト作成の準備&ボディーのバックグラウンドイメージの設定 第2回: メニュー&ロゴ、ソーシャルリンクのCSS&HTML 第3回: jQueryを使ってイメージスライダーの設置 第4回: 最新のプロジェクトのCSS ビデオ講座

詳細を読む »
jQuery & JS
winmonaye

ライトボックスで写真ギャラリーを表示させる

最近では、すっかり定番となってしまったライトボックスですが、ライトボックスのコピーキャットがオリジナルを越える機能を搭載して、どんどん出てきている。 ライトボックスクローンの比較表が作成される程、その数は日に増しているので、クオリティの高いの数個使いこなし、是非次のプロジェクトに合わせて、一つ取り入れたいものだ。 そこで、今回は、FANCYBOXというすばらしいライトボックスクローンの設置方法を紹介しよう。 1. 必要なファイルをダウンロード なにはともあれ、必要なファイルをダウンロードしましょう。 うれしいことに、FancyBoxをダウンロードしますと、必要なファイルがすべて入ってます。早速FancyBoxのウェブサイトに行って、右側のダウンロードリンクを押してください。 FancyBox http://fancybox.net 2. 必要なファイルをページにリンクさせる 自分はファイルの配置を以下のようにしましたが、自分のウェブサイト合わせた配置でかまいません。 私と同じファイルの配置であれば、index.phpは以下の様にしてください。ファイルの配置を変えた場合は、自分のフィアルの配置に合わせて、リンクのパス(道)は変更してください。 3.一個のイメージだけをライトボックスで表示 最初に画像ファイルへのリンクを作り、a tag に class 若しくは id を指定する。 そして、以下の様にしてその a tag を fancybox で表示する様に指定するコードをhead内に入れる。 もっと写真のでかたなどをコントロールしたい場合は、オプションを指定してください。 4.アルバムのイメージをライトボックスで表示 アルバムなど複数のイメージを表示させる場合でも、やり方はさっき程と同じです。唯一違うのは、a tag の中に rel=”” 内にアルバム名を指定するだけです。 複数のアルバムがある場合でも、アルバム名を変えるだけになります。 もし、アルバムのサムネイルを一個しか表示しない場合は、以下のようにしてください。 5.インラインコンテンツをライトボックスで表示 インラインコンテンツとは、同じフィアル内にあるコンテンツのことです。同じファイル内にコンテンツを作り、divなどの中にいれて、display:none を指定して、ページが表示されても見えないようにします。fancybox でリンク先をそのdivに指定しますと、fancyboxが勝手にdisplayを変更し、ライトボックスの中に表示してくれます。 これは、とっても簡単にできるにも関わらず、いろいろな所で使えるので便利です。User Experienceの向上に欠かせないものです。たとえば、ちょっとした規約などの表示を別のページに飛ばすのではなく、ライトボックス内に表示。他にも、用語の意味を表示したり、ビデオを表示したりできます。 6.ajaxコンテンツ をライトボックスで表示させる Ajaxでコンテンツを表示させるのも、リンクの先を別のページに変えるだけで、基本的にはさっき程のインラインと変わりありません。 7.iFrameで別のサイトコンテンツ をライトボックスで表示させる iframeなどは、よく別サイトを自分サイト内に表示させる場合などに使います。iframeの場合は、リンク先URLのあとに?iframeを入れるだけです。 http://example.com?iframe 是非、あなたの今のサイトに導入してみてください。

詳細を読む »