Retinaディスプレイ対応のレスポンシブなメニュー

この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナル記事へのリンク 3つのレイアウトで様々なブラウザ画面サイズに対応する、レスポンシブでタッチフレンドリーなRetinaディスプレイ対応のメニュー作成方法 今日は、ボーダーランズ(Borderlands)ゲームの武器メーカーMaliwanが打ち出す様々な色からインスピレーションを得た、多彩なRetina対応のレスポンシブなメニューを作成していきます。このメニューはブラウザのウィンドウサイズに合わせ、自動で次の3つの異なるレイアウトのうちの1つに変化します。「デスクトップ」向けの横1列表示バージョン、タブレット向けに最適化された縦2列表示バージョン、そして最後は、ナビゲーションを表示/非表示するためのメニューボタンを備える、より小さな画面のモバイル向けのバージョンです。 メニューを完全Retina対応とするため、アイコンフォントを使います。アイコンフォントを使うと、リサイズ時にメニューのアイコンの品質が低下する(ボケて滲んで見えたりする)ことがなくなります。 個々のCSSプロパティをサポートするブラウザ上でのみ実現される効果もありますので、ご注意ください。 アイコンフォントを準備する 独自のアイコンフォントを作るというと少々面倒な感じがするかもしれませんが、IcoMoonなどのツールを使えば、要はアイコンを作ってそのツールにインポートするだけです。アイコンフォントは他のあらゆるフォントと同様に機能するため、色の変更やサイズの指定が簡単にでき、品質が低下することもありません。異なる画面の解像度に合わせてアイコンを用意する必要がなくなり、Retina対応デバイスに最適です。 まず最初に、メニュー用のアイコンを作る必要があります。私はイラストレータを使いますが、例えばInkscapeなどのベクタグラフィックスエディタであればどれでも構いません。アイコンをそれぞれ作成したら、それら一つ一つをSVGファイルに書き出します。アイコンをあらゆるブラウザで適切に機能させるためには、各アイコンごとに、すべてのラインを完全にオブジェクトに変換し、それらのオブジェクトをすべて統合して1つの大きな形にする必要があります。すべてをSVGファイルに書き出したら、それらのファイルをIcoMoonアプリケーションツールにインポートします。 IcoMoonから提供されている膨大なライブラリのアイコンを使って、作成したフォントの見栄えをさらに良くすることもできます。必要なすべてのアイコンが揃ったら、ページ下の「Font」ボタンをクリックし、詳細設定のページに移ります。このページでは、エンコーディングの設定を選ぶことができるほか、各アイコンに文字を付けるかどうかの選択や、Private Use Area(画面を見た第三者によるアイコンのアウトプットを禁止する)を使用するかどうかの選択ができます。私個人としては、デフォルト設定での使用をお勧めします。それで十分機能するからです。 「Download」をクリックすると、4つのフォーマット(SVG、EOT、TTF、WOFF)のファイルがまとめられたZipファイル1つと、CSSファイル、デモページが生成されます。 アイコンを使えるようにするため最初にしなくてはいけないのは、IcoMoonから提供されたCSSをコピーして、自分のCSSファイルのトップにコピーすることです。また、フォントフォルダをコピーするのも忘れないようにしましょう。「a little “hack” to make fonts look nicer on Chrome Windows」も併せて読まれることをお勧めします。 メニューのHTML 今回のナビゲーションのHTML記述は以下のような感じです。 アイコンフォントを使うため、「icon-iconname」クラスをi要素(span要素でも同様に機能します)の中で用います。また、no-jsクラスをbodyに追加していますが、Modernizrを使った場合にはこれはjsとなりますので注意してください。これは、ユーザがJavaScriptを無効にしていた場合にメニューを開いたままにしておくためのものです。 CSSとJAVASCRIPT ここでは、CSS3プロパティにベンダープレフィックスを付けませんが、ファイルの中にはベンダープレフィックスが付いたものがあることに注意してください。 すべての画面サイズに適用されるグローバルCSSは次のようになります。 最初に、ナビゲーション全体に対してちょっとしたトランジション効果を追加してみます。ホバーされているものを除き、その他のすべてのアイテムの不透明度を下げるというものです。 次に、すべてのアイテムに対してちょっと素敵な感じの背景色を追加してみたいと思います。以下の記述では、リストアイテムを選択するのにnth-childを使っています。これで、好きなだけリストアイテムを追加でき、色指定のコードも追加した分だけ繰り返し実行されます。 Media QueryのMin-width属性を使うことで、800px(50em:bodyのフォントサイズが15pxで)よりも大きい画面を対象として、リストを横一列のナビゲーションに変化させることが可能になります。 継続してnth-childの選択テクニックを使い、メニューアイテム毎に異なる色を持つ4pxのボーダーを追加します。このテクニックを:hover疑似クラスに適用するだけでなく、タッチデバイスやキーボード・アクセスにも対応できるよう:focusと:active疑似クラスにも適用します。 次に、アイコンとテキストを配置します。 ホバー時にアイテムの高さをアニメーションで変更するよう設定します。 次にアイコンの配置位置を指定し、かつアニメーションによる高さの変更にも対応できるようにします。 視覚的な効果をつけるためにボックスの影をアニメーションで表示し、その影のサイズを0.8emから0に変更、また色も透明からより不透明度の高い色へと変更します。ここで最初のmedia-queryを閉じます。 ここで2つ目のmedia queryを使って、800px~980pxのサイズの画面向けに若干調整を施します。 これで「デスクトップ」バージョンの設定が終わり(1024px以上の画面を持つタブレットが続々と出てくる今日、その辺について大きな疑問をお抱えだとは思いますが)、800pxより小さい画面(ここでは49.938emに相当)用に、media query のmax-width属性を使って「グローバル」CSSの処理をします。 520px(32.5em)~799px(49.938em)のサイズの画面には、2桁3行のレイアウトのメニューを表示するようにします。ユーザーが各アイテムを容易に「タップ」できるようにパディングを追加し、また、アイコンを左側、テキストを右側に表示させるようにします。 大きな画面用のアニメーションを小さい画面にフィットさせるのはかなり厄介なため、より簡単かつ慎重なやり方でボーダーをシンプルに表示させることにします。ここでmedia queryを閉じます。 ここで再度、より小さな画面用にフォントサイズと幅を指定します。 非常に小さな画面についてはナビゲーションを非表示にしておき、ユーザがクリックするとナビゲーションを表示する「メニュー」ボタンを表示させるようにします。JavaScriptのコードでこれを実現します。 HTMLをすっきりさせるために「メニュー」ボタンを作り、JavaScriptを使ってDOMツリー内に挿入するという方法を取りました。changeClassファンクションにより、ユーザがボタンをクリックした際クラスがactive/クラスなしの間で切り替わります。 小さい画面向けバージョンのために必要なものがすべて揃ましたので、以降CSSでスタイルを指定していきます。以下は、メニューボタンのスタイルを指定する記述です。 デフォルトでメニューボタンは非表示になっています。サイズが519px (32.438em)以下の画面向けには、このボタンを表示させることにします。 ボタンがクリックされると、ナビゲーションの高さをアニメーションで変更するように指定します。ナビゲーションを閉じるときのためには高さを0em、開くときのためには最大の高さとして30emを指定します。JavaScriptが有効になっていない場合には、ボタンが表示されないため、no-jsクラスを使って常にナビゲーションを表示させるようにします。 JavaScriptが有効になっている際には、デフォルトでメニューを非表示にしておき、ユーザがボタンをクリックすると(activeクラスを取得し)表示されるようにします。 より小さなサイズの画面には、アイコンを左側、テキストを右側に持つアイテムから成る縦1列のリスト形式でナビゲーションを表示させるようにします。 素敵な色付きの8pxのボーダーも各アイテムの左側に追加します。 デスクトップ上で小さな画面用のバージョンをテストした場合にはナビゲーションは美しく表示されますが、モバイルデバイス上だとアイテムをタップするのが難しいかもしれません。Modernizrを使えば、デバイスのタッチ機能の検出が可能です。デバイスにタッチ機能があれば、touchクラスがbodyに追加されます。このクラスを使うことで、ナビゲーションアイテムを少し拡大させることができ、ユーザがより簡単にタップできるようになるため、タッチデバイス上での体験レベルが向上します。ここで最後のmedia queryを閉じます。 これでデスクトップ/タブレット/モバイルデバイス上で快適に機能するタッチフレンドリーなRetina対応のナビゲーションの完成です。皆さんに気に入っていただけると嬉しいです!

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: サムネイルがランダムに回転 以上で完成です!今回のチュートリアル、お楽しみいただけましたか?是非活用してみてくださいね。

CSS3とHTML5をフルに活用したコンタクトフォーム

今回のチュートリアルでは画像を使用せず、HTML5とCSS3だけでコンタクトフォームを作成する方法をご紹介していきたいと思います。その前に少々免責事項ですが、HTML5とCSS3はまだドラフト状態ですので、このチュートリアルの目的はあくまで「HTML5やCSS3を使うとこういうことが出来ますよ。」と一例をお見せすることに過ぎません。古いブラウザとの互換性の問題もありますし、もし本番でこの方法を使用する場合はご自身の責任でお願い致します。 さて、今回作成するのはシンプルなコンタクトフォームです。名前、メールアドレス、URL、件名、本文と言った基本的な情報をカバーしています。 そして文中のコードではベンダープリフィックスを省略していますが、デモページのソースコードは勿論ベンダープリフィックス入りなのでそちらでご確認いただけます。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTML5の新フォーム要素 HTML5の仕様では、フォームの機能をさらに強化するような要素が沢山紹介されています。その中から今回のフォームで使用する要素をご紹介しますね。 Input type = emailこちらは、ユーザーにEmailアドレスを入力してもらいたい時に使用します。HTML5をサポートしているブラウザなら、入力されたものがきちんとメールアドレスなのかどうか検出することが出来ます。 Input type = urlユーザーが正確に有効なURLを入力したかどうか確認する為に使用します。 Autocomplete = on attributeこちらはフォームや単一入力(single input)で使用することが可能で、「autocomplete = “on”」の場合にはユーザーがそれまでフォームへ入力した履歴を参照することが出来ます。 Require = requiredこちらは入力必須項目に設定します。HTML5をサポートしているブラウザならば、ユーザーが全ての入力必須項目に記入するまではフォームを送信することが出来ないようにすることが出来ます。デフォルト設定では入力必須項目は事前に明示されていないので、Webデザイナーは視覚的な表示を追加する方がいいと思います。 Placeholderこれは入力のヒントです。マウスで選択されていない状態の時は、この項目にどのような内容を入力したらいいのかサンプルを表示させることが出来ます。ユーザーがフィールドをクリックするとサンプルは消え、何も入力しないまま別のフィールドに移動すると再びサンプルが表示されます。 これで新しい要素への予備知識もバッチリだと思いますので、HTMLコードに移りましょう。 IDやクラスはそんなに使われていませんね。HTMLコードを出来るだけ減らして、その代わりにCSS3でフォームをスタイリングすることを目指しているからです。それと、HTML5のDOCTYPEを使用するのも忘れないようにしてくださいね! ストライプ背景の作成 それではまずレイアウトからですが、フォームの背景を先に設定しましょう。ストライプのボーダーを作成するには「#content」だけスタイリングすれば大丈夫です。アイデアは極めてシンプルで、CSS3グラデーションを使ってこの要素全体にストライプの背景を設定しています。 グラデーション部分はこのようにコーディングしています。 background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); これを文章で表現すると、こんな感じになります。 線状のグラデーションを45度の角度で作成し、1つ目のストライプはピンクで、0から30pxまでです。それから30から40pxまではグレーを加えます。その次のブルーは40から70pxまでです。70から80pxまで再びグレーを加えてお終いです。これを何度も繰り返します。これを実現するには、45度のストライプのグラデーションを、30px幅のピンクライン、10px幅のグレーライン、40px幅のブルーライン、10px幅のグレーラインで作成していると言うことです。 これでグラデーション背景は完成しました。けれど元々はボーダーを作る予定だったんですよね。このグラデーション背景をボーダーに変えてしまうには、背景の上に新しいコンテナを乗せてしまえばいいだけです。あんまり不要なSPANタグやIDタグは追加したくないので疑似要素の「class :after」を使いましょう。 ボーダー幅はこのafter要素のマージンで設定しています。フォームのコンテンツがきちんと内側に収まるように、「#content」の方に充分なパディングを設定するのを忘れないようにしましょうね。 H1タグとテキストのスタイリング H1タグにはQuestrialフォント、ボディ部分にはDroid Sansフォントを適用しています。アンパサンド(&)はAliceフォントです。これらの書体はGoogleのフォントディレクトリのフォントなので、ヘッダーに以下のようにGoogle font apiコードを加えるだけです。 以下のようにボディ部分にはDroid Sansフォント、H1タグにはQuestrialフォントを使用しています。H1タグのデコレーションにはまた疑似要素の「:before」と「:after」を使っています。 画像は使わずアイコンの追加 「画像使わないって言ってたのに、アイコン追加してるじゃない。」って思いました?このアイコンどうやって追加したと思いますか?答えは簡単で、アイコンフォントを使用しています。このコンセプトをご存じない方の為に簡単に説明すると、アイコンでアルファベットの各文字をマッピングし、それらのアイコンを使ってフォントを成形しています。Chris Coyerさんが興味深いアーティクルをお書きになっているので、参照してみてくださいね。 今回のデモではP.J. Onoriさんのiconicと言うアイコンフォントを使用しています。 コード自体はこのようになります。ここでも疑似要素の「:before」を使っているので、大分見慣れてきましたか? 最初に全てのアイコンにiconicフォントを適用させて、それからアイコンと関連のある文字を使用しています。何故疑似要素のbeforeを使用しているかと言うと、これは純粋な非セマンティックなスタイリングなので、文字はHTMLコードに非セマンティックを追加しないからです。 ラベルで本物のテキスト文字を使用しているので、アイコンフォントを使用することが出来ます。基本的にはアイコンフォントは見た目重視で使われるだけであって、ユーザビリティには何も影響を及ぼしません。アイコンフォントがロードされていなくても、フォームはきちんと表示されます。 フィールド設定「:not()」の威力 最初にお話した通り、出来るだけHTMLのコーディングは少なくしようと思っています。なのでIDタグも出来るだけ使用しません。入力部分をフォーマットするにはinput[type= text, email …]等を使って1つずつトリガーを立てることも出来ますが、CSS3ならばもっと簡単な解決方法があります。それが「:not()」です。サブミットボタン以外は全部同じように表示させたいので、「input:not([type=”submit”])」を設定します。 コードはこんな感じになります。コメントもふってあるので分かり易いかと思います。 ここで強調したいことをまとめますね。 「outline:none」を使って、ブラウザのフォーカススタイルを無効化しています。そして独自のフォーカス/アクティブスタイルを追加しています。 フィールドがアクティブになった時に、CSS3トランジッションを使って幾つか効果を加えています。コンマで区切れば、別の要素の別のトランジッションを別のタイミングで実行することが出来る事も覚えておいてくださいね。 placeholderをスタイリングするにはベンダープリフィックスを使う必要があります。バグなのかどうかはよく分かりませんが、テキストエリアでは「webkit-input-placeholder」でもうまく行きます。けれどMozillaの場合はテキストエリアに特定のものを使用する必要があります。 入力必須項目をスタイリングするのに赤い星を使っているので、このデフォルトのイケてない赤光りは削除してしまいましょう。 送信ボタンのスタイリング 送信ボタンでは「input type=submit」を使用します。そしてここでは「:before」や「:after」と言った疑似要素は使用出来ません。その為HTMLコードの中で直接特殊文字を使用しています。非セマンティックな方法で解決させるのはあんまり気持ちの良いものでもないので、気に入らなければ削除してしまってください。 ボタンのスタイリングにはまたグラデーションやボックスシャドウを使っています。コーディングに関してはまた後程説明しますね。 ボタンにはほんのり薄いグラデーションをかけています。1pxの白のインセットボックスシャドウを上部に、そして1pxのグレーのボーダー。それから5pxのグレーのボーダー。「え?2種類のCSSボーダーなんて無理でしょ?」と言う声が聞こえて来そうですが、ここでボックスシャドウトリックの登場です!コンマを使えば、いくらでもボックスシャドウの設定をすることが出来るんですよ。 ここでのトリックは「プロパティはコンマ区切りされたシャドウのリストです。それぞれのシャドウは2-4の長さの値で定義されます。」と言う一文の中にあります。ボックスシャドウに長さを設定することが可能で、それが丁度「0 0 0px 5px #E0E0E0」の部分に当たります。x軸とy軸のオフセットは0で、カラーはグレー、シャドウ幅は5pxとして、2つ目のフェイクボーダーを作成しています。 ラベルの設定(トランジッション付き) 最後にユーザーがラベルをマウスオンした時に、色が変わるようなトランジッションを加えておきましょう。 ここで強調したいのは「label:hover:before」と言う感じで、疑似要素を沢山追加出来るんですよ!と言う事です。今の所疑似要素に設定したトランジッションはFirefox上しかうまく動作しませんので、chromeではアイコンの色はトランジッション無しで変化します。これがまたアイコンフォントの良いところでもあって、スプライトなども使わず簡単に色を変化させる事が出来ます。 ここまで来たら完成です。フォームでちょっと遊んでみてください。ホバー効果を確認してみたり、HTML5の新しい要素の威力を実感出来るのではないかと思いますよ。入力必須項目に何も入れず送信ボタンを押したり、無効なメールアドレスを入力して送信ボタンを押すとどんな風になるか試してみてください。折角ならFirefoxかchromeの最新版で試してみるのがいいと思いますよ。 最後に・・・ 今回のチュートリアルが、HTML5やCSS3の可能性を理解するお手伝いになれば幸いです。最後にもう一度声を大にして申し上げておきますが、これはあくまでも効果を実感する為のデモなのでよっぽど自信があってしっかりしたフォールバックがある場合はまた別ですけれども、まだ実践では使わないでおいた方がいいと思いますよ。 互換性を向上させる為には、例えばmodernizrを使用してブラウザの機能を検出したり、役に立つHTML5のpolyfillsを見付けたりすることが出来るかと思います。 今度はあなたの番ですよ。CSS3をプロジェクトの中でどのように活用していきますか?HTML5ならいかがでしょうか。コメントどしどしお待ちしています!

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 […]

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コンパイラーでエラーが発生したとよく聞きますが、私自身はまだそういうことはありませんね。 […]

CSS3 イメージスライドパネルショー

今回はCSSのみを使用して、かなりイイ感じのスライディング・イメージ・パネルの作成方法をご紹介したいと思います。これはパネルに背景画像をセットして、ラベルをクリックすればアニメーション化されるというものです。ラベルにはラジオボタンを使用し、ターゲットはそれそれのパネル部分とし間接セレクタ(general sibling selector)を使っていきます。 今回使用する美しいな画像はJoanna Kustraさんによるもので、Attribution-NonCommercial 3.0 Unported Creative Commons Licenseの元に帰属しています。 同じ様なテクニックを使って、画像をホバーするとスクリーンがかかる効果をFilter Functionality with CSS3でご紹介しておりますので、こちらも併せてご覧くださいね。 ※CSS transitionとアニメーションをサポートしているブラウザでのみ正常に動作します。お気を付け下さいね。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ HTMLは大分すると「ラジオボタンとラベル」「パネル用コンテナと各画像のスライス」「タイトル」という3つのパートから成り立っています。「cr-bgimg」クラスを割り当てたコンテナは各パネルを含有しています。更に各パネルは4枚にスライスされており、各スライスは正しい場所に配置されるようにSPANタグで囲まれています。すなわち1つ目のパネルは4枚のスライスから成り、1つ目のスライスは背景画像として最も左側に配置されます。2つ目のパネルも勿論4枚のスライスから成りますが、背景画像の配置場所は「次」の部分へと移行されます。 タイトル用のH3要素には2つのSPANタグがあり、1つはメインヘッドライン用でもう1つはサブヘッドライン用です。 それではCSSスタイリングに移りましょう! CSSスタイリング ベンダープリフィックスは省略しています。ご了承ください。 私たちの目的は、第1にラベルでカバーしてラジオボタンを隠すことです。WEBブラウザ上でラベルをクリックすれば、それぞれのチェックボックスかラジオボタンが選択された状態になります。なので、インプットにIDを与えればラベルの「for = 参照ID」属性を使って、それぞれのインプットを参照することが可能となります。 次に全ての背景画像を適切な部分に配置すること。第3にラベルがクリックされたら、それぞれのスライス画像とタイトルがきちんと表示されるようにすることです。 それでは、まずは最も外側のコンテナのスタイリングです。白いボーダー線を引いて、ボックスシャドウでほんのり影もつけましょう。 きちんと目的のスライス画像とタイトルに辿りつくように間接セレクタ(general sibling selector)を使用したいので、ここでまずラベルを適切に配置しておく必要があります。z-indexを使ってレイヤーが最上部に来るようにし、トップマージンを350px確保して下の方に配置します。 ラベルに小さな円を加えて、ちょっとかわいくデコりましょう。疑似要素を使って丁度テキストの背後に来るように配置します。 パネル間にもちょっと細工を施してみましょう。ラベル用に別の疑似要素を用意して、パネル状に縦線を描きます。グラデーションを使っているので上の方に行くにつれ線が薄く消えていくよう見えるはずです。 最後のパネルに縦線は不要なので、幅を0pxにしています。 ラベルの設定が完了したので、安心してインプットを隠してしまいましょう。 これでラベルをクリックすれば、対応するインプットがチェックされた状態になります。では今度はラベルに間接セレクタ(general sibling selector)を使用して細工していきましょう。下記のようにコーディングすると、選択されたラベルの色を変更することができます。 それから円部分の疑似要素の背景色とボックスシャドウも変更します。 画像パネルのコンテナはabsoluteで絶対配置し、幅はいっぱいいっぱいに使います。このコンテナは「現在選択されている画像」に背景画像を設定する為、後程使用します。これはデフォルトとして何らかの画像が表示された状態を維持する為です。なので幾つかの背景プロパティを追加しておきましょう。 表示用の画像(パネル)は4枚に分割しているので、1つのパネルの幅は150pxです。(600÷4)。パネルはフロートで左に配置し、スライドインして来る時に余計な部分まで表示したくないのでオーバーフロー分はhiddenで隠します。 SPANタグで囲まれた各スライスはabsoluteで絶対配置し、左側-185pxに配置することにより最初は隠された状態であるようにします。 それから次に画像コンテナの背景と、それぞれの画像スライスの設定です。 ここで背景ポジションはパネルによって配置場所が異なるので、間違わないように気をつけながら設定します。 ラベルがクリックされたら、全てのスライス全てが右側へとスライドアウトするように設定します。 選択された背景画像は-150pxから0pxへとスライドインしてきます。 最後にH3のタイトル要素とSPANタグのスタイリングを行います。H3には透過度のトランジッションを適用させ、対応するラベル(インプット)が選択されたら透過度が0から1へと増加するよう設定します。 もしモバイルデバイスではラベルのトリックを使用したくなかったら、メディアクエリーを使って以下のように設定します。 これはとてもシンプルな解決方法なので、必要あらばif the label trick is supportedもチェックしてみてください。 これで完成です!他にも色々実現可能な効果があるかと思います。幾つかデモをご用意しましたので、そちらも併せてご覧くださいね。 DEMO Demo 1: Slide to right(右側へスライド) Demo 2: Odd/even slide to left/right(奇数と偶数でそれぞれ右側と左側へ) Demo 3: Odd/even slide up/down(奇数と偶数で上と下へ) Demo 4: Scale up/down(縮小拡大) 今回はここまでです。みなさんのご参考になれば幸いです。

CSS3 3Dギャラリー

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

CSS3を使ってイントロアニメーションを作る

CSS3は様々な可能性への扉を開いてくれました。今日はCSS3アニメーションを使い、スプラッシュとComing Soon(準備中)ページ効果の作り方をご紹介したいと思います。まるでシンプルな要素に命を吹き込んだかのように自由に動かす方法と、アニメーションシーケンスを実現していますのでお楽しみに。 1つ目のデモで使用しているかわいらしい靴の画像は、これまたかわいらしいAmira Almajidさんによるもので、画像のセットはこちらからご利用いただけます。 ※尚、アニメーションをサポートしているブラウザでのみ動作しますので、ご注意くださいね。 チュートリアルがあんまりにも長くなり過ぎないように、ベンダープレフィックスは省略していますので、こちらも併せてご了承くださいね。それでは早速参りましょうか! この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 Demo 1 こちらのデモでは画像読込みの時間を確保する為に、アニメーション開始までにかなりのゆとりを持たせています。 1つ目のデモではアニメーション化させる要素が幾つかあります。今回のテーマは「Coming Soon(準備中)」です。 まずコンテンツ部分にメインとなるコンテナ(クラス:sp-container)を用意し、その中にサムネイル用の束をそれぞれ記述しています。それからメインのヘッドライン用の束も用意します。メインコンテンツエリアが表示された後に、E-mailアドレス入力枠をスライドインさせています。 HTMLマークアップ では、次はCSSのスタイリングを見てみましょう! CSSスタイリング 1つ目のデモの主な目的は、以下のようなアニメーションの連続を実現させることです。 fromBackを使ってサムネイル出現 fromBackを使って1つ目のH1タグの出現 fromBackを使ってサブヘッドラインのH2タグ出現 fadeOutを使って1つ目のH1タグとサブのH2タグの消滅 fadeOutを使ってサムネイルが順番に消え始め、fadeInColorで2つ目のH1タグを表示それからsizeDownMoveを使ってコンテンツを左に移動と縮小 slideInを使って矢印とサイドコンテンツをスライド それではメインのコンテナをセンタリングして、コンテンツはabsoluteで絶対配置しましょう。 ご覧いただいて分かるように、6秒後にコンテンツへ「動き」と「拡大」のアニメーションを適用させています。この辺のアニメーションはまた後で見ていくことにします。 矢印用のsp-arrowクラスには矢印を背景画像として設定し、absoluteで絶対配置しています。 サイドコンテンツのsp-sideクラスにはE-mailアドレス入力枠が含まれており、画面右側に配置されるよう設定します。 この矢印とサイドコンテンツはいずれもしばらく経ってからスライドインしてきます。 では次にヘッドラインのスタイリングに移りましょう。 それから入力枠とボタン用のラッピング部分ですね。 ではここで、メインコンテンツの内部を見てみましょう。まずヘッドラインのスタイリングですが、こちらは背部から現れてきて、しばらくするとフェードアウトするように設定します。 2つ目のヘッドラインは、1つ目のヘッドラインが消えた後にただフェードインしてくるだけです。 サブヘッドラインは1つ目のH1タグ同様現れては消えるようにします。 お次はサムネイルを格納している束の設定です。 サムネイル用のSPANタグは、現れる時に0から1へと拡大させることにより背部から登場してきたように演出しています。こちらも暫くするとフェードアウトしていきます。 それから各サムネイルが順番に現れては消えるようなシーケンスを作成したいと思います。なので行ごとに、サムネイルを囲んでいる子要素(SPANタグ)1つ1つ順番に時間差設定を施していきます。各行は上の行から順に時計回りに表示されるようにしたいので、行の順番に注意して下さいね。 ここで少し疑似要素を使って、各サムネイルの背景に円が表示されるようにしてみましょう。 お待たせしました。ここからがアニメーション部分です。 1つ目のアニメーションは透過度を1から0に変化させることにより、該当要素をシンプルにフェードアウトさせています。 fadeInColorを使って該当要素をフェードインさせ、またRGBAで背景色の設定も行っています。けれどRGBAの透過度レベルは、要素そのものの透過度が0.5に達した時点でまだ0のままです。こうすることにより要素を先に表示させ、後から背景がフェードインしてくるように細工しています。2つめのヘッドラインにも同様の設定を施しています。 次のアニメーションも極めてシンプルで、該当要素を左側からスライドインしてくるように見せています。 sizeDownMoveは該当要素を縮小させ、左(100px)から左(0px)まで移動させています。ここでtranslateを使用することも出来るのですが、要素をabsoluteで絶対配置させているので左側でちょっと動かす程度にしておこうかと思います。 次のアニメーションは、サイズを0から1に拡大することにより要素が後方から現れて来るよう見せ、同時に透過度も0から1に変化させています。 これで1つ目のデモ用のスタイリングは完成です♪次はもっとシンプルなのでご安心くださいね。 Demo 2 今度は心にグサッとくるメッセージが連続して現れるスプラッシュページなんていかがでしょうか。今回のデモでは単純にボカシ効果を加えつつ、次から次へとメッセージが表示されるような効果を実現させています。 HTMLマークアップ 今回も先ほどと同じ様な感じでコンテナとコンテンツ用にDIVタグを用意し、更にその内部の各メッセージ部分にはframeというクラスを与えています。それに加えて一番最後に表示される地球とリンク用の要素も用意します。 では早速スタイル設定を見ていきましょうか。 CSSスタイリング ヘッドラインはそれぞれ画面上でセンタリングさせ、flurFadeInOutというアニメーションを使って現れたり消えたりさせています。 それぞれのメッセージに時差設定をします。 最後の1つはアニメーション化させてず、代わりに含有しているSPANタグを順番にアニメーション化させています。 地球は実は背景画像であり、abosoluteで絶対配置しています。他のアニメーションが全て完了した14秒後にフェードインさせます。表示画面いっぱいに広がるよう拡大させています。 「join us」リンクは円形の要素で、回転しながら現れてきます。 ここからはアニメーション設定です。 1つ目のアニメーションは、現れては消えるメッセージ用のアニメーションです。text-shadowとthe scaleを巧く使ってボカシ効果を演出しています。 次のアニメーションも大体同じなのですが、今度は最後のメッセージ用で消えずに残ったままにしています。 地球用のアニメーションでは、画面一杯まで拡大させているのと、透過度を始めは増やしてそれから減らしています。 次のアニメーションはリンク用です。回転しながら現れてくるというものですね。 Demo 3 3つ目のデモは商品やアプリを紹介する時に使えるようなアニメーションで、テキストメッセージが色んな動きを見せてくれます。 HTMLマークアップ またこちらも同じような感じでコンテナとコンテンツ用にDIVタグを用意し、更に右側用の要素と左側用の要素をそれぞれDIVタグでラッピングさせています。その狙いは右側と左側とできっちりと分けてテキストに動きを加えたいからです。 ではここからはスタイル設定です。 CSSスタイリング まず真ん中の縦線用の疑似要素を持たせたコンテンツエリアをアニメーション化させたいと思います。まるでそれが「開いて」そこからテキストが流れ出てきているかのように演出します。それから縦線の左側で連続してテキストが右からスライドインしてくるように見せます。同様に右側もで、こちらは左からスライドインさせます。sp-midクラスを適用させたSPANタグのフォントは少し大きめにしてあり、他のテキストが消え去った後でもその場に残るようにしています。2つの大き目フォントのテキストを上に移動させ、コンテンツエリア全体をギュッと詰め寄らせています。(高さを減らすことにより縦線自体も短く変化します。)最後にサインアップ用のボタンを出現させています。 コンテナ部分の幅と高さは固定します。コンテンツのラッピングはまずアニメーションのopenで出現させ、それからaqueezeを適用させることにより高さを減らしています。後者の方は他のテキストが全てフェードアウトしてから発生させる為、開始時間はかなり遅めの設定です。 真ん中の縦線は疑似要素を使って表示させています。 ヘッドライン用のラッピングではoverflowはhiddenにしてあります。こうすることによりスライドさせてもオーバーラップは見えないよう保障されます。 H2要素は内側にSPANタグを含有しており、以下のようなスタイル設定を行っています。 「sp-top」と「sp-bottom」は左からスライドしてきてから消滅します。そして「sp-mid」はフェードアウトする代わりに上に移動します。 右側でも同様の効果が現れるように設定します。ただこちら側は左から要素がスライドしてきます。 sp-midクラスを持った2つの要素が上に移動した直後に、ビックリマークがクエスチョンマークを上書きしたように見せる為、クエスチョンマークをフェードアウトさせてビックリマークを出現させています。 「sp-full」でラッピングされた最後に現れるテキストはフェードインさせて、サインアップリンクの方はズームインもさせています。 そしてここからはアニメーションです。 1つ目のアニメーションはコンテンツエリアを「開く」ことです。ただ単に高さを伸ばせば完成です。 スケーリング用のプロパティを使用していないので、squeezeアニメーションは実際は何もスクイーズしていません。この効果を適用させる時にコンテンツエリアにまだテキストが残っているのでスクイーズはさせず、ただ高さを減らすだけに留めています。 次の2つのアニメーションは要素をフェードイン、フェードアウトさせているだけです。 slideLeftとslideRightはtranslateを使用することにより反対側に要素を移動させています。 moveUpは要素を上に持ち上げています。 最後のアニメーションはscaleを0から1に変更することにより、要素をズームインさせています。 これで完成です!みなさんのお役にたてば幸いです。

イケテルオリジナルマウスオーバーCSS3アニメーション

CSS3の力は尋常では無く、本当にすごいことばかりです。今回のチュートリアルではそのCSS3の巨大な力を、非常にクリエイティブな方法で「いい意味で」悪用する方法をご紹介したいと思います。早速ですが、今回は何種類かのサムネイル・ホバー効果をCSS3のトランジッションを使って表現していきます。色んなスタイルを使用し、それぞれのサンプルでサムネイルをホバーすると、予期せぬ効果が現れるようなものを作っていきます。 ※CSS3のプロパティをサポートしているブラウザでのみ正常に機能しますのでご留意ください。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ HTMLマークアップの構造は非常にシンプルで直感的で、画像とその他全ての情報を囲い込むコンテナを作成しています。 viewクラスの中に、maskクラスを含んだ要素を含有しています。このmaskクラスはCSS3で実現させる効果を担うものであり、更にその中にタイトル(H2)や詳細、フルサイズ画像へのリンクといったコンテンツを含有しています。(幾つかのサンプルでは、詳細をDIVタグのcontentクラスで囲み、mask要素は別の要素として機能させています。) CSSスタイリング HTMLマークアップが済んだら、スタイリングに移りましょう。まずは一般的な設定をクラスに施し、それから目的に応じて個別に特別な設定をしていきたいと思います。CSS3のベンダープレフィックスは省略していますのでご注意くださいね。 それでは10個の個別設定を見ていきましょう! Demo 1 こちらの効果には、viewに加えてview-firstというスペシャルクラスも追加しています。今後もそれぞれのデモに、view-secondだとかview-thirdだとかスペシャルクラスを追加していきます。 こちらの1つ目のデモでは、いい感じのホバー効果を演出するために基本的なトランジッションを幾つか加えています。 ではここから効果の心臓部に入っていきます。今回のデモでは画像の上にマウスオーバーさせた時、delayプロパティを使って簡単なアニメーションをエミュレートさせています。このhover疑似クラスで使用しているtransition-delay(時間的変化開始の遅延)プロパティは、ノーマルクラスのものとは異なり変更が可能です。今回はノーマルクラスでは設定しておりませんが、hover疑似クラスには適用させています。こうすると、ほんの少しスタートを遅らせることが出来ます。マウスを画像から外すと、デフォルト値の「0」がすぐに適用されるため「元に戻る」のはあっという間です。 Demo 2 2つ目のデモではスペシャルクラスのview-secondを追加しています。そして今回はmaskクラスの中は空っぽのままにして、contentクラスでその他の要素を含有させています。 ここでのmaskクラスは、今回のスペシャル効果を実現させるために別の属性を持たせています。どういうことかと言うと、transformプロパティ(translate(移動)とrotate(回転))を適用させ枠外で正方形を作っています。そしてホバー時にスライドインしてくるように、タイトル等のコンテンツもtranslate(移動)を使ってこの時点では枠外に出してしまっています。 次に、ホバー時に各要素を従来の配置場所まで移動させる為に、ここでもtransformプロパティでtranslate(移動)を適用させています。mask部分にはrotate(回転)も加えていますね。コンテンツの各要素は少しずつ時間差でスライドインしてくるように、遅延も加えています。 Demo 3 3つ目のデモでは、transformプロパティのtranslate(移動)とrotate(回転)を使って、コンテンツを引っ張り込んでいます。 ここの部分はホバー時の簡単な説明です。transition-delay(遅延)プロパティを上手に使って、コンテンツの要素を今までとは反対の順番でスライドインさせています。 Demo 4 4つ目のデモでは、画像に回転を加えながらシンプルにズームイン、ズームアウトさせています。全てtransformプロパティのscale(拡大)のおかげです。画像に対してtransition-delay(遅延)を0.2秒で設定していますが、ホバー時は0秒です。こうすることにより、ホバー時にはすぐさま変化し、マウスアウト時には少しゆっくり変化し始めるようになります。 ここからは効果実現のためのコードです。CSS3を使えば何でも出来ちゃいますね。 Demo 5 5つ目のデモではtransition-timing-functionプロパティのease-in-outと一緒にtranslateプロパティを使って、コンテンツを左からスライドインさせています。 ホバーすると画像を右側に移動させ、コンテンツを左からスライドインさせて画像を押しのけているように見えるはずです。 Demo 6 6つ目のデモでは、コンテンツを前方に浮き出た状態から本来のサイズまでズームアウト(10から1へ縮小)させています。infoボタンはtranslateを使って下からスライドインさせています。 元に戻る時は、スムーズに見えるように遅延設定を調整します。 Demo 7 7つ目のデモでは、画像は中心に向かって回転縮小させ、コンテンツは上から順番に落ちてきます。 ホバー時には詳細の要素に遅延効果を加えており、こうすることによりまず画像が回転し、あとから画像のあった部分にコンテンツが降ってくるように見えます。元に戻る時はコンテンツはすぐに消滅し、画像が回転拡大しながら戻ってきます。 Demo 8 8つ目のデモではアニメーションを使って、バウンド効果を加えています。コンテンツが上から落ちてきてバウンドしているように見えます。 mask要素にアニメーションを加え、コンテンツが上から落ちてくるように調整しながら遅延の定義を加えます。 本当にバウンドしているように見せる為にtranslateYを使用し、幾つかフレームも設定します。 Demo 9 9つ目のデモでは、右下からと左上からスライドインさせる為2つのmask要素を使います。 2つのマスクの開始地点はそれぞれ別なので、1つは上に1つは下に個々に設定します。 コンテンツは2つのマスクが中央で接触したその線上から現れているかのようにスタイリングさせています。 ホバー時は2つのマスクは端と端がほんの少し重なり、コンテンツはその隙間から浮き出てきます。 マスク用のtransition-delay(遅延)は、ホバーした瞬間に移動開始するよう設定してあります。けれどマウスを外した時は、少し間を開けてから元の隙間に戻っていきます。 Demo 10 最後のデモでは画像はどんどん拡大してフェードアウトさせ、真ん中からコンテンツが湧きあがってくるように見せています。この効果はscale(拡大)と透過レベルを調整することにより実現します。 ホバー時はシンプルにscaleを使って画像を拡大し、opacity(透過度)を「0」にすることによりフェードアウトさせています。 終わりに・・・ CSS3は非常に素晴らしい可能性を秘めており、様々な効果を実現することが出来ます。もしかしたら、簡単な効果なら全てのブラウザでJavaScriptに頼らずCSS3で100%実現出来るようになる日も近いかもしれませんね。今回のアーティクルがみなさんの役に立ち、ご自身のプロジェクトに何かしらのインスピレーションを与えることが出来たなら幸いです。

ウェブ開発者に必要不可欠な35の技術

世の中では様々な用途の為にWebアプリケーションが用いられており、Webディベロッパーにとってはウハウハな今日この頃だと思います。Web開発業界にもモバイルデザインから携帯アプリに至るまで、フロントエンド開発やosCommerceやWordPressなどと言った特定のプラットホーム開発者など、幾つもののニッチ市場が存在します。 その中で最も急成長しているニッチャーの1つはもっとバックエンドワークを好み、Webサイト全体のアプリケーションを作成するのが得意な人たちです。本来ならば自分たちのアイデアを生かしゼロから目的に合ったサイトを構築するべきだと思いますが、多くのクライアントが既存のプラットフォームを用いて自社サイトを構築するようになってきています。ここがニッチャーWebディベロッパー達の狙い目でもあるわけです。 今回のアーティクルではWebディベロッパーがWebアプリケーションを作成する際に、そのアプリケーションがクライアント用であろうとも個人的なプロジェクトであろうとも知っておくべき技術やスキルをご紹介したいと思います。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 有益なサーバーサイド・スクリプト言語の一例 Web全体のアプリ開発者とフロントエンド開発者の決定的な違いは、サーバーサイド・スクリプト言語の知識の有無です。サーバーサイド言語とはサーバー上で実行される言語であり、より多くのプログラミング機能がありデータベースにアクセスし操作することも可能です。PHP、Perl、Ruby、ColdFusion、Java、ASPなどがその一例です。Webアプリケーション用の最も一般的で効率的な言語としては、PHP、Ruby、ASPが挙げられるでしょう。そしてこの中でASPは主に政府機関や大企業使用されています。個人で取り扱う場合にはPHPやRubyがベストな選択と言えるでしょう。そして何がいいって、この2つともオープンソースなんです。更に詳しい情報はWhich Server-Side Language Is Right For You?のサイトを参考にしてみてください。 Image credit: laughingsquid Webディベロッパーになりたての頃は、割と多くの人が本来必要でもない複数の言語を習得しようとします。けれどこれは間違いです。最初の頃こそは自分に合う言語はどれなのか幾つか試してみるのは良いと思いますが、更に度を越して幾つもの言語を習得しようとするのは単なる時間の無駄に過ぎません。1つ選んだらそれに拘って、その言語をより深く学ぶことに焦点を当てるべきです。ベストプラクティス(最優良の事例)や構文を学び、スニペットやスクリプトを収集し、人気の高いフレームワークを試してみる事です。(CakePHP for PHP、Ruby on Rails for Ruby、ASP.NET for ASPなどが良い例です。) オブジェクト指向プログラミングとコーディングアーキテクチャ 極めたいサーバーサイド言語を決めたら、その次に基本構文を学ぶことは非常に大切です。しかしプログラマーとしての本当の才能は、きちんとした正しいコーディングが出来るか否かです。コードを再利用する為にも、いかなる言語の場合でも常にオブジェクト指向のプラクティスを使用し、きちんと順番にファイルとコードを管理する様に心がけてください。OOP(オブジェクト指向プログラミング)の背後にあるロジックを説明するようなリソースは、オンライン上でもどこでも無限に存在します。また特定言語を習得する為のチュートリアルも無限に存在します。初めは全く分からなくてめげてしまうかもしれませんが、そんなに難しいことは書いてありません。とにかく通しでチュートリアルをよく読み、沢山練習することです。それがOOPを理解し習得するのに最善で最短の方法です。 Image credit: ppix またプログラミングのアーキテクチャについてもよく学んでください。そうすることにより、コードの一貫性と効率性を維持出来るようになります。コーディングアーキテクチャの一例で、MVC architecture (Model-View-Controller)があります。これは最も一般的でありサポートも充実しています。コードをよくオーガナイズする方法を知っておけば、更新も容易になり、効率的に実行することも可能となります。また、全てのコードにおいて論理的な順序であることは必要不可欠ですが、Webアプリの規模が大きくなればなる程更に重要視するべきです。 データベースデザインの知識 ほぼどんなWebアプリケーションにとっても、データベースは必須であると言えます。そしてもしデータベースを実際使用するならば、構造化する方法も知っておくべきだと思います。新しいプログラミング言語やコーディングの方法論を学ぶのと同様に、優れたデータベースデザインを使用するのにも熟練が必要です。フレッシュなWebディベロッパーはデータベースのデザインなど、アプリケーションの種類に合わせて変幻自在だとお思いになるかもしれません。しかしプログラミング言語やWebアプリケーションのアーキテクチャ自体と同様に、データベースデザインにもルールやコンセプト、ベストプラクティスなどが存在するのです。 Image credit: keepingitfake リレーショナルデータベース設計用のリソースを参照し、素晴らしいデータベース構造を駆動する中核となるコンセプトをしっかりと理解してください。適切に設計されていないデータベースだと、コードがきちんと関連付けられないだけではなく、実際に情報量が増えてきたときにエラーが発生したりWebアプリケーションの動作自体が遅くなったりします。 ここで最初の一歩となるようなリソースを幾つかご紹介しますね。 The Basics of Good Database Design in Web Development Ten Common Database Design Mistakes Relational Database Design AJAXを賢く使う AJAXが浸透し始めて久しいですが、今日ではその機能の良さや流行の波により持てはやされているのではなく、もっと背後にある実用的な目的のために利用されるようになって来ました。AJAXはサーバサイド・スクリプト言語をアシストとして、JavaScriptとサーバーの対話を可能にしました。JavaScriptの内側からサーバーサイド・スクリプトを読込み応答を待ち、ページの更新やリフレッシュすることなくデータベースとの交信を可能とします。 net tuts+ もし今までページを再読込みすることなくログインや登録、プロファイルの更新、データベースからの情報取得やもろもろ出来たという経験がおありなら、それはAJAXのおかげです。AJAXはサーバリソースを節約し、携帯電話のWebサイトでは巨大な利点を持ちますが、それだけではなくユーザーエクスペリエンスをも向上させます。AJAXを利用することにより明らかにベネフィットは増えますが、Webアプリケーションが大きくなればなるほど、その恩恵も大きくなると言えるでしょう。 AJAXに関するリソースを幾つかまとめてみましたので、よろしければどうぞ。 W3Schools AJAX Tutorial Tizag AJAX Tutorial NetTuts+ JavaScript and AJAX サードパーティサービスとの統合 今日のほぼ全てのWebアプリケーションは、FacebookやTwitter、Google、PayPal、Amazonなどのサービスと何らかのつながりがあるのではないでしょうか。これは人気のソーシャルネットワークを経由してサインインし、他のWebアプリケーションのサービスを利用したりとか、個別にそれぞれ自分の情報をセットアップすることなく簡単に他のアクションを実行することを可能としています。 LiVEJOURNAL 上記のような有名なものの他にも、ほぼ全てのWebサービスでAPIが使われています。構文や使用目的に若干の違いはあるかもしれませんが、大きく見れば似たようなプラクティスを使用しています。ディベロッパーならばAPIの使い方を全般的に知っているべきですし、同様にSOAPのコンセプトも知っているべきです。SOAPのコンセプトとはWebサービスを操作する為の、一般的普遍的な方法のことです。非常によく出来たスターターガイドとチュートリアルがあるので、ご紹介しますね。Understanding Web Services Specifications モバイルバージョンの開発 どのようなデバイス上で閲覧されているかという見地から、Webアプリケーションの汎用性の高さは今まで以上に重要視されてきています。全てのアプリケーションにはモバイルバージョンやタブレットバージョンがあるべきですし、様々なスクリーンサイズにも対応可能であるべきです。もし有料アプリなら尚更のことです。これは全てアクセシビリティとユーザーの満足度を高めることにつながってきます。モバイルデバイス上で使い難いなぁと言うイメージを植えつけてしまうと、Webアプリのブランド自体を傷つけることになってしまいます。 Alsa Creations モバイルでのWebアプリの作り方を研究するか、必要あらば誰か他の人を雇用することも頭に入れておいたほうがいいと思いますよ。 よいビジネス、UIデザイン、戦略の基本 もし独自のアプリを作りたいのなら、アプリケーションの作成方法以上のことを知っている必要があります。けれどどのように向上させたら良いのでしょうか。ビジネス戦略をきちんと持ち、Webアプリの設計とレイアウトが出来、Webアプリのマーケティング方法を知っていること、これら全てが繋がってきます。昨今の過飽和市場においてこのようなノウハウを持つことは、プラスの要素というレベルではなくむしろ必須事項です。もし最速で最も効率の良い、素晴らしいコードで書かれたアプリをマーケットに発表したとしたら、あんまり関係のないことかもしれませんが、もしアイデアも稚拙でデザインも乏しくビジネスの観点からも外れていた場合、成功するわけがありません。 Matt Dempsey これはクライアント用にWebアプリを構築する場合も同様です。クライアントには既にアイデアがあるかもしれませんが、Webアプリを作成するにあたりプロとしての専門的な知識を駆使することは我々ディベロッパーとしての責任と言えましょう。クライアントが堅実なビジネスプランを持ちマーケティングの知識も持ったようなインターフェースデザイナーを雇ったとしても、あなた自身もそういう方面に関する知識を所有していれば、プロジェクトの最良の結果を出すためにそういった知識と自身の開発スキルを相乗効果で発揮することが出来るのではないでしょうか。 バージョンコントロール 全てのアプリケーションに対して必要だというわけではございませんが、公の場で使用されるようなアプリを作る場合にはバージョン管理システムにも気を配る必要があります。もし他の人と一緒に仕事をするのならば、アップデートや修正の追跡が出来るようにすることは尚更必要です。Git、SVN、CVSなどWebアプリケーションのバージョンを管理するための無料ツールを含め、オープンソースのバージョン管理システムは沢山世に出回っています。まずは7 Version Control Systems Reviewedなど参考になさってみてはいかがでしょうか。 Git 終わりに 毎日どんどん新しいWebアプリケーションが現れてきて、みなさん独自の素晴らしいアイデアをお持ちのこの世の中ではWeb開発産業のニッチ市場に参加することはWebアプリ開発者として賢い選択だと言えるかと思います。Web開発においてニッチ市場を選択することは非常にチャレンジングでありまた遣り甲斐があり、その為多くの開発者たちがこの道を選ぶのではないでしょうか。 世の中には沢山の学ぶべき技術や身に着けておくべきベストプラクティスがあり、そのリソースの殆どは無料で提供されています。なので本人の心構え次第で、誰でもWebアプリの作成方法を学べることが出来るんですよ。

.htaccessをWordPressで徹底活用

先日WordPress brandingとWordPressセキュリティの徹底強化についてご紹介したので、今度はややこしいと巷で有名な「.htaccess」に関してお話したいと思います。ひとしきりWordPressのダッシュボードやプラグイン、テーマなどをいじったら、次はまた大きな一歩を踏み出さねばなりません。まずはこのアーティクルでどんな話をするのか、説明しましょう。 Image credit: ptz0n この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 WordPressのカテゴリページにアクセスすると、以下のようなURLが表示されるかと思います。 個人的にこの「category」という単語はあまり好きではないのですが、WordPressがレンダーしてくるのはこのURLですよね。 「.htaccess」を使えば、この「category」部分を排除して、URLをもっとプロっぽく見せることが出来ます。.htaccessファイルを理解すればもっともっと変更出来る部分は拡がります。 それでは.htaccessファイルをいじる前に基本的なことをおさらいしておきましょうか。 そもそも.htaccessとは? .htaccessは元々はHypertext Accessの略です。コンフィグファイルの1つで、配置されたディレクトリとそれに関連するサブディレクトリを制御する権限があります。独自の機能を制御する為にApache系のWEBサーバーで使用されます。きっと使ってみればすぐに慣れると思いますよ。 NOTE: Windowsベースホスティングの.htaccessファイルはまた全く別の話です。このアーティクルではLinuxベースのホストに関してお話していきます。     .htaccessとApache     .htaccessファイルとApacheの関係を分かり易くする為に、以下の画像を作ってみました。WordPressとWEBサーバ(ここではApache)がどの様な位置関係にあるかにご注目下さい。これは非常にざっくりとした解説でしかないのですが、リアルタイム環境でのデータフローを理解するには充分なのではないかと思います。         上記の画像でご覧いただける通りApacheは.htaccessを経由して進むのですが、Apacheは指示されたものはそのまま持ち込んでしまいます。その為.htaccessは、もし何か複雑な変更が必要な場合でも素人にApacheを触らせないというApacheに対するシールド機能の働きもします。これは言い換えてみると、WEBマスターとしてはhttpd.confを触らずとも.htaccessを編集することによりデータフローや表示結果を変更出来ると言うことを意味します。         では何故直接httpd.confを編集しないのか?     先ほどの説明をご覧いただくと、当然こういう疑問が湧いて来ますよね。このブログをご覧になっている殆どの方は、何らかの形での共有ホストをお使いになっているのではないかと思います。それが何を意味するかというと、1つのサーバがあなたのWEBサイトだけではなく他の多数のWEBサイトをも走らせているということになります。従ってhttpd.confファイルをいじるということは、他のWEBサイトに影響を与える可能性も出てきてしまいます。例えhttpd.confファイルに重要な記述がされていないとしても、他のWEBサイトに影響を及ぼす可能性がある限りホスティング会社はhttpd.confファイルを触らせてはくれるはずがありませんよね。けれど.htaccessファイルを使えば、他のサイトに影響を与えることなくhttpd.confファイルを書き換えたかのような操作をすることが可能となります。これでスッキリしましたか?         ここまでの説明ではっきりしたことをまとめてみましょう。     .htaccessファイルで出来ることは何でもhttpd.confファイルでも実現可能です。 httpd.confファイルで出来ることは何でも.htaccessファイルでも実現可能というわけではありません。 .htaccess編集前に知っておくべきこと .htaccessファイルをさわり始める前に、以下のポイントを押さえておきましょう。 .htaccessファイルには所有者をもドメイン(FTPやcPanelといったツールを含み)から締め出してしまう様な機能もあります。その為、今自分が何をしているのかきちんと把握しながら作業を進めましょう。 ワードラップ機能の付いたエディターを使用している場合は、.htaccessファイルを編集する前にワードラップ機能を無効にすることをお勧めします。Apacheなら問題ないかと思いますが、もしかしたら誤作動を引き起こすことがあるかもしれません。 余分なコード(同じことを目的とした別々のコードセットなど)は避けてください。結果として無限ループを引き起こし、閲覧者が抜け出せなくなる可能性があります。 サブディレクトリへの変更はそのサブディレクトリ内に別の.htaccessファイルを置き、そちらのファイルから特定のコードを削除することにより避けることが可能となります。 RewriteCondを使用する場合は、<IfModule mod_rewrite.c>と</IfModule>の行の間に記述する必要があります。こうすることによりmod_rewriteと呼ばれるApacheの書き換えエンジンを有効化します。もしご利用のApacheでは既に有効化されていたら不要な作業なのですが、ご自身の.htaccessファイルで再度有効化させておいても問題ありません。 いざ.htaccessファイルを開いた時に、既にいくつかのコードが書き込まれている可能性が極めて高いです。これはWordPressのパーマリンク構造に必要なデフォルトなものなので、決して触らないように気を付けてください。参考までに記載しておきますね。 WordPressがルートディレクトリにインストールされている場合 WordPressが「blog」というサブディレクトリにインストールされている場合     変更事項はまずはサブディレクトリでテストしてみてください。 バックアップを忘れずに!WordPressにいかなる変更を加える前に、既存の.htaccessファイルをバックアップする必要性を説いた方がいいですか?答えは「Yes!」ですよね。いくつかのプラグインにはデフォルトに切り替える習性を持っているものがあります。そういった問題を回避する為に.htaccessファイルは必ずバックアップを取っておきましょう。 [adrotate block=”3″]     .htaccessファイルの保護     WordPressのセットアップをリモデルする前に、.htaccessファイルをきちんと保護しておかなければなりません。以下のコードは、外部からの.htaccessファイルに対するいかなるアクセスからも保護してくれます。ファイル名のケースセンシティブのところもきちんと賄ってあるので、ファイル名が.hTACcesSだったとしても、問題なく保護されます。         wp-config.phpファイルの保護     先ほどのコードはWordPress内の重要なファイルはどんなものでも保護してくれます。下記の場合はwp-config.phpファイルを保護しています。         WordPress内のディレクトリを非表示    先日のアーティクルでご紹介した通り.htaccessファイル内で下記のコードを使えば、WordPress内のディレクトリのパブリックビューイングを制限することが可能になります。        こうすることにより変更を加えた特定のディレクトリ内のサブディレクトリへのアクセスをブロックします。         特定のIPアドレスをブロック     もし何らかのIPアドレスがネットワークに障害をきたしていることが分かったら、以下のコードを使ってそのIPアドレスをブロックすることが出来ます。         スパムボットからのコメント拒否     WordPressのwp-comments-post.phpファイル有効時に誰かがコメントを残した場合、ブラウザは関連するラインを戻します。スパムボットがコメントを残した場合はwp-comments-post.phpファイルに直接ヒットするので、関連ラインは生成されません。以下のコードはそのようなスパム活動を検出し、スパムボットにそのまま送り返してしまいます。丁度あなた自身のAkismetを作ってしまうような感じです。         NOTE:4行目のyourdomain.comをwwwを除いたご自身のブログURLや他のプリフィックスに変更してください。         IPアドレスによるwp-adminフォルダへのアクセス制限     wp-adminフォルダはWordPressにとって中核であり、もしハッカーにアクセスされてしまったらそれでもうおしまいです。そのような事態を避ける為に、あなたのIPアドレス以外はwp-adminフォルダへのアクセス権が無いよう制限してしまえばよいのです。以下のコードをルートの.htaccessファイルに書き加え、wp-adminフォルダの中に配置します。こうすることにより変更はwp-configディレクトリ内のみに適用されるようになります。         NOTE:今回の制限を適用させる為には、ISPからの静的IPアドレスが必須となります。また「allow from」という行を加えれば、アクセス権のあるIPアドレスを追加することも出来ます。         ホットリンクの無効化     もし他のWEBサイトが自分のディスクにコピーして再アップロードするのではなく、直接あなたのサーバ上にある画像をそのままソース元とした場合、あなたのディスク容量とバンド幅が消費されてしまいます。これが所謂「ホットリンク」と呼ばれ、貴重なディスクスペースを節約する為にブロックする必要があります。         NOTE:コード内のYourDomain.comは、wwwを除いたあなたのブログのURLに置き換えてください。それからオプションとしてTrustedDomain.comは、ホットリンクを許可したい他のWEBサイトを追加したい場合に置き換えて使ってください。また、http://YourDomain.com/images/HotlinkingNotPermitted.gifの部分は、誰かがあなたの画像をホットリンクした場合に表示される画像です。折角なら彼らの一枚上手をいきましょう。         メンテナンス中の置換ページ表示     テーマブログを変更したり新しいプラグインをテストする必要がある場合、ブログへの訪問者をメンテナンスページへ誘導することをお勧めします。このテクニックは通常、訪問者達にそのWEBサイトがメンテナンス中であることとその予定期間をお知らせする為に用いられます。下記のコードをお使いください。         maintenance.htmlはあなたのWEBサイト上でメンテナンスページとして使用したいページに置き換えてくださいね。それから3行目の数字はあなたのIPアドレスに書き換えるのを忘れないようにしてください。そうしないと自分自身もアップグレード中にメンテナンスページしか表示されないという憂き目をみることになってしまいます。         キャッシュ利用で速度アップ     […]

WordPressのカスタムテンプレートを使って、異なるサイドバーを含むレイアウトを作成

WordPressとはWEB上で使われている最大規模のブログプラットフォームの1つで、その知名度の成長とありがたいほどの柔軟性により、静的なWEBサイトのCMSとしての使用される機会も非常に増えています。     そのようなサイトは主にWordPressのページ機能を中心に構築されておりますが、「ニュース」や「ブログ」ページを作成する為などに、特別カテゴリーの投稿表示を可能にさせておいた方が都合がよいこともあります。今回のアーティクルではカスタムサイドバーやサムネイル等を含め、WEBサイト上でブログページを作成する為のカスタムテンプレートの使い方についてご紹介していきます。     この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 今から作成するもの 画像は一見にしかずなので、それでは作成したい内容をざっと見てみましょう。 まずWEBサイト内に、2つのページを作成します: 左の「Normal page」では、例として「home」と「about」と言うページを作りたいと思います。実際にページ上で表示させたい項目は以下の通りです。 ページコンテンツ 検索ボックスとカレンダーで構成されたサイドバー 右側の「My Blog(or news) page」で表示させたい項目はこちらです。 「ブログ」と名付けるページ内容 最新投稿リスト(1ページに付き3つの投稿と一部のサムネイル) ブログ記事に関連するカスタムサイドバー(RSSリンクとカテゴリーリストから構成) たたき台が完成したので、早速コーディングから始めていきましょう! 「ブログ」WordPressページテンプレートの作成 まずは先ほどのレイアウトを使いこなす為に、ブログ用の独自のページテンプレートを作成する必要があります。こちらがテンプレート用の全コードです。「blog.php」という名前で保存してください。 それではこれから1つ1つ説明していきましょう。 テンプレートの名前 一行目にはテンプレートの名前を書きましょう。 この「blog_in_blog」の部分はダッシュボードの「ページ属性」>「テンプレート」の下の所に表示されます。(後程詳しく説明しますね。) ページ内容にの取得 次に「ウェルカム」メッセージページの内容を取得させています。 基本的にはpage.phpに書かれているコードと同じコードです。 投稿の取得 さてではテンプレート内で一番面白くて重要なパートに移りましょうか。下記のコードで投稿部分を取得します。 ここで使用しているquery_posts()ファンクションでは2つのパラメータを使用しています。1つ目は表示させたい投稿のカテゴリーIDでもう1つはページごとの投稿数です。文章で説明すると「カテゴリー3と4と5に割り当てられたすべての投稿を、デフォルトの年次順で、1つのページに付き3つずつ表示させなさい」と指示していることになります。勿論カテゴリーIDはWordPressのインストール自体に依存します。query_postsのパラメータを変更する事は可能ですが、今回の例では1ページ毎に3つずつで丁度いいのではないかと思います。 これらの投稿を表示させるには、get_template_partファンクションでループのデフォルトアーカイブパートを使用します。これにより55文字の抜粋部分と「続きを読む」リンクが表示されます。 ブログページへのテンプレートの割り当て 次のステップは先ほど作成したばかりのテンプレートをブログページに割り当てることです。まずはタイトルブログを作成して、素敵なウェルカムメッセージを書き込みましょう。 それから右側に行って、「ページ属性(Page Attributes)」パネルの「テンプレート(Template)」のドロップダウンメニューから「blog_in_blog」を選んでください。 ページを保存すると、以下のような感じで表示されているはずです。 ちょっとこれではみすぼらしいので投稿サムネイルを加えて、もう少し魅力的なページにしていきましょう。 投稿サムネイルをブログページへ追加 投稿サムネイルの有効化 WordPress 3.0+では投稿サムネイルはあまり簡単なものとは言えません。デフォルトテーマのTwenty Tenをお使いのみなさんの場合は投稿サムネイルは既に有効化されています。この機能が存在するかどうかを確認する為にはfunction.phpファイルを開いて下記のコードがあるか見てみてください。 もし上記のコードがfunction.phpファイルに無かったら、単純ですが、追加しておきましょう。 アイキャッチ画像パネルの追加 デフォルトではそのテーマでサムネイルが有効化されたら、投稿エリアの右側のパネルに「アイキャッチ画像(Featured Image)」が追加されることになっています。 「アイキャッチ画像を設定(Set featured image)」をクリックしてファイルを選択し、「投稿に挿入(insert into post)」ではなく「アイキャッチ画像として使用(Use as featured image)」をクリックします。それから「全ての変更を保存(save all changes)」をクリックしてメディアパート部分は完了です。もし全てうまくいっていたら、アイキャッチ画像パネルに画像が表示されているはずです。次にすることはテンプレートでの画像表示を有効化させることです。 ブログテーマにサムネイルを追加 ここで少しblog.phpファイルに戻ってみましょうか。投稿を表示させる為にループのアーカイブテンプレートパートを使用しました。なので今度はサムネイルをloop.phpに追加する必要があります。 アーカイブに関する行を探しているので、開始行から探してみましょうか。 抜粋記事にならないようにサムネイルを追加するにはthe_post_thumbnail()ファンクションを利用しましょう。 初めの配列(array)で80×80ピクセルの画像サイズを与えています。2つ目の配列(array)では画像用のクラスとalt属性(他の属性に関してはコーデックスをご参照ください)という、ファンクション上で使用可能ないくつかのデフォルト属性を使用しています。 サイドバーのセットアップ 投稿部分も終わってサムネイル部分も終わったので、次にするべきことはサイドバーのカスタマイズです。最初に少し触れましたが、今回2つのサイドバーが必要ですよね。1つはWEBサイトの「Normal page」用でもう1つは「My Blog(or news) page」用でしたね。 ウィジェットエリアのセットアップ Twenty Tenテーマには3つのサイドバーのウィジェットエリアと、4つのフッターが付属しています。管理画面の「外観(Appearances)」>「ウィジェット(Widgets)」にはサイドバーを作成する為のエリアが2つあります。「primary widget area」は固定ページ用に使用する予定なので、検索ボックスとカレンダーウィジェットを追加しましょう。「secondary widget area」はブログページやアーカイブ、投稿ページ用に使用するので、RSSリンクを表示させる為のfeed text link widgetとカテゴリーウィジェットを追加しましょう。 サイドバー表示の為に条件分岐タグの使用 「blog.phpテンプレートを使用して投稿したら2つ目のウィジェットエリアに表示され、それ以外のテンプレートを使って投稿したら1つ目のウィジェットに表示される」と言うような、とてもシンプルな指示をWordPressに出したかったとしたらどのようにしたらいいと思いますか。あ、それとカテゴリーは投稿にリンクされているので、カテゴリーも2つ目のウィジェットに表示させたいですよね。 ではまずは使用するコードを見てみましょうか。 まずはwp_reset_query();の部分ですが、ページが呼び出された時にクエリーを元の状態に戻すものです。ページ間での衝突を避け条件分岐タグを問題なく動作させる為に必要となってきます。 サイドバーの中核、条件分岐タグに移りましょうか。まず初めにblog.phpテンプレートをブログページに使用したかどうか検出する為に、is_page_template(‘blog.php’)を使用します。is_page_template()という条件分岐タグは、PHP用の拡張子(.php)で保存されているファイルを使用する必要があり、それ以外だと動作しません。また2つ目のサイドバーにカテゴリーを表示する為に、is_category(3,4,5)とis_single()を使ってチェックしています。あとは2つ目のウィジェットエリアを取得する為のコードを記述しています。 1つ目のウィジェットエリアはそれ以外の全てのページで使用されるので、条件のその他の部分に記述します。完成するとこのようになるはずです。 終わりに・・・ さて、これで完成です!今回はWordPressのカスタムテンプレートを使って、カスタムサイドバーのある固定ページとブログページがある基本的なWEBサイトを作成する方法をご紹介しました。勿論コードは改善してテーマに沿った調整する必要はありますけれどね。 カスタムサイドバーなんて必要ないし、もっと簡単なものが作りたい!と言う方は、特定のページを全ての投稿を表示する為のフロントページとして使用することが出来ます。これは「設定(Setting)」>「表示設定(Readings)」で固定ページにチェックを入れ、特定のページを投稿のフロントページと設定することが出来ます。あとはblog-in-blogと言う面白いプラグインを使うと言う手もあります。

WordPress 3.0のテーマをゼロから作成

WordPress 3.0のリリースで、人気のコンテンツ管理システムに多くの新機能が実装されました。 今回のチュートリアルではこれらの新機能の全てを活用していただくために、ゼロからWordPress 3.0テーマ(テンプレート)のコーディングの仕方をブログ対応やミニマルテーマも含めご紹介したいと思います。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 ワークステーション設定 チュートリアルを開始するにあたり、まずはご使用いただいているコンピュータへサーバ設定をする必要があります。Windowsの場合はXAMPPやWAMP、Macの場合はMAMPなどがよいかと思います。これらのツールによりローカルテスト環境でWordPressのテストをすることが可能となり、プロジェクトの最中にいちいちFTPを使ってファイル転送する必要は無くなります。 コード編集に関しては、Notepad++のご使用を強くお勧めします。シンタックスがハイライト表示されたり、コーディング用のユーザーインターフェースも非常にシンプルでクリーンであったりと、あくまで私の好みである部分が強いのですが、とても使い易いと思います。(それに無料に勝るものはありません!)他にもNotepadやNotepad 2も同様に使い易いと思いますよ。 必要なフォルダとファイルの準備 WordPressインストールを含むフォルダ内で、wp-content/themes/に移動し「New 3.0 Theme」というフォルダを新規作成し、今後このチュートリアルで作成するファイルは全てこのフォルダの中に収納するようにしてください。では下記の画像の様にファイルとフォルダを追加してください: ステップ1-Style.css sytle.cssにはWordPressテンプレートをスタイリングする全ての要素を書き込みます。けれどまず最初は各テンプレートの名前と、著者名とリンク、そして説明とバージョンを宣言しておきましょう。WordPressテーマ作成時には、テーマを動作させるには必ず2つのファイルが必要になると言うことを覚えておいてください。1つ目はこのstyle.cssファイルで、もう1つは今から作成するindex.phpファイルです。 これらのインフォメーションはいつでも変更が可能ですが、作成された定義に影響を与えないようにきちんとコメント内に記述されているか気を付けるようにしてください。 それでは後程テンプレートのPHPファイルに実装する基本的な定義を記述していきましょう。 タグでは単純にWEBサイト上で使用されるフォントの指定や、(自分の好みに応じて)背景色の設定を行ってください。それからテーマに沿って、リンクのスタイル属性の設定やヘッダーの設定も必要です。 #wrapperはWEBページ全体をカバーし、#headerはその字の通りヘッダー部分、#blogは最新のブログ投稿をカバーしており、最後に.sidebarと#footerも、それぞれ与えられた範囲の基本的な定義をしています。こちらに関してはまた後程詳しく説明しますね。 ステップ2-Header.php 次にheader.phpを作成します。現時点ではWEBサイトのロゴとカスタムナビゲーションまで設定しましょう。 全て詳しく説明する必要はないかと思いますが、上記のコードはあなたが作成するテーマのheader.php全てに必要であると言うことだけは、覚えておいてください。 初めにDOCTYPEの宣言し、WordPressの設定で入力したWEBサイト名を表示させるためのスタンダードを使用します。それからWordPress 3.0のスレッドコメントを有効にするstyle.cssとPHPを記述します。 ステップ3-カスタムナビゲーションの追加 ここまででheader.phpに、基本情報とブログの名前をコーディングしました。次にWordPress 3.0で導入された新機能のカスタムナビゲーションメニューを追加しましょう。実際にheader.phpにコードを追加する前に、まずはfunctions.phpを開いてカスタムメニューを有効にするために必要なコードを追加します。 1つ目の方のコメント部分のコードからお分かりいただけるかと思いますが、add_actionはカスタムメニューへのサポートを追加するために使用されており、次にカスタムメニューを「プライマリーメニュー」と名付けて登録しています。さて、ではテーマにメニューを実装するための作業に移りましょう。 そうするためにはまずheader.phpの末尾に以下のコードを追加する必要があります。 これが何を意味するかと言うと、使用されている主な機能は「wp_nav_menu」と、「sort_column」「container_class」「theme_location」です。「sort_column」の働きはと言うと、WordPressのダッシュボードの選択順序がきちんと守られているかを確認します。「container_class」はメニューをスタイリングするために作られたCSSクラスを、選択することを可能にします。最後に「theme_location」は、(現時点ではprimary-menuのみですが)私たちが選んだ場所にメニューを配置することを可能にします。 ステップ4-カスタムナビゲーションのスタイリング カスタムヘッダーナビゲーションを実行しておりますが、現時点では何の変哲もない古めかしいリンクのリストと言う感じで面白くありませんよね。これを修正するにはstyle.cssにnavというクラスを追加します。 .navファイルでご覧いただける通り、ナビゲーションの幅や、背景色、アライン設定、ディスプレイ設定など基本的な宣言を幾つかしています。それからリンクの前に黒丸が出ないように、基本的なULリストの設定もしています。リスト自体は左側にフロートし、相対位置設定もしています。 それではリンクとドロップダウンメニューにスタイルを追加することで、ナビゲーション全体のスタイル設定を完成させましょう。 まずはメニュー部分のリンクをスタイリングすることから始めており、ここからドロップダウンメニューのスタイリングに入ります。「.nav ul ul」の部分では絶対位置設定をし、トップの位置は100%としています。こうすることにより親リンクの直下に配置することが出来ます。更にドロップダウンリンクを少し目立させる為に背景色も変更しています。そしてZインデックスを99999にすることにより、その下に何があろうとこの要素が他のどの要素よりも一番トップに位置するよう設定しています。 3つ目のドロップダウンメニューでも違いを出す為に、再び背景色をほんの少しだけ変更しています。配置自体は左側に100%です。これにより1つ目のドロップダウンよりもずっと右寄りに表示されます。トップの設定は30%としており、こうすることにより2つ目のドロップダウンと接しているけれども、メニュー全体からは下にずれて表示されます。 最後にドロップダウンメニュー用のリンクをスタイリングします。同様にユーザーがリンクとドロップダウンをホバーした時に、ナビゲーションがどのように表示されるかということも設定します。 ステップ5-Index.php Index.phpはWEBサイトのホームページであり、後述するヘッダーやフッター、サイドバーや最新投稿ブログを表示させるためのコードなどを含んでおり、WordPress 3.0の投稿サムネイル機能を利用しています。 以下のコードはテーマファイル内のどこに配置しようとも、「header.php」「sidebar.php」「footer.php」内の全ての情報をアウトプットする為に使われています。 それ以外はここに書かれているコードは極めてシンプルなものです。header.phpを呼び出した後に少し前に作成した#blogを使い、WordPressブログの最新投稿を表示する為に使うループを呼び出しています。その後で投稿タイトルを、やはり事前に作成しておいたスタイルでラップしています。   WordPress 3.0の投稿サムネイル機能をどのように活用するかということは、<?php the_post_thumbnail(); ?>が担っています。そこに書かれているように、このコード自体は次のステップで説明するfunctions.phpの機能をアクティベートするまでは何もしません。 ステップ6-投稿サムネイルを有効にする 先ほどホームページ上で投稿サムネイルが表示されるよう、コードを追加しましたよね。けれどまだその機能をアクティベートしていないので、実際には何も変わっていません。ではここでfunctions.phpを再び開いて、下記のコードをメニューナビゲーションコードの後に来るように追加しましょう。 上記のコードはもうそのものずばりで、書かれている通りの働きをします。二行目のラインで投稿サムネイルへのサポートを追加しており、三行目はサムネイルの厳密なサイズを定義しています。このアーティクルでは横幅520ピクセル、高さ250ピクセルで設定しました。 ステップ7-Sidebar.php ご想像がつくかと思いますが、sidebar.phpはサイトバーで表示させたい情報全てを賄うファイルです。index.php上でsidebar.phpを取得する為のコーディングは既に済んでいるので、今しなければならないことはsidebar.php内に必要情報を追加することだけです。そうすればホームページ上にサイトバーが表示されます。 そうですね。上記がsidebar.phpが機能する為に必要な全てのコートですね。style.cssで作成したdivを呼び出し、その後に続くコードで、WordPressのバックエンドを経由して希望する順番と方法でウィジェットをサイドバーに追加することが出来ます。しかしながら、他の多くの機能と同様に、正常に動作させるためにはfunctions.phpファイルを多少書き換える必要があります。 このコードは、先ほどのsidebar.phpを登録するようWordPressに指示しています。WordPressではもし希望するなら、複数のサイドバーをいとも簡単に取り扱うことが出来ます。けれどこれ以上書くと、この長いチュートリアルが更に長くなってしまうので、もしご興味があればGoogleサーチしてみてください。 ステップ8-Single.php single.phpは、シングルポストページ用に使用するもので、index.phpで書いたコードと殆ど同じです。唯一の違いと言えば、「comments-template」DIVタグとcomennts.phpを読み込むコードを追加したことくらいです。 ステップ9-Comments.php WordPress 3.0のリリースに伴い全WordPressテーマを通してコメントフォームの標準化を進める事は、フックを介して変更することが可能となるのでテーマ作者やプラグイン開発者にとって非常にやり易くなりとても意味のあることです。 以下のコードは各テーマテンプレートにcomments.phpファイルを追加する為のコードです。 このコードにより、テーマに沿った形でコメントフォームが表示されます。もしコメントフォームの更なるカスタマイズにご興味をお持ちでしたら、こちらのWordPress 3.0 Theme Tip the Comment Formというサイトをチェックしてみてください。 ステップ10-Page.php WordPressでページを作成すると、タイプした内容を表示するには別のファイルが使用されます。そのファイルがpage.phpです。コード自体はsingle.phpとほぼ同じなのですが、このページではコメントテンプレートは省略したいのと、投稿ナビゲーションに少し変更を加えたいのでその辺りが少し変わってきます。けれどそれ以外は全く同じです。     ステップ11-Category.php category.phpはユーザーが「特定の投稿カテゴリー」や「投稿時間」「特定の著者」を見るたびに、投稿を表示させる為の情報を提供するファイルとなります。先ほどのpage.phpと同様にコードの殆どがsingle.phpと同じですが、最初の部分だけ少し異なります。 このコードが追加された部分で、WordPressループのすぐ後ろに追加されています。 このコードの役割は、現在ブログのどこを参照しているかを表示する為に大量のPHPのif/elseifステートメントを処理することです。なので例えば「Test Category 1」という特定のカテゴリーを見ているとすると、他のポストより先にまずH2ヘッダーの「Archive for the ‘Test Category 1’ Category:」を表示してくれます。これは一定の日付や著者などに対しても同じ働きをしてくれます。 ステップ12-背景のカスタマイズとリンクフィード 以前少し触れた通り、WordPress 3.0で実装された機能の1つとして、WordPressのバックエンドを通して画像だったり基本色だったりと背景の作成や変更が可能になったということが挙げられます。 この機能を完全に動作させる為に必要なのは、このたった1行のみです: このようにして、背景のカスタマイズが有効となります。次に同じくらいシンプルなコードを追加します。そうすることにより、関連するリンクフィードがサイト上どこでも使用できるようになります。標準のフィード、コメント、タグ、カテゴリーなどを追加コード無しでヘッダーに加えることが出来ます。 この機能が本来の働きを問題なく出来るように、下記のコードをfunctions.phpに追加しましょう。 ステップ13-Footer.php 今までの作業を全て完成させる為に、footer.phpファイルを作りましょう。このファイルではstyle.cssで宣言した#footer IDを使用し、基本的な著作権情報や一番下にある最新ストーリーやコメントのRSSフィードリンクを含んでいます。 ステップ14-その他の機能 ここでは、あまり重要ではないけれど、知ってると便利かもしれない機能を紹介したいと思います。WordPress 3.0のマルチサイト機能で、1つのWordPressをインストールしただけで複数のブログを所有することを可能にします。これもfunctions.phpに追加したいと思います。 まとめ この時点で下書きからWordPress 3.0のテーマを完成させているのではないでしょうか。しかもとても人気のある機能を搭載し、かつ必要最低限のままなので、今後もっとグラフィック的に印象を与えるサイトへと変貌させることも充分可能です。他にこのテーマを使ってどんなことが出来るでしょうか。テーマを変更するだけの基本的なオプションとスタイルは備わっているし、サイドバーを更に追加することだって、How to Create a Better WordPress Options Panel のサイトを使って管理パネルを作ることだって出来ます。

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がリメイクされるかどうかは知りません。ただの噂みたいですけれどね・・・。

WebKitを使ってスクロールバーをカスタマイズ

一昔前、IE(5.5)などでは非標準のCSSを使って、スクロールバーをカスタマイズすることが可能でした。例えばscrollbar-base-colorをスクロールする要素(<body>など)に使って、結構過激なことなんかも出来ました。けれどIEはそれを廃止してしまいました。 最近になって再びスクロールバーをカスタマイズすることが出来るようになりましたが、今回は非標準CSSではなくWebKitを使うことになります。プロパティはベンダープレフィックス(::-webkit-scrollbarなど)で、シャドウDOMを使用しています。この方法が使われるようになって数年経ちますが、ディビッド・ハイアットさんが2009年の初めにブログで記事にしており、考え付くであろう全てのサンプルを掲載されています。 この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ Webkitスクロールバー webkit scrollbar使用可能な疑似要素 下記のコードは疑似要素で、スクロールバーの個々のパーツにあたります。 webkitスクロールバー状態指定セレクタ 下記のコードは疑似クラスセレクタです。これらのセレクタを使って、スクロールバーの様々な状態を更に具体的に選択することが出来ます。 ここの部分はディビッドさんのブログの説明が完璧なので、丸々ぱくって日本語訳します: (昨今この疑似クラスは::selectionにも同様に適用されるようになりました。そのうち新しい標準疑似クラスとして他のコンテンツでも適用するよう拡張する予定だそうです。) :horizontal(水平方向) 水平方向の全てのパーツに適用されます。 :vertical(垂直方向) 垂直方向の全てのパーツに適用されます。 :decrement(減少疑似) button(2)とtrack-piece(4)に適用され、垂直スクロールバーの上方向や水平スクロールバーの左方向等、それらのパーツが減少方向にあるかどうかを示します。 :increment(増加疑似) button(2)とtrack-piece(4)に適用され、垂直スクロールバーの下方向や水平スクロールバーの右方向等、それらのパーツが増加方向にあるかどうかを示します。 :start(スタート疑似) button(2)とtrack-pieces(4)に適用され、オブジェクトがthumb(5)より前に配置されているかどうかを示します。 :end (エンド疑似) button(2)とtrack-pieces(4)に適用され、オブジェクトがthumb(5)より後ろに配置されているかどうかを示します。 :double-button(ダブルボタン疑似) button(2)とtrack-pieces(4)に適用されます。buttonの場合は、そのbuttonがスクロールバーの同じ端にあるペアボタンの1つであるかを判断するのに使用されます。track-piecesの場合は、track-piecesがペアボタンと隣接するかどうかを示します。 :single-button(シングルボタン疑似) button(2)とtrack-pieces(4)に適用されます。buttonの場合は、スクロールバーの端っこに単独で存在するボタンかどうかを判断します。track-piecesの場合は、単独のボタンと隣接するかどうかを示します。 :no-button(ノーボタン疑似) track-pieces(4)に適用され、track-piecesがスクロールバーの一番端まで適用されるかどうかを示します。(すなわち、そのトラックの端にはボタンが存在しません。) :corner-present(コーナー・プレゼント疑似) 全てのパーツに適用され、スクロールバーのcornerが存在するかどうかを示します。 :window-inactive(ウィンドウ・インアクティブ疑似) 全てのパーツに適用され、そのスクロールバーを含むウィンドウが現在アクティブであるかどうかを示します。 全てを組み合わせると・・・ 実際に疑似要素と疑似クラスセレクタを組み合わせたサンプルを、幾つかご紹介しましょう: 簡単なサンプル それではとてシンプルなカスタムスクロールバーを作ってみましょう: これを垂直方向にオーバーフローしているテキストのdiv要素に、組み込んであげればよいのです: 実装例 ティム・ヴァンダムさんのブログMaxvoltarで、とても繊細でいい感じのスクロールバーを使っているので見てみてください: このページで注目すべきところは、普段私たちが見ているページとは異なり、スクロールバーはページの上端にも下端にも右端にも接していないところです。(スクロールバーはbody要素なのにも関わらず!です。)コードをコピペして似たようなテストページを作成したのでご覧ください: デモページ ForrstというWEBサイトでも、コードスニペットの部分でカスタムスクロールバーを使用しています。スクロールバーがあまり目立たないようにしてあるので、コードの着色部分とあわさって目がチカチカすることもなく、いい感じに仕上がってますね。

PNGファイルでカラーアニメーション

あまり普段やってみようと思うことはないかもしれませんが、<img>タグにも背景色を付けることは可能です。例えば画像周囲に2本の枠線を引きたかったとします。1本目の枠線は通常通りborderを使用し、もう1本の方はbackground-colorとpaddingを使ってあたかも枠線かのように見せることが出来ます。もしくは背景色を真っ赤にセットすれば、画像が抜けているところが一目で確認出来ます。 他に背景色を使う可能性としては、画像の透過部分から背景色を透かして見せたい場合などでしょう。実際この方法ならば、何でも自分の好きな形を作って後ろ側に背景色を設定すればよいのです。すなわち作成した形の色をCSSで好きなように変えることが出来るのです。更に言えば、CSSでコントロールするのですから、CSSで出来ることなら何でも出来ると言うことです。アニメーションにすることだって出来ます。 この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ まずは画像の作成ですが、透過させない部分はソリッドカラーで残します。以下のサンプルの場合は白ですね。そして背景色で「形作りたい」個所を透過させます。フォトショップで見るとこんな感じです: そこにマークアップを加えていきます: そして背景色を付けます: それから何色かが順番に繰り返し表示されるようなアニメーションを作ります。シンタックスは2つとも必要です: 最後にアニメーションシンタックスを画像に適用させます: これが完成図です!デモページで実際のアニメーションを確認してみてください。おまけでマウスオーバーすると色が変わる自転車の画像もつけておきます。

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要素)をカバーするために、ダウンロードのデータ内にアーティクル更新前の古いバージョンも残しておきますね。

疑似要素で出来るあれこれ

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 疑似要素の:beforeや:afterは「すごい」のヒトコトに尽きます。ページ上のいかなる要素においても、他のHTML要素で出来ることは何でも出来てしまうようなすごいモノを追加で2つもゲットすることが出来てしまいます。しかもセマンティック的に悪影響を及ぼすことなく、様々なデザインの可能性を拡げてくれます。今回は総集編です。それでは早速ご紹介していきましょうか。 複数の背景キャンバスの実現 相対配置した親要素に疑似要素を絶対配置できっちりと貼り付けることが可能なので、色々と遊べる2枚のエクストラレイヤーが追加されたと考えてよいでしょう。ニコラス・ギャラガーさんが別の記事で、複数のボーダーラインや、CSS3での複数背景シミュレーションや、同じ高さの列など詳しくご紹介なさっています。 単一要素で作成可能な図形例 上記の画像内にあるアイコンは全て単一要素から作成することが可能で、しかも非常に実用的です。それとは対照的に「CSSでコーヒーカップを描いてください!」などと言われたら、それは面白そうですが1700個以上のdivタグが必要となってしまうので全く実用的ではありません。他にもいろいろな形があります。 六芒星のサンプルをご覧ください: 印刷用ページでのURL表示 CSSサンプル フロートの解除 フロートを解除するために、セマンティック的によろしくない余計なタグをコンテナ要素に追加するよりも、疑似要素を使用して解除することが出来ます。一般的に「clearfix」として知られる手法ですが、もう少しセマンティック的に表現するとクラス名は「group」です。 float: center; のシミュレーション いくらみんなで望んでみても、floatプロパティーには実際はセンタリング用の値はありません。けれどfloatには右寄せと左寄せはあるので、疑似要素をプレースホルダーとして使用し2つの列の真ん中を削って画像を配置することが出来ます。 ラベルブロックに使用言語の表示 今このサイトでは疑似要素を使って、使用している言語名をラベルとして表示させています。 アイコンセットの作成 ニコラス・ギャラガーさんがまたすごいことをしています。上記の画像内にあるアイコンは全て画像を一切使用せず疑似要素だけで作られています。 限りあるスペースの有効活用 CSSが与えてくれたり奪ったりすること。何が言いたいかと言うと、疑似要素のコンテンツはメディアクエリーによって、条件的に適用されたり無効化されたりします。例えば上記の画像例で言えば、スペース幅に応じてアイコンを使用したり、もっと充分にスペースがあるならば単語や文字を追加して表示させたりすることが可能です。 タイポグラフィーな飾り書きを追加 もし疑似要素がテキストだったなら、親要素のタイポグラフィースタイルを継承します。けれどもしコンテンツを設定しているなら、その部分は好きなようにスタイル設定することが出来ます。例えば別のフォントや色などの飾り書きを使ってヘッダーを目立たせることも出来ます。 フルブラウザ幅のバー作成 もしコンテンツはそのままのサイズで、背景だけブラウザのサイズに応じて幅を変更させたいような場合、セマンティック的にもよろしくないようなラッピングタグを追加してみたり、すっちゃかめっちゃかなスペース設定をしてみたりと試してみて煮詰まってしまったことはございませんか?これもまた疑似要素をうまく使用することにより簡単に解決します。1つの要素でコンテンツ幅を制限し、ヘッダーバーの方は疑似要素でフルサイズまで拡張するようシミュレートさせることが出来ます。 ボディ枠線の作成 通常の枠線を左右に使用し、position:fixedで固定された疑似要素で上下の設定をします。すると何もマークアップすることなく、ボディ枠線効果を実現させることが出来ます。 きらりと光るボタンの作成 まず透明→白→透明のグラデーションになっている画像を疑似要素ブロックに入れて、ボタンの外側に配置します(overflow: hiddenで隠してあります)。次にhover時にボタンの上を通過させるようにします。こうすればマウスを乗せた時に、きらりと光って見えるボタンを作ることが出来ます。今のところ疑似要素のトランジッションに対応しているのはFirefoxの4か5のみなので、Firefoxの4か5で試してみてください。 特定リンクのロールオーバー時はページ全体をフェイドアウト もし親要素が相対配置されていなかった場合、絶対配置されている疑似要素は、その更に1つ外側の相対配置されている親要素を元に配置が決まります。もし相対配置されている要素が無ければ、大元のルート要素に関連付けられます。これをうまく利用して、フルブラウザ・ウィンドウ要素を作ることが出来ます。メイン要素の下に配置し、マウスが乗せられた時に「ページフェイドアウト」効果をリンクに適用させます。 ヘッダーに3D効果なリボン設定 リボンを嫌いな人はいないと思います!このページにHTMLとCSSの詳細が載っています(http://css-tricks.com/snippets/css/ribbon/)。これは少しz-indexを負の値で使用している為、不透明な背景が設定された親要素の下に隠れてしまわないように、ラッピング用に内側に追加でタグを記述する必要がある場合があります。 olリストの番号にスタイル設定 順序付きリスト(olリスト)の番号部分に、スタイル設定を試みたことがありますか?色々試してspanを使ってラッピング用にタグを追加したり、リストアイテムをスタイル設定したり、はたまたspanでそのスタイル設定を無効化してみたりしてもうにっちもさっちもいかなくなってしまったりとか・・・。それか背景画像をとんでもない方法で使ってみたり、リストスタイルを無効化させて独自の番号を入れてみたりとか・・・。どれもこれもしょうもない方法ですよね。疑似要素をカウンターとして使う方が断然ベターです。 データテーブルのレスポンシブ化 大きなデータテーブルは小さなスクリーンで見るにはやっかいですよね。大き過ぎて垂直方向にも水平方向にもスクロールしなければならなかったり、全体を表示させるために縮小されていて今度は小さ過ぎて全く読めなかったりとか。CSSのメディアクエリーと疑似要素を組み合わせれば小さなスクリーンに合わせて読み易くなるように、データテーブルをレスポンシブ化&再フォーマットすることが出来ます。 ツールチップのスタイル設定 HTML5のデータ属性を利用して、その属性を疑似要素としてスタイリングします。こうすればCSSだけで簡単にツールチップが作成出来るのです!

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です。それを証明するには下記のコードでテストしてみてください。もし下記のコードに変なところがあれば、修正して試してみてください。こんな感じになると思いますよ。 それでは最小値と最大値を算出してみてくださいね。こちらにライブデモもありますので、よろしければご覧ください。改善案はいつでも大歓迎です!

プロも迷うDIVとSPANの正しい使い分け方

長くウェブプログミングを行っている人でも、DIVとSPANの違いは?と聞くと, “DIVはブロックエレメントでSPANはインラインエレメント”と返ってくるが、実際にどう使い分ける?と聞くとボロックエレメントが必要な場合はDIVで、インラインエレメントが必要なときはSPAN” と返ってくる。 実際、その答えは間違ってはいない。ただ、状況によってはSPANを使ってわざわざスタイルシートで display:block; を指定すことがある。CSSをメインで行ってないプログラマーにとっては、”なぜ?わざわざ一行増やすの?”となる。 正しいDIVとSPANの使い分け方の答えは、CSSの元々のフィロソフィーにある。 いつも忘れては行けないのが、CSSの本来の役割は、ウェブサイトのコンテンツであるテキストとデザイン用のコードを分けながら、正しいマークアップを行うことにある。 例えば、本文の題名をdivで囲むことは、正しいマークアップではないことはみなさんわかりますね?! では、DIVはある区分を囲む為にあるのもわかりますね?! 例えば下のように筆者の紹介用のブロックがあるとしたら、必然的にすべてをDIVで囲み一つの意味のあるセクションとにします。 じゃ、最終的に”筆者名”にスタイリングする必要があり、スタイリングにブロックエレメントが必要だとして、 divかspanタグしか使えない状況だとしたら、あなたらSPANかDIVどっちらを使いますか? …. わかりますね? 正しいマークアップを使うことがHTML/CSSでは、一番重要だということです。 

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

最近では、すっかり定番となってしまったライトボックスですが、ライトボックスのコピーキャットがオリジナルを越える機能を搭載して、どんどん出てきている。 ライトボックスクローンの比較表が作成される程、その数は日に増しているので、クオリティの高いの数個使いこなし、是非次のプロジェクトに合わせて、一つ取り入れたいものだ。 そこで、今回は、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 是非、あなたの今のサイトに導入してみてください。

Zen Coding(ゼンコーディング)を使ってコードを3倍早く書く

HTMLでもCSSでもCでもJavaScriptでも、プログラーマーたちは自分たちの書くコードを一秒でも早く書くため手に様々ツールを開発してきたが、今回、ロシアからこれからのコーディングを全く新しい方法で行う、ZenCodingが注目を浴びている。 ゼンコーディングとは、特定の文字配列をつかうことで特定のコードを簡単に呼びだすことができます。 これだけ聞いてもパッとこないと思いますので、早速見てましょうか。 1. ZEN Codingのインストール まずZEN Codingは、Google Codecよりダウンロードできますが、使っているエディタによっては、他のサイトよりダウンロードする必要があります。現在Zen Codingがサポートされているエディターとダウウロード先は以下をご覧ください。 私は、Codaを使ってますので、Tea for Coda をダウンロードして、ダブルクリックすると、CodaのPlugin のメニューにZen Coding が表示されます。 ショートカットが使いにかったので、System Preference -> KeyBoard -> Application Shortcuts を選んでから、Coda用のショートカットを少し変更しました。これで、Command + ; で展開されます。 オフィシャルにサポートしているエディタ 以下のエディタ用に作られたプラグインは、Zen Codingのチームメンバーによって作られていますので、最新の機能が使えることを保証しています。 Aptana/Eclipse (Mac/Windows) Zen Coding を Aptana/Eclipseへのインストール方法 TextMate (Mac). Text Mate用のZen Codingをダウンロード Coda (Mac) — 私はこのCodaを使っています。今回インストールする方法は、 TEA for Coda を使います。 Coda 用のZen Coding をダウンロード Espresso (Mac) — Espresso 用のZen Coding をダウンロード Komodo Edit/IDE (Mac / Windows) — Komodo 用のZen Coding をダウンロード Notepad++ (Windows). Notepad++ 用のZen Coding をダウンロード PSPad (Windows). Scripts > Zen Coding menu item PSPad 用のZen Coding をダウンロード アンオフィシャル プラグイン Zen Codingチーム以外の方々が作られています。すべて機能がサポートされていると言う保証はございません。 Dreamweaver (Windows, Mac) Dreamweaver 用のZen Coding をダウンロード Sublime Text (Windows) Sublime 用のZen Coding をダウンロード UltraEdit (Windows) UltraEdit 用のZen […]

WordPress : カテゴリーによって記事のページデザインを変更する

WordPressは簡単に目的にあったようなシステムにできるので、とても気に入っています。 今回は、今作っている情報系サイトでつかった、カテゴリーによって記事のデザインを変更する方法を紹介します。これができることによって、例えば、ビデオの紹介ページ用のレイアウトとは別に本紹介ページレイアウトを変更するといったようにデザイン/レイアウトをカテゴリー別に簡単変更することができます。 これと、後に紹介予定のCustom Fieldを合わせ使うことで、簡単にビジネスディレクトリーや本やビデオなどのレビューディレクトリーなどがつくることができます。 さーあそれは、早速やってみましょーーう、えーとまずは、 1.自分のtheme内にあるFunctionファイルを開いて下記のコードを入れてください。 [/php] add_filter(‘single_template’, create_function(‘$t’, ‘foreach( (array) get_the_category() as $cat ) { if ( file_exists(TEMPLATEPATH . “/single-{$cat->term_id}.php”) ) return TEMPLATEPATH . “/single-{$cat->term_id}.php”; } return $t;’ )); そして、ページのデザイン/レイアウトのページを、single-(category-id).php 例:single-8.php といったように名前を付けて作ってください。そして、、これでお終い。 はい。これでもしカテゴリーID”8”の内のページを開いたら、single-8.php のレイアウトに沿って表示されます。 このコードは、どこかのサイトで紹介されたものです。Function内に直接コードを使う方法以外にも、Pluginなどもありますので、是非探してみてください。