エレメンターのウェブページは「セクション」「カラム」「ウィジェット」で構成されています。それらを上手く使う事で、柔軟で思い通りのサイトを制作する事が出来ます。 ① ページに「セクション」を追加します。 ②「カラム」に「ウィジェット」を追加します。 ③ 鉛筆やハンドルアイコンをクリックすると、各要素を編集してカスタマイズが出来ます。 編集アイコンを使用すると、要素をページの上または下に移動したり、複製、追加、保存、または削除が出来ます。その他にも、スタイルのコピーや貼り付けを行う事が出来るので、スタイルだけコピーしたい時には重宝致します。 また、右クリックを押しても、要素のメニューが表示されます。
この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナル記事へのリンク 3つのレイアウトで様々なブラウザ画面サイズに対応する、レスポンシブでタッチフレンドリーなRetinaディスプレイ対応のメニュー作成方法 今日は、ボーダーランズ（Borderlands）ゲームの武器メーカーMaliwanが打ち出す様々な色からインスピレーションを得た、多彩なRetina対応のレスポンシブなメニューを作成していきます。このメニューはブラウザのウィンドウサイズに合わせ、自動で次の3つの異なるレイアウトのうちの１つに変化します。「デスクトップ」向けの横1列表示バージョン、タブレット向けに最適化された縦2列表示バージョン、そして最後は、ナビゲーションを表示／非表示するためのメニューボタンを備える、より小さな画面のモバイル向けのバージョンです。 メニューを完全Retina対応とするため、アイコンフォントを使います。アイコンフォントを使うと、リサイズ時にメニューのアイコンの品質が低下する（ボケて滲んで見えたりする）ことがなくなります。 個々のCSSプロパティをサポートするブラウザ上でのみ実現される効果もありますので、ご注意ください。 アイコンフォントを準備する 独自のアイコンフォントを作るというと少々面倒な感じがするかもしれませんが、IcoMoonなどのツールを使えば、要はアイコンを作ってそのツールにインポートするだけです。アイコンフォントは他のあらゆるフォントと同様に機能するため、色の変更やサイズの指定が簡単にでき、品質が低下することもありません。異なる画面の解像度に合わせてアイコンを用意する必要がなくなり、Retina対応デバイスに最適です。 まず最初に、メニュー用のアイコンを作る必要があります。私はイラストレータを使いますが、例えばInkscapeなどのベクタグラフィックスエディタであればどれでも構いません。アイコンをそれぞれ作成したら、それら一つ一つをSVGファイルに書き出します。アイコンをあらゆるブラウザで適切に機能させるためには、各アイコンごとに、すべてのラインを完全にオブジェクトに変換し、それらのオブジェクトをすべて統合して１つの大きな形にする必要があります。すべてをSVGファイルに書き出したら、それらのファイルをIcoMoonアプリケーションツールにインポートします。 IcoMoonから提供されている膨大なライブラリのアイコンを使って、作成したフォントの見栄えをさらに良くすることもできます。必要なすべてのアイコンが揃ったら、ページ下の「Font」ボタンをクリックし、詳細設定のページに移ります。このページでは、エンコーディングの設定を選ぶことができるほか、各アイコンに文字を付けるかどうかの選択や、Private Use Area（画面を見た第三者によるアイコンのアウトプットを禁止する）を使用するかどうかの選択ができます。私個人としては、デフォルト設定での使用をお勧めします。それで十分機能するからです。 「Download」をクリックすると、4つのフォーマット（SVG、EOT、TTF、WOFF）のファイルがまとめられたZipファイル１つと、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対応のナビゲーションの完成です。皆さんに気に入っていただけると嬉しいです！
仕入れたデザイン画像を稼働中のウェブページに適用するのに苦労することはありませんか？ウェブ開発のすべり出しが順調であるにも関わらず、デザイン設計のある部分でつまづくことは？ wireframes はあなたにとってコーディングによる設計よりも簡単？ローディング速度が遅くメンテの難しいwebの開発に満足できますか？ 多くのデザイナーたちが自分のデザイン画像を稼働中のHTML/CSS web ページに上手く変換できません（ 中にはコーディングすら全くしない人もいます）。大抵の場合、その理由はデザイン設計のアプローチと、1つの命令行を書き込む前のプロセスに対する考え方に問題があるからです。 噂とは裏腹にCSSは難しい言語ではありませんし、web ページやweb サイトの開発も難しくある必要はありません。多くの場合、問題は基礎構造の開発前に細かい部分を気にして混乱してしまうところにあります。またデザインのうち、コードを複雑化するような軽微で些細な部分の処理に捕われてしまうことも問題要因の一つです。 この記事は、http://www.onextrapixel.com/の許可を得て、翻訳しています。一部変更して翻訳している場合もあります。オリジナルの記事はここよりご覧いただけます。 デモにリンク オリジナルの記事 この投稿では、皆様に自由にダウンロードできる試供デザインを閲覧し、そのデザインを稼働中のweb ページに組み入れる方法を見ていただきます。この投稿では私は簡潔なコードを用いますが、デザイン・テンプレートに付いたオリジナルコード同様、ページを立ち上げるために私が使用したコードをダウンロードしていただけます。この投稿自体は、主にデザイン設計のための思考過程に重点をおいて進めていきます。 ダウンロード The Artificial Casting テンプレート 下のデザインをご覧ください。これらはSmashing Magazinesから無料でダウンロードできます（当ページの3つ目のテンプレート）。 テンプレートクリエーターによる設計デモをご覧になり、上にある私のデモと比較していただくことも出来ます。 私がこのテンプレートを選んだのは、見た目がオシャレで私がチェスが好きだという理由もありますが、何より典型的な3カラム・レイアウトで、開発にあたり2つ3つの難関と選択肢が用意されているからです。また最終ページに入れるか否かを決定する詳細な箇所が数個含まれています。 デザインから開発までの過程に対する一般的考え Artificial Casting テンプレートの説明に入る前に、開発にあたってwebサイト全てに共通する2つ3つの事柄を考えてみましょう。 好むと好まざるとに関わらず、web ページは全てボックスを使って開発されます。HTMLの全要素はボックスを持ち、ボックスは CSSボックス・モデルをもとに形づけられます。隣同士や上下に並ぶボックスもあれば、他のボックスに包含されているものもあります。デザインが箱形でなければならないということではなく、開発時に作られるボックスについて考える必要があるということです。 最も上級なレベルでは、2つ3つの大ボックスで大枠のレイアウトが構成されて、デザインの詳細はその大ボックス中の小ボックスに入ります。これらの長方形ボックスを頭で思い描くことは、デザインのどの部分がボックスに上手くフィットして、どの部分をボックスから外すべきかを見定めるのに役立ちます。まずは、これらの大レイアウト・ボックスについて考えましょう。細かい部分を見て内側から外側へコーディングせず、外側からのコーディングを行います。 画像とHTTPリクエストは、webページのローディングを遅くする大きな要因の一つです。デザインを考えるにあたって本当に画像化するべきもの、またコードを用いて簡単に再現できるものは何かについて思案することは賢明です。一つ画像を少なくすることで、ファイルサイズもサーバー上のリクエスト数も縮小するため、 画像を最適化することができます。 私はただの大きな色の集合体に過ぎない、webページ上の画像を見かけることがよくあります。そもそも色の集合体が画像化されなければならない理由はないのです。私たちは画像を眺めて、どうやって必要とする画像全体のファイルサイズを縮めるかについて考えながら、使用する画像の数を減らしています。 レイアウト テンプレートに関してまず考えたいことは、レイアウト全体の概観についてです。デザインを大ブロックに分けようとしていますが、この場合、まず上下方向に行うのが最も簡単でしょう。デザインを見ると3つの帯がページを横切っているのが分かります。この帯がヘッダーやコンテンツ、そしてフッターに当たるものです。 フッター 最下部に3つの情報ボックスとテキストを含んだ分かりやすいフッターがあります。とりあえずフッターの中味は気にせず、先ず上部からフッターを切り離すためにどこで線引きするかを決めます。 この端の部分を画像化しますが、それをフッターもしくは上のボックスのどちらに入れるかを選択できます。どちらでもOKですが、私はイメージをフッターに入れることにしました。 この記事で触れませんが、最終的にはサイトにわたって繰り返されるページのある部分を別のファイルで管理するために、PHPを含有したファイルの類いを使用するのが妥当でしょう。この画像は当サイトの全ページ上に登場するため、私にとっては最終的にfooter.phpファイルになるフッターに置くほうが合理的なのです。 フッター内にある他すべての詳細については、基礎レイアウトの作成中はそれについて考える必要はありません。 コンテンツ 本文を3つのカラムと２つのサイドバー、そしてその間にあるメイン・セクションに分けてフッターの真上に置きます。3つのカラムについては後ほどもう少し詳しく触れます。今は内側を3つのカラムまたは3つの小ボックスに分割される、一つの大コンテンツ・ボックスについて考えるだけで十分です。 フッターの場合と同じく、コンテンツ・ボックスの初めと終わりをどこにするかを決めなければなりません。ここに開発上の問題のタネとなる2つの要素があります。複数のカラムおよびコンテンツ全体をそれぞれまたいでいるログイン・ボックスとチェスの駒の画像はヘッダーに属します。 オリジナルのテンプレート開発にあたって、両者はヘッダーの一部として設定されましたが、私はそれらをコンテンツエリアに置くことにしました。フッターの場合と同じく、この2つがサイトの全ページに登場させるべきかを考えました。確かにテンプレートのデザイン時に設定すればそうなっていたでしょう。しかし、2つがページ毎に変わるような柔軟性を持たせるのも良いだろうと考えました。 おそらく、サイト内の別のセクションでは別のチェス駒画像が登場し、ログイン・ボックスは一部のページあるいはセクションにのみ登場するでしょう。 コンテンツエリアにインクルード・ファイルは使いません。ページ毎に変わるセクションはここだけなので、サイトにわたって変化させたいデザイン素材は、このボックスに入れるのが妥当なのです。しかしここからチェス駒の画像をコンテンツとヘッダーの両方に置くため、どのようにコーディングするかを把握しておく必要があります。 ヘッダー ここではヘッダーについて紹介します。消去法からするとヘッダーにはロゴやナビゲーション・バー、そしてその背後に勾配の背景が入ります。ヘッダーとコンテンツエリアの間を、ページを横切る細いラインで仕切ります。このラインもページ毎に変化しないため私はヘッダーに入れています。ヘッダーは最終的にサイトの全ページに入る header.phpファイルになります。 レイアウトの作成 HTMLを以下のように組み立てることができます。 先述したメインボックスやビルディング・ボックスは、それぞれ セマンティック id を適用した divになります。 コンテンツエリアの中に3つのカラムが入っているのが分かるとおり、コンテンツ div は3つの追加 divsを持っています。一方がより重要であることを反映させるためによくされることですが、２つのサイドバーをそれぞれ「プライマリー」「セカンダリー」と名付けました。 チェス駒とログイン・ボックスの画像をコンテンツ div の中に追加しますが、 ログイン・ボックスをカラム構造の枠から独立させるために、 3つのカラムdivsの外に置くことにします。 ここからはCSSについて。 CSSでサイトのレイアウトを作る際の鍵は、CSSの不要な場合を見定めること、そしてフロートを要する場所がわずかであるという理解です。HTMLでは、コンテンツ div はそのままヘッダー divの真下に置き、 フッター div はそのままコンテンツdiv の下に置きます。これは div のデフォルト動作で、それが起こるために何もする必要はありません。 このデフォルト動作を変えたいので、コンテンツdiv内の各 divs をフロートします。これら3つのdivs がお互いの下に来ないように、お互いを隣り合わせにして配置し各々左方向にフロートするようにします。 デフォルト動作を変更させたら次はフッター divの調整を行います。 コンテンツ div内の内容全てがフロートした状態にあるので、 フッター divは自動的にその下に来ることはありません。 clear: both を追加することで（ここでは clear: leftを使っていますが）フッター div を強制的にコンテンツ div下に持っていきます。 必然的により多くのCSSが最終的には必要となります。上記のコードを試すと、どの divs にも幅や高さ指定、またそれらを設定するコンテンツがないため内容が乏しいのが分かります。そこにはこれから中味を埋めていく空っぽの構造体があるだけです。 フロートされた3つの divs の合計幅がページ全体の幅を越えないようにしなければいけないため、それら3つの幅設定には特に注意する必要があります。レイアウトに際してのもう一つの決定事項である全体の幅について、まだ詳しく述べていないことにお気づきでしょう。 固定もしくはリキッドのレイアウト デザイン・イメージを一見しただけでは、デザインが 固定されているのか流動的なのかが分かりません。事実どちらも可能なのです。テンプレートに付いているコードを見ると、3つの水平の帯（ヘッダー、コンテンツ。フッター）がウィンドウの端まで伸びながら、帯内のコンテンツ全部がページの中央に来るように設計されています。同じように私たちもしてみましょう。 全てを固定して中央に持っていきたい時は、div でその周辺を包んで幅を確保し、その div で包んだ部分を中央に据えます。おそらくCSSでページを中央に置く方法が皆さんには馴染み深いでしょう。 ページ全体を中央に置く方が簡単と言えば簡単なのですが、ここではそれを行いません。3つの水平帯の背景をブラウザの端まで伸ばしながら、帯内の内容全てをウィンドウの中央に置きます。私たちが目指すのは リキッドな背景と固定したコンテンツですが、幸いにもSoh Tanaka氏がすばらしいとても簡単な解決方法を提供してくれました。 ただCSSで一つのクラスを作り、それをHTML構造内にある選択可能なdivsに適用するだけでよいのです。 センタリングに精通している人なら、上のコードが通常 wrapper divに加えるものであることにお気付きになるでしょう。クラスとしてCSSを設定すれば、それが適用される箇所での柔軟さとコントロールが確実になります。新しいHTMLはこのようになります。
この記事は、http://www.onextrapixel.com/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 フォトショップは通常、画像修正で使われることが多いですが、時とともにほかの分野、例えばイラストレーションやコンセプシャルアート、グラッフィックデザインまたはウエッブデザイン等でも一般的に使われるようになりました。したがって、フォトショップはクリエイティブな仕事で多用されるソフトということになります。しかし初心者にとって、最初は同じような間違いを起こしやすいし、また使い方を間違っているため時間のかかる方法でもあります。 フォトショップ初心者も、もう何年もフォトショップを使用している人も、この記事からフォトショップの基礎知識の幅を広げられる秘訣とそれをどう使用するかについて学べます。 フォトショップの基礎知識を広げよう １、まず、レイヤーパレットは見やすいように整理して広げておきます。そうすることによって、プロジェクトに変更を加えるとき一番作業しやすくなります。 ２、画像に調整をきかせるときは画像そのものは触らず調整レイヤーの上から作業します。そうすれば後で調整レイヤーを消去することも、その調整レイヤーをほかのレイヤーに使用することも変更することもできます。これを有効に活用します。 ３、快適に作業を進めるには、レイヤー達が混乱しない様にします。全てのサンプルレイヤーにチェックを入れ、調整レイヤー、マスク、そして修正ツールを使います。そうする事で、間違えるのを心配せずにすみます。 ４、ブラシの使用に関してですが、ブラシオプションよりブラシのサイズや硬さを正確に合わせるには時間がかかりすぎるし、また不可能に近いです。マック使用の場合、CtrlとAltを押し水平にドラッグしながらサイズを合わせ、垂直にドラッグしながらブラシの硬さを合わせます。ウインドウズでは、Altを押しながら右クリックでマックと同じ要領でブラシの調節を行います。実際のサイズとシャープネスのプレヴューは赤色で現されており、もっと簡単に素早く操作できます。 ５、切り抜きツールを使用する場合は常に切り抜きピクセル消去の所はチェックマークを入れないでおきます。新しいオプションとして混乱しないで作業すというよりは、囲んだ画像の外枠の画像を消去せずに隠しておく為です。制作終了後にもう一度このオプションををチェックして切り抜き画像の最終サイズを決めれば記録保存スペースの使用を減らすことができます。 ６、選択ツールを上手に使用するには、何種類かの違った選択ツールを併用して調整する方法が一番です。まずはじめは投げなわツールかマジックワンドを使用して簡単な選択をしておき、境界線の絞込みを使って縮小します。 ７、レイヤーマスクを使う時に、いつも境界線のフェザー効果をかける必要はなく、マスクのプロパティーから素早くシャープネスとソフトネスを調整することができますし、いつでも最初のマスクをかけてない状態に戻るという選択も可能です。 ８、他のアーティストから学んでみましょう。素晴らしいアーティスト達を見つけ、彼らの作品集を見たり、チュートリアルや彼らの技を見ていろいろ研究してみましょう。そうすれば、刺激されるだけでなく、探索して学び自分のスタイルを改善することができるでしょう。 ９、マウスを使うのはやめて、タブレットを使いましょう。イラストレーター、デザイナー、リタッチャー何であれ絶対タブレットを使って下さい。仕事が早くなるし、もっと感覚的で正確に作業できて、（特にブラシツールを使用する時）圧力、傾斜、回転等をコントロールできるという長所もありますし、なんと言っても手に感謝されることでしょう。 １０、スケッチをすることに時間を費やして下さい。まず何を制作するかというはっきりしたアイデアを持ち、下書きのために、時間を浪費しないで下さい。アイデア、色その他を決めたスケッチを描き、そして迷うことなく最終のイメージにたどり着きましょう。 特定の分野の汎用知識 １、イラストレーション、マットペインティング、コンセプトアート。。。まず５０％のグレーの背景よりスタートします。その理由は単純です。光と影の関係で言うと、白色の背景で始める時、白色は１００％光なので中間の明暗と影を正確に補正するのは難しいです。なので５０％グレーの背景ではじめて、基本の色や形を追加し、それにもっと自然に明暗をつけることができます。 ２、グラッフィックやウエッブデザインでは、無限の可能性があるスタイル効果を有効活用します。シンプルレイヤー、形、テキストなどは、スタイル効果をかけることで見栄えが良くなるし、このレイヤスタイルを他のレイヤーに使用することもできます。 ３、活字体アートには、フォトショップのCS6の3Dテキスト操作オプションが一番です。劇的に改良されたので、想像しているものが何でも、数回の操作で出来上がります。 ４、ペインティングでは、ブラシを使いますが、全部のブラシを使う必要はありません。一番良い方法は、 似たような技術を使うことで、作品の見た目に統一感を出すことです。もし、たくさん違った種類のブラシを使うと、例えばイラストレーションでいうと、力強さや一貫性を失うことになります。 結論 フォトショップを使用するうえで一番重要なのは、オプションを最大限に活用し、混乱してしまわずに作業する方法に慣れてしまうことで、そうすれば制作中はいつでも変更可能で、編集の途中で何かを無くしてしまうという事もありません。 もしあなたがフォトショップ初心者でも熟練者でも、これらの知識を自分の作業方法に取り入れることをお勧めします。そうすれば、同じ作業を短い時間で、またもっと素早く編集出来る事でしょう。 フォトショップをどう使用するかが全てではありませんが、正しい使い方を知る事は重要な事です。
この記事は、http://www.onextrapixel.com/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 これまでにもドラッグ＆ドロップスタイルの開発は行われてきましたがjQueryを始めとするオープンソーススクリプトを手掛けるプログラマーの増加に伴い、古くからのやり方が激変していくのも至極当然のことなのかもしれません。JavaScript libraryは非常に適応性も高く、次世代のWEBに対応する為に様々な改善を案提供しています。 今回は自由自在に動かせる非常に動的なドラッグ＆ドロップボックスのスクリプトをご紹介します。プロセス全体としてはjQueryの機能を搭載し、細かい部分でGeneral Public License v3のスクリプトを利用していきます。殆どのスクリプトが既述のものなので、大幅な時間短縮が可能かと思います。ちなみにこのドラッグ＆ドロップライブラリのコードは今度もプロジェクトやアプリで再利用が可能ですよ。 コンテンツの下準備 まず手始めに小さなプロジェクトサイトを開発してみましょう。今回はindex.htmlの他にjsファイルとcssファイルを使用していきます。そして今後のプロジェクトに活用出来るように、また理解し易いように極めてシンプルなコーディングにしてあります。 下記が基本となるHTMLファイルです。ヘッダーにはメイン部分のjQuertyを引用することになるGoogle Codeサーバを含め、全部で３つのスクリプトが指定してあります。これによりページロード時のHTTPリクエスト削減につながるので、訪問者にとっての時間短縮など負担を軽減させることが出来ます。それからドキュメントに基本的なレイアウトを施す為のstyle.cssファイルも指定してあります。 ボディ部分は２つのDIVタグで大分していて、それぞれドロップボックスを含有しています。コードは比較的単純で、どの部分が何に使用されるのか一目瞭然なのではないかと思います。ボックス内にはそれぞれ「handler」クラスと「handler2」クラスを付けたH2タグが既述されています。ボックスの動作は個々に異なるので、ドラッグして関数が呼び出された時にこのクラス名が重要になってきます。 CSSスタイリング HTMLはとてもシンプルなものにしたので、そんなに時間を取られることもなかったのではないでしょうか。基本的なマークアップ言語をご存知ならばCSSの方も余裕だと思います。今回は複雑なスタイリングはせず、大体が個々のパディングやマージン、色の指定をしているだけです。 こちらの「body,html」セレクタはデモページ用です。インデックスファイル内にはドラッグ用のボックスが２つあるだけなので、見栄えがよくなるようにしています。またこうすることによりCSSプロパティはデザインフィールを残したままスリム化することが出来ます。 「.dv1」クラスと「.dv2」クラスでは絶対配置指定させています。本当はこうする必要もないかもしれませんし、こうしない方がいいのかもしれません。けれど今回のデモではページをリロードした時に元の場所に戻ってくれるので、これでいいのではないかと思います。それと、２つのクラス間でフォントサイズとパディング幅が異なるのにもお気付きいただけるのではないかと思います。２つのボックスをはっきり区別する為にこういう工夫がしてあります。 この他にはDIVタグ内部やH2タグは大体同じです。もし今回のコードをコピペして使用したい場合は、実行する前に１つ１つ名前など確認してから使ってくださいね。ドラッグ用のボックスが重複しないように、クラスではなくてIDを使用した方が賢い方法と言えるかもしれませね。 JavaScriptの解説 これらのボックスがうまく動作する為に必要なコードは、２つのJavaScriptファイルに全て含まれています。本日はちょっと本来の目的から外れてしまうのでjQueryの生のコードの詳細説明まではしないでおきますね。１つ目に注目したいファイルは「jquery.dragndrop.js」です。 このファイルの中に関数が幾つかありますが、中でも需要なのは22列目のDragsです。 ここではDrags用の戻り変数を設定しており、また初期データ型も設定しています。こうすると他の関数とオプションをやりとりする時にコード内でのスペースを節約出来るので、jQuery開発者間でよく用いられる手法です。内部ではドラッグボックス間でやりとりされる可能性のある各オプションを拡張する為の変数を設定しています。 それに続けて変数「dragndrop」用に設定した２つのイベントハンドラ関数が記述されています。イベントパラメータが渡されると「drag」も「drop」も関数としてコールされます。このイベントはドラッグしようとボックスをクリックする時と、リリースした時に発生します。 これで関数が各オブジェクトのCSSポジショニングを操作しているのを確認することが出来ます。JavaScript関数は定義済みのスタイルも上書きしてしまうので、絶対配置外に変更されてもボックスには影響を与えません。あとは関数のハンドラを確認したり、お化粧用のスタイル変更用コードなどが書かれています。具体的には透過度の低減、フォントスタイルや色、新規段落の追加などです。 生のDrag/Drop関数 ２つ目のファイル「fn.js」はそんなに複雑ではありません。コア関数をコールする為のオブジェクトやドキュメントの読込が完了したらjQueryを介してチェックしています。先ほど既に取り上げたDrags関数のインスタンスを２つ定義しています。 「.dv1」と「.dv2」クラスを含んだ２つのブロックがありますよね。もしドラッグ可能なボックスは１つだけでよかったら、スペースを確保する為にも後半のコードは削除してしまってください。また新しいボックスを追加しても構いませんが、新しい関数をこのファイル内に設定する必要があります。 初めにセットするのは先に取り上げた変数名に基づいたオプションです。定義それぞれで最も重要なのはハンドラ名を設定することです。ハンドラ名は文書内の特定個所をクリックするかリリースした時にjQueryにイベントハンドラを伝える為に使用されます。クラスやIDでも構いませんし、DOM指向でもあなたのやり易い方法で大丈夫です。 １つめの関数内に、「onMove」と「onDrop」という２つのイベントハンドラがありますよね。両方とも変数「e」として現在のイベントに渡す新しい関数をコールします。そのあとはボックスが動くたびに、HTMLの内部を操作して変更しています。これはシンプルなjQueryイベントを使ってどれだけコントロールすることが出来るのか実証するのに一役買っていると思いますよ。 ２つめの関数はプロパティもとても少なくて、「zIndex」と「opacity」を呼び出しているだけです。もしいろいろ追加する時は、プロパティ設定をチェックするために先述のJavaScriptファイルも編集する必要がありますのでお気をつけくださいね。一例としてはどっちのボックスが移動しているかによって、フォントスタイルや高さ・幅の変数を渡すことが出来たりします。結構面白いですよ。 終わりに・・・ オープンソースコードにちょっと手を加えるだけで、こんなに面白いドラッグアンドドロップインターフェースを開発することが出来ます。jQueryはせっかちな開発者にも膨大なベネフィットを提供してくれており、のバックエンドインターフェースはデータを定義する新しい方法も示しています。 というのも、イベントベースの関数だけではなくてドラッグボックス間で新しい変数やりとりさせていますよね。これは様々な可能性を示唆していると思いますよ。今回のデモではこのコードを使ってどんなことが出来るのか簡単なアイデアを提供しているに過ぎません。もしもっと深く探求してみたくなったら、jQuery Documentationをみてみてくださいね。
本日はシンプルなパララックス対応のコンテンツスライダーをご紹介したいと思います。CSSアニメーションを使ってスライダー内の個々の要素をアニメーション化させます。それからスライダーの背景もアニメーション化させることによりパララックス効果を実現させます。 このアイデアはKendo UIのホームページを基にしています。この効果に対するリクエストやご質問を何件かいただいたので、再現してみることにしました。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ スライダー内は複数のスライドで分かれていて、それぞれのスライドにはH2タグ、Pタグ、リンク用Aタグ、画像用DIVタグが含まれています。 このスライダーで大切なのは、各要素ごとのアニメーションです。それぞれのスライドに「direction class（方向クラス）」を与えることにより、個々の要素の動作を制御します。方向クラスにはスライド可能な向きに基づき４つの種類があり、例えば右にスライドさせるものには「da-slide-toright」クラスを適用させると言った具合です。 .da-slide-fromright .da-slide-fromleft .da-slide-toright .da-slide-toleft これらの方向クラスを割り当てることによって、個々の要素のアニメーションの制御が可能となります。 オプション csliderプラグインをコールすれば以下のオプションも使用可能です。 パララックス効果は、スライダーの背景を反対方向に移動させることで実現しています。「bgincrement」を使えば、何ピクセル移動させるかと言う事まで指定することが出来ます。 デモ Demo 1: デフォルトのオプション Demo 2: スライドショー（別のタイプのアニメーション） ☆CSSアニメーションやトランジッションをサポートしていないブラウザ用に、簡単なフォールバックを使用しています。 是非色々試してご活用くださいね。
今回のチュートリアルでは動きのある画像スライダーをご紹介したいと思います。メインの選択画像をスライドさせる時に、立体感を出す為複数の背景レイヤーにパララックス（視差）の原理を使用しています。こうすることにより、画像が切り替わる時に素晴らしい奥行き感を実現することが出来ます。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 デモ内で使用しているきれいな画像はTetsumoさんのFlickrからお借りしています。 それでは早速始めましょう！ HTMLマークアップ HTMLの構造としては、まず一番外側の大本のコンテイナーに「pxs_container」というクラスを設定しています。パララックス効果を実現させるためには３枚の背景が必要になるので、背景にもそれぞれラッパーを追加します。奥行きを持たせる為にそれぞれの背景画像が移動するのを「見える」ようにしたいので、透過度を加えます。 それからローディング要素と、フルサイズ画像とサムネイル画像用にULリストを２つ加えます。最後にナビゲーション要素も追加します。 さて、次にスタイリングを見てみましょう。 CSSスタイリング まずは大本のメインコンテナーの設定からです。スライダーの幅はページ全体を利用したいので１００％に設定します。メインコンテナー内部の要素は全て絶対配置させるので、メインコンテナーは相対配置にしておきます。（内部の要素はページに対してではなくコンテナを基準にして配置したい感じです。） パララックス用の背景画像をラッピングしているDIV要素には、「背景画像繰り返し」の設定をします。ここで使用している画像はシンプルなグラデーション画像です。 ラッパー内部のDIVタグは、以下のスタイルプロパティを共通で設定します。 幅はJavaScriptで動的に設定します。背景DIVタグ１つ１つにそれぞれ異なる背景画像を割り振っています。 残りの要素も動的に設定するのですが、それはまた後でご説明するとして、まずは他の要素をのスタイリングを確認しましょう。 下記のラッパーは、初めは見えない状態にセットしてあります。 この中には最初にロードしておきたい要素全てが含まれていて、ロードが完了してから初めてラッパーとコンテンツが表示されるようにしたいのです。 ２つのULリストもリセットしておきましょう。 このスライダー用リストでのこだわりは、LI要素内のコンテンツをページ幅全体に表示させることです。なので実際画面上で表示されているスライダーは、１つのLI要素の全体像なんです。ULリストの幅は、Window幅と画像の数に応じて動的に変化するようにしてあります。LIタグを「float:left;」に設定して動的なUL幅を用意することで、LI要素はきちんと横並びに整列してくれます。 LIタグ内のスライド画像は、左右にオートマージンを設定して水平方向でセンタリングさせています。 透明のボーダーとボックスシャドウを追加して、画像の周りにガラス枠があるように演出します。 サムネイルリストも絶対配置です。「left:50%;」を設定しているのは、JavaScriptにより動的幅やレフトマージンが負の値になってもきちんとセンタリングさせたいからです。 サムネイルの周りには白い枠線を加えて、自然なボックスシャドウも追加しています。 選択されているサムネイル画像は、不透明にしてクッキリ表示させています。 ２つのナビゲーションスパンには以下の様に共通の設定を施します。 それから矢印を加えます。 画像の左端と右端に表示させたいので、左矢印（pxs_prev）右矢印（pxs_next）要素も動的に設定します。 最後にローディング部分がきちんと真ん中に表示されるように設定してお終いです。 これでスタイリングは完成です。最後にjQueryを仕上げましょう！ JavaScript 今回のスライダーで大切なのは勿論画像をスライドさせることなのですが、それだけではなくて奥行きを持たせる為に３枚の背景画像をそれぞれ別々にアニメーション化させる必要があります。例えば次の画像に移動する時、スライダー用のULタグの左の値はWindow幅分マイナスに差し引かれます（すなわちこれが一つのLIタグ分の幅と言う事になります。）。それから一番手前の背景用のDIVタグもアニメーション化させるのですが、これはWindow幅の半分しか動かしません。２枚目の背景画像はWindow幅の1/4だけ・・・とそんな感じになります。なので奥の背景画像ほど、動く幅は少なくなるというのがパララックスの原理の基本です。 スクリプト外でプラグインを作成したいので、先にいくつかのオプションを定義しておきましょう。手始めに最も重要な要素をキャッシュします。 スライダー用には以下のスクリプトを追加します。 スライダー用のオプションはこんな感じになります。 auto： 周期的にコンテンツをスライドさせる秒数（０の場合は自動再生は無効） speed： 各スライドのアニメーション速度 easing： スライドアニメーションのイージング（緩和）効果 easingBg： 背景アニメーションのイージング効果 circular： 円形スライダー thumbRotation： サムネイルがランダムに回転 以上で完成です！今回のチュートリアル、お楽しみいただけましたか？是非活用してみてくださいね。
今回のチュートリアルでは画像を使用せず、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 …]等を使って１つずつトリガーを立てることも出来ますが、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というメソッドが世に出てからしばらく経ちますが、一般のウェブサイトなどで活用されたわけでもなかったが、ここ最近になって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が動作する為の手助けとなるオブジェクトが２つあります。それが「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を介してサーバから情報を取得したり送信したり操作する為に使用可能な事前定義された関数があります。 １つ目の事前定義プロパティは「onreadystatechange」です。何をするプロパティかと言うと、もうそのまま読んで字のごとくなのですが「readyState」が変更されると、自動的に保持している関数をコールしてくれます。「readyState」は単に「処理中」「ダウンロード中」「完了」といったオブジェクトの状態を示します。 xmlhttp.onreadystatechange = function(){ // This code will
私はフロントエンドディベロッパーとしての仕事を、いかに簡単にそして効率よく行うか常々考えてきました。けれど最も身近な存在である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書き過ぎ」という問題があります。１つのシンプルなブログポストにしては、コードが若干複雑過ぎるのです。ここがLESSの目の付け所で、LESSを使えばもっとプロセスを単純化させることが出来ます。 LESSとはCSSプリプロセッサーのことで、CSS言語をとんでもなく便利な機能満載に拡張してくれます。一度使い始めたらその凄さにビックリすると思いますよ。LESSには非常に多くの便利な機能が備わっているのですが、今回はその中でも３つの機能に注目したいと思います。 変数： @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の組み合わせを使って、スタイルコード（すなわちモジュール）を完成させましょう。先ほどの例のように、役割ごと細かくね。 スタイルコードのオーガナイズにこれほど重点を置くベネフィットの１つとして、様々なデザイン機能の分離が可能と言うことが挙げられます。この考え方でいくと、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：メインスタイルシート（上記含め、サイトのデザインに必要なもの） このレベルでのオーガナイズは、ページ数の少ないものや１ページのアプリにはやり過ぎです。けれど多くの異なるページを所有した大規模なプロジェクトでは話が違ってきます。これが更に大規模になったら、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のみを使用して、かなりイイ感じのスライディング・イメージ・パネルの作成方法をご紹介したいと思います。これはパネルに背景画像をセットして、ラベルをクリックすればアニメーション化されるというものです。ラベルにはラジオボタンを使用し、ターゲットはそれそれのパネル部分とし間接セレクタ（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は大分すると「ラジオボタンとラベル」「パネル用コンテナと各画像のスライス」「タイトル」という３つのパートから成り立っています。「cr-bgimg」クラスを割り当てたコンテナは各パネルを含有しています。更に各パネルは４枚にスライスされており、各スライスは正しい場所に配置されるようにSPANタグで囲まれています。すなわち１つ目のパネルは４枚のスライスから成り、１つ目のスライスは背景画像として最も左側に配置されます。２つ目のパネルも勿論４枚のスライスから成りますが、背景画像の配置場所は「次」の部分へと移行されます。 タイトル用のH3要素には２つのSPANタグがあり、１つはメインヘッドライン用でもう１つはサブヘッドライン用です。 それではCSSスタイリングに移りましょう！ CSSスタイリング ベンダープリフィックスは省略しています。ご了承ください。 私たちの目的は、第１にラベルでカバーしてラジオボタンを隠すことです。WEBブラウザ上でラベルをクリックすれば、それぞれのチェックボックスかラジオボタンが選択された状態になります。なので、インプットにIDを与えればラベルの「for = 参照ID」属性を使って、それぞれのインプットを参照することが可能となります。 次に全ての背景画像を適切な部分に配置すること。第３にラベルがクリックされたら、それぞれのスライス画像とタイトルがきちんと表示されるようにすることです。 それでは、まずは最も外側のコンテナのスタイリングです。白いボーダー線を引いて、ボックスシャドウでほんのり影もつけましょう。 きちんと目的のスライス画像とタイトルに辿りつくように間接セレクタ（general sibling selector）を使用したいので、ここでまずラベルを適切に配置しておく必要があります。z-indexを使ってレイヤーが最上部に来るようにし、トップマージンを350px確保して下の方に配置します。 ラベルに小さな円を加えて、ちょっとかわいくデコりましょう。疑似要素を使って丁度テキストの背後に来るように配置します。 パネル間にもちょっと細工を施してみましょう。ラベル用に別の疑似要素を用意して、パネル状に縦線を描きます。グラデーションを使っているので上の方に行くにつれ線が薄く消えていくよう見えるはずです。 最後のパネルに縦線は不要なので、幅を0pxにしています。 ラベルの設定が完了したので、安心してインプットを隠してしまいましょう。 これでラベルをクリックすれば、対応するインプットがチェックされた状態になります。では今度はラベルに間接セレクタ（general sibling selector）を使用して細工していきましょう。下記のようにコーディングすると、選択されたラベルの色を変更することができます。 それから円部分の疑似要素の背景色とボックスシャドウも変更します。 画像パネルのコンテナはabsoluteで絶対配置し、幅はいっぱいいっぱいに使います。このコンテナは「現在選択されている画像」に背景画像を設定する為、後程使用します。これはデフォルトとして何らかの画像が表示された状態を維持する為です。なので幾つかの背景プロパティを追加しておきましょう。 表示用の画像（パネル）は４枚に分割しているので、１つのパネルの幅は150pxです。（600÷4）。パネルはフロートで左に配置し、スライドインして来る時に余計な部分まで表示したくないのでオーバーフロー分はhiddenで隠します。 SPANタグで囲まれた各スライスはabsoluteで絶対配置し、左側-185pxに配置することにより最初は隠された状態であるようにします。 それから次に画像コンテナの背景と、それぞれの画像スライスの設定です。 ここで背景ポジションはパネルによって配置場所が異なるので、間違わないように気をつけながら設定します。 ラベルがクリックされたら、全てのスライス全てが右側へとスライドアウトするように設定します。 選択された背景画像は-150pxから0pxへとスライドインしてきます。 最後にH3のタイトル要素とSPANタグのスタイリングを行います。H3には透過度のトランジッションを適用させ、対応するラベル（インプット）が選択されたら透過度が０から１へと増加するよう設定します。 もしモバイルデバイスではラベルのトリックを使用したくなかったら、メディアクエリーを使って以下のように設定します。 これはとてもシンプルな解決方法なので、必要あらば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（縮小拡大） 今回はここまでです。みなさんのご参考になれば幸いです。
本日は、CSSの3Dトランスフォームを使って、3Dギャラリーを作ってみましょう！ 3Dトランスフォームを使用すれば三次元空間の設定が可能となり、単純な要素でも色々と面白い動きをさせることができます。またCSSトランジッションも併用すれば、３D空間での移動を可能にし、より現実的な効果を産み出すことができます。 今回実現したいメインアイデアは、真ん中に１枚そして両脇に２枚画像があり、それが円形のギャラリー形式に表示されるようにすることです。CSSでperspectiveを使用しているので、画像を回転させると側面の２つの画像は立体的に見えるかと思います。 尚、CSS 3D transformをサポートしているブラウザでないと動作しませんのでお気を付け下さい。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ 今回は以下の様なHTMLコーディングで構築されています。 またこちらがギャラリーを初期化するコードです。 オプション また、以下のようなオプションを加えることも可能です。 お楽しみいただけましたでしょうか？
CSS3は様々な可能性への扉を開いてくれました。今日はCSS3アニメーションを使い、スプラッシュとComing Soon（準備中）ページ効果の作り方をご紹介したいと思います。まるでシンプルな要素に命を吹き込んだかのように自由に動かす方法と、アニメーションシーケンスを実現していますのでお楽しみに。 １つ目のデモで使用しているかわいらしい靴の画像は、これまたかわいらしいAmira Almajidさんによるもので、画像のセットはこちらからご利用いただけます。 ※尚、アニメーションをサポートしているブラウザでのみ動作しますので、ご注意くださいね。 チュートリアルがあんまりにも長くなり過ぎないように、ベンダープレフィックスは省略していますので、こちらも併せてご了承くださいね。それでは早速参りましょうか！ この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 Demo 1 こちらのデモでは画像読込みの時間を確保する為に、アニメーション開始までにかなりのゆとりを持たせています。 １つ目のデモではアニメーション化させる要素が幾つかあります。今回のテーマは「Coming Soon（準備中）」です。 まずコンテンツ部分にメインとなるコンテナ（クラス：sp-container）を用意し、その中にサムネイル用の束をそれぞれ記述しています。それからメインのヘッドライン用の束も用意します。メインコンテンツエリアが表示された後に、E-mailアドレス入力枠をスライドインさせています。 HTMLマークアップ では、次はCSSのスタイリングを見てみましょう！ CSSスタイリング １つ目のデモの主な目的は、以下のようなアニメーションの連続を実現させることです。 fromBackを使ってサムネイル出現 fromBackを使って１つ目のH1タグの出現 fromBackを使ってサブヘッドラインのH2タグ出現 fadeOutを使って１つ目のH1タグとサブのH2タグの消滅 fadeOutを使ってサムネイルが順番に消え始め、fadeInColorで２つ目のH1タグを表示それからsizeDownMoveを使ってコンテンツを左に移動と縮小 slideInを使って矢印とサイドコンテンツをスライド それではメインのコンテナをセンタリングして、コンテンツはabsoluteで絶対配置しましょう。 ご覧いただいて分かるように、６秒後にコンテンツへ「動き」と「拡大」のアニメーションを適用させています。この辺のアニメーションはまた後で見ていくことにします。 矢印用のsp-arrowクラスには矢印を背景画像として設定し、absoluteで絶対配置しています。 サイドコンテンツのsp-sideクラスにはE-mailアドレス入力枠が含まれており、画面右側に配置されるよう設定します。 この矢印とサイドコンテンツはいずれもしばらく経ってからスライドインしてきます。 では次にヘッドラインのスタイリングに移りましょう。 それから入力枠とボタン用のラッピング部分ですね。 ではここで、メインコンテンツの内部を見てみましょう。まずヘッドラインのスタイリングですが、こちらは背部から現れてきて、しばらくするとフェードアウトするように設定します。 ２つ目のヘッドラインは、１つ目のヘッドラインが消えた後にただフェードインしてくるだけです。 サブヘッドラインは１つ目のH1タグ同様現れては消えるようにします。 お次はサムネイルを格納している束の設定です。 サムネイル用のSPANタグは、現れる時に０から１へと拡大させることにより背部から登場してきたように演出しています。こちらも暫くするとフェードアウトしていきます。 それから各サムネイルが順番に現れては消えるようなシーケンスを作成したいと思います。なので行ごとに、サムネイルを囲んでいる子要素（SPANタグ）１つ１つ順番に時間差設定を施していきます。各行は上の行から順に時計回りに表示されるようにしたいので、行の順番に注意して下さいね。 ここで少し疑似要素を使って、各サムネイルの背景に円が表示されるようにしてみましょう。 お待たせしました。ここからがアニメーション部分です。 １つ目のアニメーションは透過度を１から０に変化させることにより、該当要素をシンプルにフェードアウトさせています。 fadeInColorを使って該当要素をフェードインさせ、またRGBAで背景色の設定も行っています。けれどRGBAの透過度レベルは、要素そのものの透過度が０．５に達した時点でまだ０のままです。こうすることにより要素を先に表示させ、後から背景がフェードインしてくるように細工しています。２つめのヘッドラインにも同様の設定を施しています。 次のアニメーションも極めてシンプルで、該当要素を左側からスライドインしてくるように見せています。 sizeDownMoveは該当要素を縮小させ、左（100px）から左（0px）まで移動させています。ここでtranslateを使用することも出来るのですが、要素をabsoluteで絶対配置させているので左側でちょっと動かす程度にしておこうかと思います。 次のアニメーションは、サイズを０から１に拡大することにより要素が後方から現れて来るよう見せ、同時に透過度も０から１に変化させています。 これで１つ目のデモ用のスタイリングは完成です♪次はもっとシンプルなのでご安心くださいね。 Demo 2 今度は心にグサッとくるメッセージが連続して現れるスプラッシュページなんていかがでしょうか。今回のデモでは単純にボカシ効果を加えつつ、次から次へとメッセージが表示されるような効果を実現させています。 HTMLマークアップ 今回も先ほどと同じ様な感じでコンテナとコンテンツ用にDIVタグを用意し、更にその内部の各メッセージ部分にはframeというクラスを与えています。それに加えて一番最後に表示される地球とリンク用の要素も用意します。 では早速スタイル設定を見ていきましょうか。 CSSスタイリング ヘッドラインはそれぞれ画面上でセンタリングさせ、flurFadeInOutというアニメーションを使って現れたり消えたりさせています。 それぞれのメッセージに時差設定をします。 最後の１つはアニメーション化させてず、代わりに含有しているSPANタグを順番にアニメーション化させています。 地球は実は背景画像であり、abosoluteで絶対配置しています。他のアニメーションが全て完了した14秒後にフェードインさせます。表示画面いっぱいに広がるよう拡大させています。 「join us」リンクは円形の要素で、回転しながら現れてきます。 ここからはアニメーション設定です。 １つ目のアニメーションは、現れては消えるメッセージ用のアニメーションです。text-shadowとthe scaleを巧く使ってボカシ効果を演出しています。 次のアニメーションも大体同じなのですが、今度は最後のメッセージ用で消えずに残ったままにしています。 地球用のアニメーションでは、画面一杯まで拡大させているのと、透過度を始めは増やしてそれから減らしています。 次のアニメーションはリンク用です。回転しながら現れてくるというものですね。 Demo 3 ３つ目のデモは商品やアプリを紹介する時に使えるようなアニメーションで、テキストメッセージが色んな動きを見せてくれます。 HTMLマークアップ またこちらも同じような感じでコンテナとコンテンツ用にDIVタグを用意し、更に右側用の要素と左側用の要素をそれぞれDIVタグでラッピングさせています。その狙いは右側と左側とできっちりと分けてテキストに動きを加えたいからです。 ではここからはスタイル設定です。 CSSスタイリング まず真ん中の縦線用の疑似要素を持たせたコンテンツエリアをアニメーション化させたいと思います。まるでそれが「開いて」そこからテキストが流れ出てきているかのように演出します。それから縦線の左側で連続してテキストが右からスライドインしてくるように見せます。同様に右側もで、こちらは左からスライドインさせます。sp-midクラスを適用させたSPANタグのフォントは少し大きめにしてあり、他のテキストが消え去った後でもその場に残るようにしています。２つの大き目フォントのテキストを上に移動させ、コンテンツエリア全体をギュッと詰め寄らせています。（高さを減らすことにより縦線自体も短く変化します。）最後にサインアップ用のボタンを出現させています。 コンテナ部分の幅と高さは固定します。コンテンツのラッピングはまずアニメーションのopenで出現させ、それからaqueezeを適用させることにより高さを減らしています。後者の方は他のテキストが全てフェードアウトしてから発生させる為、開始時間はかなり遅めの設定です。 真ん中の縦線は疑似要素を使って表示させています。 ヘッドライン用のラッピングではoverflowはhiddenにしてあります。こうすることによりスライドさせてもオーバーラップは見えないよう保障されます。 H2要素は内側にSPANタグを含有しており、以下のようなスタイル設定を行っています。 「sp-top」と「sp-bottom」は左からスライドしてきてから消滅します。そして「sp-mid」はフェードアウトする代わりに上に移動します。 右側でも同様の効果が現れるように設定します。ただこちら側は左から要素がスライドしてきます。 sp-midクラスを持った２つの要素が上に移動した直後に、ビックリマークがクエスチョンマークを上書きしたように見せる為、クエスチョンマークをフェードアウトさせてビックリマークを出現させています。 「sp-full」でラッピングされた最後に現れるテキストはフェードインさせて、サインアップリンクの方はズームインもさせています。 そしてここからはアニメーションです。 １つ目のアニメーションはコンテンツエリアを「開く」ことです。ただ単に高さを伸ばせば完成です。 スケーリング用のプロパティを使用していないので、squeezeアニメーションは実際は何もスクイーズしていません。この効果を適用させる時にコンテンツエリアにまだテキストが残っているのでスクイーズはさせず、ただ高さを減らすだけに留めています。 次の２つのアニメーションは要素をフェードイン、フェードアウトさせているだけです。 slideLeftとslideRightはtranslateを使用することにより反対側に要素を移動させています。 moveUpは要素を上に持ち上げています。 最後のアニメーションはscaleを０から１に変更することにより、要素をズームインさせています。 これで完成です！みなさんのお役にたてば幸いです。
CSS3が秘めた可能性にみなさんの注目も集まっているかと思いますが、本日はCSS3ボタンの実験をお見せしたいと思います。今回のアイデアは「様々なスタイル、マウス オーバー効果、アクティブステータスを持ったアニメーションリンク要素を作成する」というものです。 今回デモで使用しているアイコンはwebiconset.comから、またシンボルフォントはJust Be Niceからお借りしています。 どんなHTML構造なのか、「ノーマル」「マウス オーバー」「アクティブ」と各ステータス時のスタイリングはどうなっているのかと言うことを、１つ１つのデモで確認しながら見ていきたいと思います。 ※アニメーションやトランジッションは、CSS3のプロパティをサポートしているブラウザでのみ正常に機能しますのでご留意ください。 あんまりギチギチに書き込みたくないので、CSSのベンダープレフィックスは省略しています。ご了承くださいね。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 Demo 1 １つ目のデモでは、それぞれ別々のコンテンツを持った大きなボタンを作成しています。ボタンのコンテンツは左側に「アイコン」と「本文」、右側に「矢印」、そしてマウス オーバー時には価格が表示されるようになっています。 HTMLマークアップ マークアップ構造は極めてシンプルで分かり易いもので、アイコンはimgタグで囲み、他の要素はspanタグで囲んでいます。 CSSスタイリング スタイリングでは、マウス オーバー時にアニメーション化させたい要素に、適切なトランジッションが適用されているかどうか注意する必要があります。ここでは価格部分は透過度を０にすることで見えなくしており、複数のボックスシャドウを適用することで、より現実的な効果を作成出来るようになります。 ボタンをマウス オーバーした時にはボックスシャドウを変更し、価格を表示させてアイコンをフェイドアウトさせています。 アクティブステータス時には、あたかもボタンが押されているかのような効果を出す為インセットシャドウをセットしているのと、右側の矢印アイコンは肥大させています。 Demo 2 ２つ目のデモは１つ目とよく似ているのですが、別の効果を適用させています。 HTMLマークアップ HTMLのマークアップは１つ目のデモと同じです。 CSSスタイリング スタイル設定も１つ目のデモとほぼ同じですが、色を変えてあります。それとマウス オーバー時に少し違う効果を与えています。価格部分はノーマル時「０」の設定からオリジナルサイズまで戻しているのと、アイコンは消滅、そして矢印のspanタグは背景色が赤に変わります。 アクティブ時も１つ目のデモとほぼ同じですが、やはり色を変更しました。ボタンを押すと、矢印アイコンが回転するようにしてあります。 Demo 3 ３つ目のデモでは全く違う効果に挑戦しています。ボタンがマウス オーバーされると下に展開し、そこに新たなメッセージが表示されるようになっています。矢印のアイコンは少しだけ回転させています。 HTMLマークアップ HTMLのマークアップも、今までの２つとは若干異なります。スライドダウンされた場所に表示されるメッセージには「a-btn-slide-text」というクラスを与えています。 CSSスタイリング ボタンマウス オーバー時にアニメーションで追加メッセージを表示させる為に、ノーマル時にも一定の高さを維持します。「a-btn-slide-text」の部分の追加メッセージのポジションは絶対配置（absolute）で、マウス オーバー時に0から36pxまで高さをアニメーションさせます。 マウス オーバー時にはボタンと追加文字要素の高さを変更します。また矢印アイコンの角度を45度回転させます。 アクティブ時はボタンが押されているように見える様、ボタンをほんの少し移動させ色の調整をしています。 Demo 4 ４つ目のデモも３つ目と少し似ていて、今回は追加メッセージを右側の水平方向にスライドアウトさせています。これは「ボタンが開いたらメッセージが見えた！」ような効果にしています。 HTMLマークアップ HTMLのマークアップは３つ目と同じです。 CSSスタイリング スタイル設定は３つ目と同じような感じで、以下のようになります。変更部分は色と追加文字要素のポジションです。 マウス オーバー時にはボタンの右パディングを増やしているのと、「a-btn-slide-text」spanタグの幅を広げています。 アクティブ時はボタンが押されているように見える様、インセットシャドウの適用と下方向に少し沈ませています。 Demo 5 ５つ目のデモではアイコンにシンボルフォントを使用しています。マウス オーバーするとそれまで見えていたアイコンが消えて、矢印のアニメーションが現れる様な効果を実現させています。 HTMLマークアップ 今回の構造では、ボタンリンクの中に４つのspan要素があります。その中で「a-btn-slide-icon」クラスを持ったspanタグが、上から下へと移動する矢印アニメーションです。 CSSスタイリング 左側でアイコンを表示させる為にフォントを使用するので、フォントも組み込ませる必要があります。矢印はトップの値に-30pxを設定することにより非表示にさせることが出来ます。 マウス オーバー時は左側のアイコンをフェイドアウトさせ、矢印アニメーションを止まることなく再生させます。 ボタンを押した時には、ボタンを赤に変化させインセットシャドウを適用させることにより「押されてる」効果を演出しています。 最後に上から下への矢印アニメーションの設定です。 Demo 6 今回はちょっと豪快に行きましょう！真ん中に星が入った円形ボタンの操作を行います。もっちろんマウス オーバー時には真ん中の星は回転させますよ♪しかもパルス機能付きです。それから追加メッセージを表示させています。 HTMLマークアップ ここでは３つのspanタグをボタンリンクで囲んでいます。最後の一つはマウス オーバー時に現れる隠れメッセージです。 CSSスタイリング 今回のデモでは「nth-child」を使用します。spanタグは３つあるので「.a-btn span:nth-child(1)」「.a-btn span:nth-child(2)」「.a-btn span:nth-child(3)」と分けておきましょう。 それから円形ボタンを作成し、ファンシーなボックスシャドウを適用させます。水平方向の真ん中にメインの文字を配置する為に、displayプロパティは「table-cell」にセットします。星と隠れメッセージのポジションは絶対配置（absolute）です。 マウス オーバー時にはボタンのボックスシャドウを変更し、持ち上がったかのように見える様にします。隠れメッセージを表示させ、元々表示されていた文字はフライアウト・アニメーションを適用させます。星には回転アニメーションを加えています。 クリックしたらボタンが押されているように設定しましょう。 回転とパルスアニメーションはこのように設定します。 Demo 7 最後のデモは、ボックスシャドウをうまく使って3D効果を演出しています。 HTMLマークアップ HTML構造は５つ目のデモと同じです。 CSSスタイリング CSSのスタイル設定も５つ目のデモとよく似ています。色と影のを少し変更しました。 マウス オーバー時にはボタンを拡大し、内部の小さなアイコンを回転させています。 ボタンをクリックした際には、ボタンを小さくしているのとボックスシャドウを調整することにより「押された」感を演出しています。 これで全部です！このデモを参考にしてCSS3で色々面白いボタンを作ってみてくださいね。 参考サイト Add to Cart Buttons (PSD) Simple CSS3 Button Ultimate CSS Gradient Generator
CSS3の力は尋常では無く、本当にすごいことばかりです。今回のチュートリアルではそのCSS3の巨大な力を、非常にクリエイティブな方法で「いい意味で」悪用する方法をご紹介したいと思います。早速ですが、今回は何種類かのサムネイル・ホバー効果をCSS3のトランジッションを使って表現していきます。色んなスタイルを使用し、それぞれのサンプルでサムネイルをホバーすると、予期せぬ効果が現れるようなものを作っていきます。 ※CSS3のプロパティをサポートしているブラウザでのみ正常に機能しますのでご留意ください。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ HTMLマークアップの構造は非常にシンプルで直感的で、画像とその他全ての情報を囲い込むコンテナを作成しています。 viewクラスの中に、maskクラスを含んだ要素を含有しています。このmaskクラスはCSS3で実現させる効果を担うものであり、更にその中にタイトル（H2）や詳細、フルサイズ画像へのリンクといったコンテンツを含有しています。（幾つかのサンプルでは、詳細をDIVタグのcontentクラスで囲み、mask要素は別の要素として機能させています。） CSSスタイリング HTMLマークアップが済んだら、スタイリングに移りましょう。まずは一般的な設定をクラスに施し、それから目的に応じて個別に特別な設定をしていきたいと思います。CSS3のベンダープレフィックスは省略していますのでご注意くださいね。 それでは１０個の個別設定を見ていきましょう！ Demo 1 こちらの効果には、viewに加えてview-firstというスペシャルクラスも追加しています。今後もそれぞれのデモに、view-secondだとかview-thirdだとかスペシャルクラスを追加していきます。 こちらの1つ目のデモでは、いい感じのホバー効果を演出するために基本的なトランジッションを幾つか加えています。 ではここから効果の心臓部に入っていきます。今回のデモでは画像の上にマウスオーバーさせた時、delayプロパティを使って簡単なアニメーションをエミュレートさせています。このhover疑似クラスで使用しているtransition-delay（時間的変化開始の遅延）プロパティは、ノーマルクラスのものとは異なり変更が可能です。今回はノーマルクラスでは設定しておりませんが、hover疑似クラスには適用させています。こうすると、ほんの少しスタートを遅らせることが出来ます。マウスを画像から外すと、デフォルト値の「０」がすぐに適用されるため「元に戻る」のはあっという間です。 Demo 2 ２つ目のデモではスペシャルクラスのview-secondを追加しています。そして今回はmaskクラスの中は空っぽのままにして、contentクラスでその他の要素を含有させています。 ここでのmaskクラスは、今回のスペシャル効果を実現させるために別の属性を持たせています。どういうことかと言うと、transformプロパティ（translate（移動）とrotate（回転））を適用させ枠外で正方形を作っています。そしてホバー時にスライドインしてくるように、タイトル等のコンテンツもtranslate（移動）を使ってこの時点では枠外に出してしまっています。 次に、ホバー時に各要素を従来の配置場所まで移動させる為に、ここでもtransformプロパティでtranslate（移動）を適用させています。mask部分にはrotate（回転）も加えていますね。コンテンツの各要素は少しずつ時間差でスライドインしてくるように、遅延も加えています。 Demo 3 ３つ目のデモでは、transformプロパティのtranslate（移動）とrotate（回転）を使って、コンテンツを引っ張り込んでいます。 ここの部分はホバー時の簡単な説明です。transition-delay（遅延）プロパティを上手に使って、コンテンツの要素を今までとは反対の順番でスライドインさせています。 Demo 4 ４つ目のデモでは、画像に回転を加えながらシンプルにズームイン、ズームアウトさせています。全てtransformプロパティのscale（拡大）のおかげです。画像に対してtransition-delay（遅延）を０．２秒で設定していますが、ホバー時は０秒です。こうすることにより、ホバー時にはすぐさま変化し、マウスアウト時には少しゆっくり変化し始めるようになります。 ここからは効果実現のためのコードです。CSS3を使えば何でも出来ちゃいますね。 Demo 5 ５つ目のデモではtransition-timing-functionプロパティのease-in-outと一緒にtranslateプロパティを使って、コンテンツを左からスライドインさせています。 ホバーすると画像を右側に移動させ、コンテンツを左からスライドインさせて画像を押しのけているように見えるはずです。 Demo 6 ６つ目のデモでは、コンテンツを前方に浮き出た状態から本来のサイズまでズームアウト（１０から１へ縮小）させています。infoボタンはtranslateを使って下からスライドインさせています。 元に戻る時は、スムーズに見えるように遅延設定を調整します。 Demo 7 ７つ目のデモでは、画像は中心に向かって回転縮小させ、コンテンツは上から順番に落ちてきます。 ホバー時には詳細の要素に遅延効果を加えており、こうすることによりまず画像が回転し、あとから画像のあった部分にコンテンツが降ってくるように見えます。元に戻る時はコンテンツはすぐに消滅し、画像が回転拡大しながら戻ってきます。 Demo 8 ８つ目のデモではアニメーションを使って、バウンド効果を加えています。コンテンツが上から落ちてきてバウンドしているように見えます。 mask要素にアニメーションを加え、コンテンツが上から落ちてくるように調整しながら遅延の定義を加えます。 本当にバウンドしているように見せる為にtranslateYを使用し、幾つかフレームも設定します。 Demo 9 ９つ目のデモでは、右下からと左上からスライドインさせる為２つのmask要素を使います。 ２つのマスクの開始地点はそれぞれ別なので、１つは上に１つは下に個々に設定します。 コンテンツは２つのマスクが中央で接触したその線上から現れているかのようにスタイリングさせています。 ホバー時は２つのマスクは端と端がほんの少し重なり、コンテンツはその隙間から浮き出てきます。 マスク用のtransition-delay（遅延）は、ホバーした瞬間に移動開始するよう設定してあります。けれどマウスを外した時は、少し間を開けてから元の隙間に戻っていきます。 Demo 10 最後のデモでは画像はどんどん拡大してフェードアウトさせ、真ん中からコンテンツが湧きあがってくるように見せています。この効果はscale（拡大）と透過レベルを調整することにより実現します。 ホバー時はシンプルにscaleを使って画像を拡大し、opacity（透過度）を「０」にすることによりフェードアウトさせています。 終わりに・・・ CSS3は非常に素晴らしい可能性を秘めており、様々な効果を実現することが出来ます。もしかしたら、簡単な効果なら全てのブラウザでJavaScriptに頼らずCSS3で１００％実現出来るようになる日も近いかもしれませんね。今回のアーティクルがみなさんの役に立ち、ご自身のプロジェクトに何かしらのインスピレーションを与えることが出来たなら幸いです。
inuit.cssという単語を耳にするようになって、まだそんなに時間は経っていないかもしれませんが、今回は「それが何なのか」「それで何が出来るのか」「誰の役に立つのか」「誰が使うべきなのか」などと言うことをここでまとめてみようかと思います。 inuit.cssはCSSのフレームワークです。けれどinuit.cssの場合はその一言では収まらない気がします。グリッドシステムでもないし、boilerplateでもありません。ましてやスタートポイントでもありません。inuit.cssはフル装備で守備範囲の広いフレームワークなのです。面倒な手作業の９０％をカバーするようデザインされているため、WEB立ち上げの際にやらねばならない退屈な作業はinuit.cssに任せて、我々は楽しい部分に集中していればいいのです！ この記事は、http://csswizardry.com/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 拡張性 inuit.cssはプラグインを持つ数少ないフレームワークです。そしてこのプラグインのことをinuit.cssではigloosと呼んでいます。 igloosは、もう既に充分機能的なフレームワークに、更に機能を追加拡張してくれます。例えばパンくずリストや、IE6のサポート、ドロップダウンメニューといった様々な機能の追加が可能です。 精力的なアップデート inuit.cssは、今の執筆時点（2011年6月）ではまだ御年たったの2か月です。なのに既にバージョンは１．０から２．５まで進化しています。フレームワークを改善、洗練、更に機能的にする為のアップデートが２０回も行われています。 多くのフレームワークが停滞したりないがしろにされていく中で、inuit.cssは人々のニーズに対応すべく向上拡張する為に、コミュニティからのフィードバックを常に大切にしています。 プラグマティック（実用主義） inuit.cssは革新的な膨張システムを備えている、非常に実用主義なフレームワークです。万人受けするようにではなく、その環境に適用するパフォーマンスを優先しています。例えばIE7でもきちんと動作しますが、Firefox 4ならば尚更よく動作します。と言ったような・・・。inuit.cssはWEB開発に賢明なアプローチを取っています。 いつでもディベロッパーの心の友に！ inuit.cssはディベロッパーが費やす時間、労力、メモリーの節約を念頭に置いています。フレームワークのほんの小さな側面が、ディベロッパーの作業を軽減することを唯一の目的として追加されました。.endクラスの呪縛からの解放（.endクラスを使ってグリッド行の最後のカラムからマージンを削除する方法）や.gridクラスの省略などは全てエンドユーザーの使い勝手を考慮して追加されました。 誰が使うべき？ 素敵なデザインはあるけれど、あんまりメモ帳は好きではない方 素晴らしいアプリを作れるけれど、定められた時間内にその場で適当なCSSを得られないプログラマー ブラウザーテストの大半をお任せしたい人（inuit.cssはIE7以上と他の全てのブラウザでの動作を確認済みで、IE6をサポートするiglooもあります。） 速やかにラウンドプロジェクトを実行する必要があるけれど、品質に妥協はしたくない代理店の方（inuit.cssは色んな巧み技を持ってますよ。） CSS入門者で、真っ当なスタートポイントを求めている方 レスポンシブサイトの考え方が好きで、でもリサーチ用のリソースをまだ持っていない方 もしくは実装している方々 WEBサイト制作者ならどなたでも！ もしinuit.cssを見て下さった方。もしくは既に使ってくださっている方！みなさんからいただくフィードバックは、今後の改善向上の為に非常に貴重なご意見となります。どうぞお気軽にTweetやコメントを残してくださいね。
今回はフルスクリーン背景画像のスライドショーをCSSのみで作成したいと思います。イメージを色々とトランジットさせるのと、CSSアニメーションを使ってタイトルも表示させたいと思います。 デモで使用しているイメージはMark Sebastianさん撮影のもので、Creative Commons Attribution-ShareAlike 2.0 Generic Licenseにライセンスされています。 今回の効果はCSS animationsをサポートしているブラウザでないと動作しませんのでご注意ください。 こちらのチュートリアルは、私たちが実験している最新のCSS3の一部分にすぎません。他にも色んなことを試しているのでよろしければご覧くださいね。 Original Hover Effects with CSS3 （イケテルオリジナルマウスオーバーCSS3アニメーション） Animated Buttons with CSS3 （CSS3の気になる効果でアニメーションボタン） Splash and Coming Soon Page Effects with CSS3（CSS3を使ってイントロアニメーションを作る） Experiments with background-clip: text Experimental CSS3 Animations for Image Transitions Slopy Elements with CSS3 CSS3 Lightbox この記事は、http://tympanus.net/codrops/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ スライドショーの部分にはULリストを使います。個々の画像にはSPANタグをつけて、タイトル部分のH3タグはDIVタグでラッピングします。 SPANタグはスタイリング時にスライドショー用の背景画像を含有する要素になります。 CSSスタイリング それではULリスト部分のスタイリングから始めましょう。ポジションはFIXEDで、表示域まで引き延ばします。また、イメージ上にパターンを表示させる為に:after疑似要素も使います。 今回はドットパターンを繰り返し使用しておりますが、透過させたCSSグラデーションなども勿論代用可能です。 スライドショーのイメージ用SPANタグはabsoluteで絶対配置し、幅と高さは１００％に設定します。このSPANタグにはテキストが含まれているのですが、それが見えてしまったら困るので文字色（color）を透過させます。そして背景サイズのプロパティは「cover」にします。こうすることにより背景画像が要素の全領域をカバーしてくれます。要素の全領域とは結局画面サイズの事なので、可視表示域全てをカバーすることになります。透過度は「０」にセットします。これからアニメーションで変化を加えていきます。 SPANのアニメーション間隔は３６秒で止まることなく無限に続きます。それから詳細部分でタイトルのDIVタグもスタイリングしておきましょう。 タイトル用DIVタグも３６秒間隔にしておきましょう。 ここで背景画像用の全てSPANタグが時間差で流れるように設定します。どういうことかというと、スライドショーのイメージとタイトルが６秒ごとに切り替わるようにするということです。 それではスライドショーのアニメーションを見てみましょう。SPANのアニメーションは３６秒間隔です。この３６秒間の間に、透過を変更させています。まずアニメーションが８％まで達した時に透過を０から１に変更し、１７％まではそのまま維持します。２５％に達したら０に戻し、最後まで０のままです。 なぜこんな値になるかというと、各イメージを６秒間隔で可視状態にしたいのと、各サイクルの終わりには１つ目のイメージが再び表示されるようにしておきたいからです。イメージは全部で６つあるので、ひとつのサイクルには３６秒を要します。その為透過度に応じて値を「計る」必要があります。２つ目のイメージがアニメーションし始めるのは６秒後なので、１つ目の画像がアニメーションの何パーセンタイルでフェイドアウトするべきか調べる必要があります。６を３６で割ると０．１６６６６６になり、これはキーフレームのステップだと大体１６％位です。そしてイメージをただパッと消したいわけでは無いので、例えば８％などその途中の段階も必要となってきます。この時点で画像を完全に表示させて、また１７％に達したらフェイドアウトさせ始めて２５％の時点で完全に消えるようにします。 タイトル部分も同様です。けれどタイトルに関してはもう少し早く消してしまいたいので、１９％の時に０に戻します。 アニメーションをサポートしていないブラウザでは、SPANの透過を１にすることにより単純にスライドショーの最後のイメージを表示させています。 no-cssanimationのクラスはModernizrによって追加されます。 それと表示域が小さかった場合のフォントサイズも調整しておきましょう。media queriesを使って、特定の幅の場合には小さ目のフォントが表示されるようにします。 これでシンプルバージョンのスライドショーは完成です！ここからはもう少しトランジッションにスパイスを加えてみたいと思います。 アニメーションの他のアイデア イメージとタイトルを表示させる為のアニメーション部分を少しいじってみましょう。 以下のアニメーションでは、イメージを少し拡大して回転させています。 タイトルは右からスライドさせ、左側にスライドしながらフェイドアウトさせています。（text-alignは「right」に変更しています。） 他にも色々な動かし方があると思いますので、色々試してみてください！ デモ 他にもバラエティに富んだアニメーションのサンプルをご用意しました。 Demo 1: シンプルなフェイドインとフェイドアウト Demo 2: タイトルは右からスライドさせて、画像を若干回転 Demo 3: イメージは上へ、タイトルは下へ移動 Demo 4: イメージ拡大、タイトルは下からスライドさせ拡大しながらフェイドアウト 今の所、ChromeやSafariなどWebkitブラウザでご覧いただくと一番スムーズに表示されるかと思います。 今回のチュートリアル、楽しんでいただけましたか？活用して色々アレンジしてみてくださいね。
本日は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タグを追加しています。（デモ２の画像をご覧ください。） それではこちらにスタイル設定を加えましょう。 CSSスタイリング ULリストはページ中央にセンタリングし、サムネイルの透明度が低いので「透けて見える」ような背景画像を追加します。 また疑似要素を使ってRGBA背景色を加えることにより、背景画像の色合いを増やしています。 リストアイテムは左側にフロートさせ、アンカーと画像のポジションは相対位置で設定しています。 サムネイルそれぞれは、幅１００ピクセル、透明度０．２で設定します。 説明部分はデフォルトでは非表示にし、JavaScriptを使って表示されるようにします。 最後に説明部分のDIVタグの設定をしましょう。 これでスタイル設定は完成です！つぎにJavaScriptを見てみましょう。 [adrotate group=”2″] JavaScript まず大切なのが、サムネイル画像をホバーした際の説明部分のポジションとサイズを計算することです。勿論サムネイル画像がメインラッパーのどこに配置されているかによって、またサムネイル画像が最大化した際のサイズによって異なってくるので注意が必要です。例えばサムネイル画像が右端に近かった場合、説明部分はサムネイル画像の左側に配置したいわけです。 それからプロキシミティイベントを画像にバインドする必要があります。マウスの位置によって画像を上下にスケーリングするということです。画像が最大化されたら、そのz-indexを高いまま維持します。そうすれば説明文をきちんと表示させることが出来ます。 デモ一覧 デモを3種類ご用意しましたので、どうぞご覧ください。 デモ１： サイズ変更のみ デモ２： サイズ変更と説明文 デモ３： 小さ目のサイズ変更と説明文
世の中では様々な用途の為にWebアプリケーションが用いられており、Webディベロッパーにとってはウハウハな今日この頃だと思います。Web開発業界にもモバイルデザインから携帯アプリに至るまで、フロントエンド開発やosCommerceやWordPressなどと言った特定のプラットホーム開発者など、幾つもののニッチ市場が存在します。 その中で最も急成長しているニッチャーの１つはもっとバックエンドワークを好み、Webサイト全体のアプリケーションを作成するのが得意な人たちです。本来ならば自分たちのアイデアを生かしゼロから目的に合ったサイトを構築するべきだと思いますが、多くのクライアントが既存のプラットフォームを用いて自社サイトを構築するようになってきています。ここがニッチャーWebディベロッパー達の狙い目でもあるわけです。 今回のアーティクルではWebディベロッパーがWebアプリケーションを作成する際に、そのアプリケーションがクライアント用であろうとも個人的なプロジェクトであろうとも知っておくべき技術やスキルをご紹介したいと思います。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 有益なサーバーサイド・スクリプト言語の一例 Web全体のアプリ開発者とフロントエンド開発者の決定的な違いは、サーバーサイド・スクリプト言語の知識の有無です。サーバーサイド言語とはサーバー上で実行される言語であり、より多くのプログラミング機能がありデータベースにアクセスし操作することも可能です。PHP、Perl、Ruby、ColdFusion、Java、ASPなどがその一例です。Webアプリケーション用の最も一般的で効率的な言語としては、PHP、Ruby、ASPが挙げられるでしょう。そしてこの中でASPは主に政府機関や大企業使用されています。個人で取り扱う場合にはPHPやRubyがベストな選択と言えるでしょう。そして何がいいって、この２つともオープンソースなんです。更に詳しい情報はWhich Server-Side Language Is Right For You?のサイトを参考にしてみてください。 Image credit: laughingsquid Webディベロッパーになりたての頃は、割と多くの人が本来必要でもない複数の言語を習得しようとします。けれどこれは間違いです。最初の頃こそは自分に合う言語はどれなのか幾つか試してみるのは良いと思いますが、更に度を越して幾つもの言語を習得しようとするのは単なる時間の無駄に過ぎません。１つ選んだらそれに拘って、その言語をより深く学ぶことに焦点を当てるべきです。ベストプラクティス（最優良の事例）や構文を学び、スニペットやスクリプトを収集し、人気の高いフレームワークを試してみる事です。（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アプリの作成方法を学べることが出来るんですよ。
Adobeは自社サイト内のモジュールで、結構クールなヘッダーバーを使用していますよね。 ヘッダーバーは右側と左側の２つのセクションに分かれています。左側は説明用のタイトルで、右側は関連リンクになっています。では実際このヘッダーバーがどの様に作られているのか考えてみましょう。まず第一に、これはnon-sprite画像を使用しています。 これはどういう意味かと言うと、ヘッダー用に追加のHTTPリクエストが必要だと言うことです。更に付け加えると、:hover効果は全く別のイメージです。すなわち更に追加のHTTPリクエストが必要で、最初のhover上の２つ目のイメージが読み込まれる間に「黒のフラッシュ」が存在してしまうことを意味します。 私たちはこれを画像を一切使わずに再現してみましょう！ この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ ヘッダーのマークアップはリンク込みのタイトルです。 こちらがヘッダー用の基本設定です。リンクの部分は色付けして、ボーダーで白線を付け加えています。 いよいよ核心に迫ってきました。
今回は絶対に気に入っていただける、便利でしかも無料のWeb UIとワイヤーフレームを５０個もご紹介したいと思います。Webデザイナーは、Webサイトであろうとソフトウエアであろうとユーザーインターフェースモデルを生成する為に、常にいくつかの基本的なユーザーインターフェイス用を必要としています。その為に、ユーザーインターフェースを複製するのに便利なワイヤーフレームやUIデザインキットも必要としています。 こちらのアーティクルではプロジェクトのLo-Fiイラストを作成する際に役立つであろう、Web用または携帯用のユーザーインターフェースキットを集めています。このコンパイルが気に入っていただけるとよいのですが・・・。何かご意見ご要望があれば是非お聞かせくださいね。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 【無料】Web UI＋ワイヤーフレームキットまとめ Black UI Kit Alex PatrascuによってデザインされたPSD UIキットで勿論無料です。ファイルは完璧にレイヤー化されており、非常に使い勝手よく出来ています。Webサイトやアプリを作る際に必要な共通要素をうまく押さえています。 Lion UI Kit Lion UI Kitは最新OS Xの編集可能で完璧にレイヤー化されている要素を含んだ、手軽なPSDモックアップツールで、。 Small Blue UI Kit ブルーをポイント色に使ったコンパクトなUIキットで、リミットセレクター、トグル、ボタン、ローディングバーなどを備えています。 Simple To-Do List こちらの無料のPSDダウンロードは、とてもクリーンなデザインで編集も可能なシンプルTO-DOリストです。 Blaubarry UI Kit Blaubarry UI Kitはとても便利なボタン、スライダー、スクロールバーやフォーム要素を含んだUIキットです。シェイプレイヤーのサイズ変更や編集も容易に出来ます。 Minimalistic UI kit the color Google+ Google Plusはお好きですか？そのサービスが？それともインターフェースが？いや、ひょっとしたらそれ以外の何かでしょうか・・・。 Flex 3 Stencil こちらのステンシルセットはFlex3のスタイルガイドからパネル、データグリッド、ボタン、フィールド、リンク、トグル、データピッカー、ツールチップ、エラー、メニュー、スクロール、アコーディオン、タブ、リストなど全てのFlexコンポーネントを含んでいます。 Sleek UI Elements Webサイトを作るにせよ携帯アプリを作るにせよ、よくデザインされたUIエレメントはユーザーエクスペリエンスへの重要なカギとなります。こちらのPSDは近代的で洗練されたスタイルの有用なエレメントが多数含まれています。 GMUI SlixUI Slix UI controlsはWebデザイナーやアプリデザイナーの負担を軽減する為に作られたセットです。全体的にアプリ中心に作られていますが、勿論Web用に使っても支障をきたしません。インターフェースを構築する際に必要な項目の大部分を、きっと解決してくれると思いますよ。 Solid UI Kit こちらのキットはSixbaseのAlvin Thongさんによって作成された斬新なデザインです。ダウンロードにはよく整理され簡単に編集可能なPSDファイルが含まれています。 TRAK オープンソースのTRAK enterprise architecture frameworkを使用することにより生産される、アーキテクチャ記述のViewを有効化する定型のシェイプとコネクターを提供しています。 Simple UI element pack とてもシンプルなキットで、勿論無料です。是非ご利用ください♪ Eclipse GUI Design EclipseとMac OS X用のウィジェットです。 Interactive Sketching Notation 1.1 こちらのInteractive Sketching NotationはOmniGraffle用の最新のステンシルです。手書き風なのが特徴です。 Watchguard こちらは「.gstencil」に変換可能なVisioステンシルで、いくつかのウォッチガード、セキュリティアプライアンス/ファイアウォールオブジェクトが含まれています。 Web Sketch Cursors CSS3に準拠した、Web UXデザインのモックアップ用の手書き風カーソルです。デフォルト、クロスヘア、ポインタ、移動、テキスト、待ち時間、ヘルプ、動作中、不許可、垂直テキストや矢印等を含みます。 Wireframe Magnets こちらの「自分で作ろう♪」型マグネットテンプレートは、Konigi wireframe stencilsを基にしており、ホワイトボードのプロトタイプに適していそうな３枚の要素から成り立ちます。単純にダウンロードしてPDFファイルをマグネットシートに印刷し、切り取ってお使いください。もし水性マーカーなどを使用する場合は必要に応じてラミネート加工を施してください。 iOS Design Stencils for OmniGraffle iOS Design Stencilsは現在Githubで管理されているので、必要に応じてブックマークやリンクを更新してiPhone4用など最新バージョンをチェックしてみてください。 [adrotate block=”3″] Facebook Applications Facebookに関連した膨大なコレクションは、Facebookアプリケーションのワイヤーフレームを作成する際に役立つこと間違いなしです。
先日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の略です。コンフィグファイルの１つで、配置されたディレクトリとそれに関連するサブディレクトリを制御する権限があります。独自の機能を制御する為に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を編集しないのか？ 先ほどの説明をご覧いただくと、当然こういう疑問が湧いて来ますよね。このブログをご覧になっている殆どの方は、何らかの形での共有ホストをお使いになっているのではないかと思います。それが何を意味するかというと、１つのサーバがあなたの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：４行目の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サイト上でメンテナンスページとして使用したいページに置き換えてくださいね。それから３行目の数字はあなたのIPアドレスに書き換えるのを忘れないようにしてください。そうしないと自分自身もアップグレード中にメンテナンスページしか表示されないという憂き目をみることになってしまいます。 キャッシュ利用で速度アップ
WEBデザイナーやディベロッパーのみなさんは、WEBサイトのデザインや開発にかける時間をいかに短縮するか絶えず模索していらっしゃるのではないでしょうか。そうすることによりWEBサイト構築の生産性を向上させ、自分の仕事を最大限に活用出来るよう改善していらっしゃるんですよね。ここではみなさんの貴重な時間を節約出来る、数々の優れたCSSツールやジェネレーターをご紹介していきたいと思います。 CSSツールは魔法のランプの様に機能し仕事をシンプル化してくれるので、WEBディベロッパーのみならずWEBデザイナーのみなさんにも不可欠なツールです。ほぼ全ての開発ツールは時間短縮を実現してくれるので、優雅で機能的で高度に最適化されたWEBサイトを近道しながら作り上げることが出来ます。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 CSSツールとジェネレーター
Eメールマーケティングはお金になります。多くの企業が知名度を上げる為に、Twitterのフォロワー数やFacebookの「いいね」の数を増やす方法を模索する中、殆どの企業がEメールマーケティングに戻ってきます。VivaLaEmailによると、Eメールマーケティングは43対1のROI（投下資本利益率）を誇るチャネル（経路）です。この数字はさほどマーケティング予算を押さえられない会社にも魅力的なのではないでしょうか。 もし過去にHTML Eメールをコーディングした経験をお持ちでしたら、そんな簡単なものではないことをご存知かと思います。今回のチュートリアルでは、問題児であるOutlook2007と2010の対処法を含め、主要なメールクライアントできちんとレンダリングされるニュースレター（メルマガ）の書き方をご紹介します。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 始める前に・・・ 入れ子式テーブルや旧式の背景色宣言等1999年時代のコーディングに取り組む前に、HTML Eメールに関して覚えておいていただきたい点を幾つか挙げておきますね。 CSSサポートの制限：複数のWEBブラウザにまたがる何十種類ものメールクライアント用にデザインする為、CSSに関することはシンプルにとどめる必要があります。 インラインスタイル限定：全てのCSSはインラインスタイルでなければなりません。これが何を意味するかと言うと、似たようなコードを何度も繰り返し記述しなければなりません。ラッキーにもPremailer等、タグの中からスタイルを拾いインラインで書き直してくれるサービスがあります。これで単純作業から解放されますね。 背景色やイメージのムラ：background-imageや background-position、そもそもbackgroundのCSSプロパティ自体が全てのメールクライアントでうまく表示されるわけではありません。うまく行く方法もあるけれど、頭痛の種を減らす為にテーブルやセルをどのように使うか注意を払った方がいいと思いますよ。 画像は絶対パス指定：このチュートリアルでは私のコンピュータ上で作業しているので相対パスを使用しておりますが、実際メールをテストしたり送信したりする時にはうまく行きません。全ての画像はサーバー上に保存し、絶対パスで指定しなければなりません。 セルパディング（cellpadding）とセルスペーシング（cellspacing）：今回のチュートリアルでは何層にも亘ってテーブルを構成します。その個々のテーブルで、メインのテーブルタグのセルパディングやセルスペーシングを０に設定する必要があります。そうしなければ目障りでイライラしてくる水平線や垂直線が入ってしまいます。沢山コードを書かなければなりませんが、最初にきちんと記述しておけば後が楽になりますよ。 枠組みの構築 コチラから今回作成するEメールのサンプルをダウンロードしていただけます。 極めてシンプルな2列のデザインで、メインの記事1つとサポート記事が2つで構成されています。ではどこから始めましょうか。まずはEメールの枠組みから作っていきましょう。 始めるにあたり、最終的にEメールとなる基本的なHTMLから書いていきましょう。 Step 1 － コンテナ用テーブルの作成 HTMLテーブルの書き方はバッチリですか？今回はテーブルがとても重要な役割を果たします。テーブルはHTMLの最も基本的な構造であり、HTML Eメールの枠組みとなります。 最初に作成するテーブルは、９９％の幅設定をしたコンテナ用テーブルです。幅や高さ、背景色を設定する時は、width=""やheight=""やbgcolor=""と書いてくださいね。 タグにbackground-colorと書いても背景色はレンダリングされない為、コンテナ用テーブルでは単色の背景色のみ有効です。９９％の幅設定は、GmailやYahoo! Mailと言ったWEBベースのメールクライアントで必須となるパディング対策で、残りのEメールはこの１つのテーブルセルの中に中央寄せの状態で入れ子式に収納されます。 Step 2 － Eメール ラッピングテーブル 次に取り掛かるのは、実際にEメールを納めるコンテナとなるラッピングテーブルです。最大幅は600ピクセルに収めましょう。今回のEメールでは600ピクセル幅の白い箱の下に、うっすらと影が落ちています。なので、ラッピングテーブルの幅は640ピクセルにし、中の要素の為のパディングは20ピクセルに設定したいと思います。 ここまで大丈夫でしょうか。ちょっとテーブルの部分がややこしいですよね。なので、行を畳んでシンプルに分かり易くしてくれるテキストエディター等を使うと便利かと思いますよ。コメントもシンプル正確にまとめて後から分かり易くしておいた方がいいと思いますよ。 ヘッダーの作成 私がHTML Eメールをコーディングする時は、大抵枠組みを作成してから細かいデザイン等に移り、パズルの様に組み立てていく方法を取っています。今回のデザインでは、WEBバージョンのリンクとメディアリンクを含むヘッダーを作る番です。 Step 3 － 一番上の行 さて、今回のEメールの一行目は、青色の背景色に白い文字でWEBバージョンのリンクが入っています。HTML Eメールを作成する際、このリンクを加えることはとても重要です。Eメールのクライアントは、画像を表示したりしなかったりパディングの処理方法も異なったりと個々に対応がまちまちだからです。 ここからは最初に作成したコンテナ用テーブルの部分は省略しますね。今後作成していくコードは全て、最初のテーブルセルに入れ子式に収納されていることを忘れないでくださいね。今後はCSSもスタイルシートに加えていきましょう。 ここでちょっとCSSタイムです。これは最終的にはインラインスタイルに変換されます。（ここで「footer」としたのは、フッターと目的も同じでスタイルも同じだからです。） ここまでのコードでこの様に表示されるかと思います。 Step 4 － ロゴとソーシャルメディアアイコン さて次にロゴマークとソーシャルメディアアイコンを表示させる為に、メインのテーブルにもう一行増やしたいと思います。 ここではシンプルに一行増やして、セルも１つ増やします。その中に行が１つで、セルが５つのテーブルを作成します。言葉だと分かり難いかと思いますので、下記のコードを見てみてください。繰り返しになりますが、ここでは画像を相対パスで記述しておりますが、実際メールを送信する際にはサーバにアップされている必要があります。 それから残りのEメールのメイン部分を網羅する「email_background」というクラスも追加しています。この背景画像はOutlook 2007と2010では表示されません。チュートリアルの最後に修正するので少しお待ちくださいね。 そしてCSS部分では、Eメールのコンテンツ部分に背景画像と、背景画像用のスタイル２つを追加しています。 これらのソーシャルメディアアイコンはそれぞれ別々のセルの中に収納されているので、他のセルに影響を与えません。従ってどのソーシャルメディアアカウントを持っているかにより、簡単に追加や削除が行えます。ここまでのコーディングでこの様なものが完成しているかと思います。 コンテントの挿入 さてそれではEメールの中核となる部分に進んでいきましょう。コンテンツは簡単にざっと流し読みが出来るくらい、簡潔で親しみのあるものである方が良いです。2010年には一日あたり2940億通のEメールが送信されました。登録されている18.8億のEメールユーザーは、一人あたり平均156通のメールを一日に送受信している計算になります。これだけ沢山のメールを送受信しているのですから、あなたのEメールを魅力的にする必要があります。 Step 5 － 注目画像の追加 Eメールに注目画像（今回のデザインでは560ピクセル×250ピクセル）を追加する事から始めましょう。画像の下方にうっすら影が入っているかと思いますが、これは後で変更し易いように別々に記述しています。早速コードを見てみましょうか。 コードの詳細を説明すると、注目画像用に新しい行を追加し、幅を560ピクセルに設定し左右にパディングを20ピクセルずつ加えています。影の部分も同様に行を追加し、幅を560ピクセルにして両幅に20ピクセルのパディングを加えています。こうすることにより画像の差し替えや影の調整が手軽になります。 Step 6 － 見出しとコンテンツの追加 次は注目画像の見出しと記事部分です。ここではクラスを使って文章をスタイリングします。そして後程Premailerを使ってインラインスタイルに変換させます。 まず何をするかと言うと、オレンジ色で見栄えの良いフォントを使って見出し用に「H1」タグを作成します。それから「P」タグを使ってコンテンツを挿入しますが、パラグラフの分割は「BR」タグで行ってください。多くのメールクライアントは「P」タグの多用を好みません。行を追加したりパラグラフを増やす場合は、「BR」タグを直接記述してください。最後に、注目記事の後ろでテーブルを閉じているのがお分かりいただけるかと思いますが、この後で２つのサポート記事用に二段組みのレイアウトに移行するためです。 では予告通り、CSSのコーディングもしましょう。 Step 7 － ２つ目のコンテンツ ここから二段組みのレイアウトに切り替えるため新規でテーブルを作成しますが、きっとコードをご覧いただく方が速いですよね。パディング部分に注目していただきたいのですが、Outlookでは「P」タグのパディングをレンダリングしてくれないので、「P」タグではなくテーブルデータのセルに直接適用させています。 コードは長いのですが、ここではH2タグにのみ追加でスタイル設定を行います。 Step 8 － Eメールのクロージング もう少しでEメールが完成しますが、次に行うことはEメールのメイン部分を「TD」タグでクローズすることです。この「TD」タグは初めに640ピクセル幅を設定したテーブルのセルで、ここに下部の影用の画像を挿入します。 Step 9 － フッターの追加 HTML Eメールを作成する際に、決して忘れてはならないことの１つが購読解除用リンクの設置です。そうですね、購読者の数は減らしたくありませんよね。けれど、購読解除を簡単に行えるようにしておかないと（購読者の印象を悪くし）、顧客を失うことにつながります。これは購読者を失うよりも大きな打撃ですよね。なので、簡単に見易くしておく必要があります。殆どのEメールではフッター部分に単独で分かり易く設定されています。 テスト！テスト！テスト！ 市場には非常に多くのメールクライアントが出回っているので、デザイナーやコーディング担当者はHTMLのデューディリジェンス（適正性評価手続き）を行う必要があります。個人的に私は仕事でテスト用にLitmusを使っています。Lotus NotesやOutlookからWEBベースのクライアントまで、29もの異なるメールクライアントのプレビューとフルビューのスクリーンショットを、しかも殆どのメジャーブラウザで表示してくれます。 テスト送信してみた場合、完璧に全てレンダリングされてないと気付くはずです。大抵Outlookの2007と2010だとデザインが壊れてしまっているはずです。これは何故かと言うと、Outlook 2007と2010はHTML EメールをレンダリングするのにMicrosoft Wordを使用しているからです。（その前はInternet Explorerをレンダリングエンジンとして使用していたんですよね。どちらがマシかは・・・お任せします。） Outlook 2007と2010でも背景画像が表示される方法を、ステップバイステップで細かく説明しようと思っていますが、これをするにはEメールの幅を固定して、一枚の大きな画像を背景として設定するようになります。もし購読客の多くがOutlookユーザーならば、グラデーションやドロップシャドウ、ボックスシャドウを使うよりも、シンプルに単色背景色をお使いになることをお勧めします。（Outlookだけでなく、CSS3でもうまくいきませんしね。） 終わりに・・・ どんなに新しいメディアが出てきたとしても、HTML Eメールはデジタルマーケティングの中核に居続けると思います。Eメールは徐々に現代のスタンダードとして適用し、Eメールの中にビデオを埋め込んだり、CSSのフルサポートや、最終的にはテーブルレイアウトが不要となったり、まだまだ進化し続けるのではないでしょうか。
WordPressは今やもうインターネットで利用されている最も有名なコンテンツマネジメントシステムと言って間違いないかと思います。最初の頃こそ様々な批判を数多く受けましたが、Automattic社はその度にきちんと問題解決を行ってきました。ほどなくしてWordPressは有名なコンテンツマネジメントシステムの成長をサポートしてきた多数のブランドに採用されました。オープンソースであることは、ハッカーからの攻撃に対し脆弱性があるともいえます。その為WordPressで作られてサイトのWEBマスターは、セキュリティ上の問題を決して軽視してはいけません。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 私自身過去5年間ブロガーとして過ごしてきて、所有者の視点からのブログの重要性を理解しているつもりです。今回の記事では読者のみなさんがWordPressのセキュリティ問題への理解を深め、またどのように対処したらよいか理解するお手伝いが出来たらと思っております。そして今後もこのシリーズは続けていくつもりです。 注意書き： この記事にあるテストを始める前に、必ずWordPressブログのバックアップを取って下さい。かわいい我が子の挙動がおかしくなったら困りますものね。（その際、後述するWP Security Scanプログインを使用してください。） この記事ではプラグインの使用方法のみならず、手動で実行する方法も記述していきます。読者のみなさんは卓越したWEBマスターたちは、WordPressで全てのタスクをこなす為にプラグインに頼ったりしないと言うことを覚えておかなければなりません。また複数のプラグインを使用すると空きメモリを喰うので、動作が遅くなる傾向があることも覚えておきましょう。最後にWEBマスターたるもの、知識領域を増やす為に手動での方法をも試すべきだとも思いますよ。 WordPressのセキュリティ強化 初めに・・・（自動インストールは無しです） ホスティング企業はWordPressのインストールを非常に簡単なものにしました。今の今まで一度もコーディングをしたことが無いような人でも、あっという間にブログをアップすることが出来ます。ホスティング企業はWordPressのインストールを超簡単にするためにFantasticoとcPanelのようなツールを統合しました。そのようなツールはパッと見とても有効に思えますが、WEBマスターにとって本当に有益であるかはまだ証明されていません。 手動でWordPressをインストールすると、データベース内のテーブルに自分の好きなプレフィックス（接頭辞）を付けることが出来ます。ちなみにデフォルトでは全てのテーブルにwp_というプレフィックスが使われており、このプレフィックスを変更しなければ、ハッカーのお仕事を半分手伝ってしまったことになります。その為自分で変更したカスタムプレフィックスをお使いになることをお勧めします。この作業は後述するプラグイン、または手動でのWordPressインストール中にwp-config.phpを書き換える事により可能となります。 それでは、インストールを始める前にwp-config.phpを開き、コードを下記の様に別のものに変更して下さい： ↓自分の好みのプレフィックスに変える↓ 既に稼働中のブログを変更する場合、wp_プレフィックスを変更するには以下の様に2つの追加作業が必要となります。 1. phpMyAdminを使ってWordPressデータベースにログインし、全てのテーブルネームをカスタムプレフィックスに変更してください。 2. 「optionsテーブル」と「usermetaテーブル」内の幾つかのフィールドでもwp_プレフィックスが使われている可能性があるので、以下のクエリーを走らせてプレフィックスを変更してください。 お役立ちプラグイン WP Security Scanというプラグインはデフォルトのwp_プレフィックスを別のものに変更してくれます。インストールした後に「Security」＞「Database」へ進んでインストラクションに従ってください。 スパマー対策「Akismet」 あまりに有名過ぎるアンチスパムプラグインAkismetのことをご存じない方はいらっしゃらないかとは思いますが、この先Akismet無しで進むことは、スパマーたちに対して「さぁどうぞ私のブログにスパムコメントを書き込んでください！」と両手を広げて歓迎しているような状態になってしまい非常に危険なので、念のためここに書いておきますね。Akismetは必須です！！ 「SALT」 SALTはWordPressのパスワードのセキュリティを強化するシークレットキー認証方式です。パスワードをソルトすると、ここで生成される複雑なハッシュ文字列（ここではページがリフレッシュされる度に、ランダムハッシュ文字が生成されています。）を付加することにより、ブルートフォース攻撃からWordPressのインストールをを保護します。データベース証明書のすぐ下にある8行のコードをwp-config.phpファイルにコピーして下さい。これだけで完成です♪ まず、もしWordPress 2.5かそれより新しいバージョンのWordPressをインストールして使っているのであれば、wp-config.phpファイルにシークレットキーが既に存在するはずです。そのデフォルト値はハッカーたちに知れ渡っているので、この値も変更すべきです。次に、元々WordPress 2.5より古いバージョンのWordPressを使っていて、それをアップデートして今でも使用しているのであれば、wp-config.phpファイルに手動で追加する必要があります。 お役立ちプラグイン Chap Secure LoginプラグインはWordPressログインをまた別の方法で保護します。プラグインを有効にした後、暗号化されないで転送される文字列はユーザー名のみです。パスワードは複雑なMD5アルゴニズムでハッシュされます。またゼロ設定のプラグインであるため、コンフィグ変更を行う必要もありません。 注意書き： インストール後の初回ログイン時は必ず失敗しますが、2回目は成功します。なので、プラグインのインストール後の初回ログインに失敗しても慌てず、もう一度パスワードを入力してください。 ログイン試行制限 WordPressのログインセキュリティに関して論ずるのであれば、セキュリティ強化の為に別の機能を追加するというのは、なかなか良いアイデアだとは思いませんか。Login LockDown WordPress pluginプラグインは、WordPressブログへのログイン試行を失敗した特定範囲のIPアドレスをブロックします。このプログインは3回ログインに失敗すると、IPアドレスを1時間ブロックします。この機能はオプションパネルで変更が可能で、管理者には必要に応じてブロックされたIPアドレスを解放するアクセス権があります。 パスワードチェック機能 Login WordPress Password Checkerは複数の筆者がいるブログに便利なプラグインです。このプラグインは、新しいユーザーがパスワードを作成する際に、定義されたリストと照らし合わせ、リスト上のパスワードの使用を禁止します。これにより新しいユーザーが推測されやすい簡単なパスワードを作成することを防ぐことが可能です。 プラグインディレクトリのdictionary.txtファイルにパスワードを追加することも出来ますが、パスワードデータベースが増加すると応答時間も長くなることも頭に入れておいてください。 デフォルトユーザー名のadminは使わない もし私があなたのWordPressインストールをハッキングしようと思ったら、まずWordPressインストール時に使用されるデフォルト値から攻めていきますね。そしてもしあなたがインストールする際にデフォルトユーザー名の「admin」を管理用にそのまま使用されていたとしたら、もう私の仕事は半分は終わったようなものです。あなたのユーザー名は分かってしまっているので、後やらなければならないのはパスワードを推測する事のみです。 管理者ユーザーの変更方法 新しく管理者権限を与えるユーザー名を作成する。 「admin」ユーザーを削除する。 任意のユーザーを削除する前に、削除するユーザーが所有していた投稿やリンクをどのようにするかとWordPressが確認してくるので、「Attribute all posts and links to（すべての投稿とリンクを次のユーザーに割り当てる）」を選択する。 次回「admin」を使ってログインを試みても、もうアカウントは削除済みで存在しないのでお気を付け下さいね。 wp-config.phpファイルの保護 wp-config.phpファイルはWordPress インストールで最も大切なファイルの1つです。このファイル内には、ハッカーがWordPressデータベースへアクセスするのを容易にしてしまうような重要な管理権限が含まれています。その為、.htaccessファイルに以下のコードを加えて下さい。 .htaccessファイルはwwwのルートディレクトリにあるはずです。もしそこに無かったらファイルを新規作成し、上記のコードを追加してください。 ディレクトリ一覧の非表示 先ほどwp-config.phpを保護しましたが、それだけではまだまだ足りません。WordPress インストールには沢山のディレクトリがあり、ちょっとデキるハッカーならば簡単にアクセス出来てしまいます。.htaccessファイルに下記のコードを加えて、パブリックからの閲覧を不可能にさせましょう。 この変更を行うと、変更を行った特定のディレクトリの内のサブディレクトリへのアクセスを無効にします。 パスワード強度の確認 先ほどWordPress Password Checkerのプラグインのところで、他のユーザーが予測されやすい簡単なパスワードを使うことを制限する方法を説明しましたが、こちらのプラグインで更に一歩セキュリティ強化を図れる事間違いなしです。基本的な考え方としては、管理者パスワードにはガールフレンドの名前なんて使わないように！ということです。責めているわけではありませんよ。みんなやることです。 WP Security Scanプラグインは既にインストールされているかと思いますが、ダッシュボードの「Security」オプションメニューの下に「Password Tool」オプションがあるかと思います。それをクリックするとパスワードツールの以下のような画面が表示されるはずです。 強力なパスワードを生成して、何度も忘れてしまうことが無いようにどこかに保存してください。ちなみに上記の画像で赤で表示されているパスワードに意味はありません。 WP_head部分からバージョン情報の削除 WP Security Scanプラグインを既にインストールしていればもう準備万端ですが、１つ確認しておいた方がよいことがあります。WordPress 2.6以降の場合、WP_head部分に自動的にバージョン情報が記されてしまいます。これにより何か問題が発生すると言うことはありませんが、ハッカーに使用バージョンを知られてしまうとハッキングの脆弱性も増してしまうと言えるでしょう。WP Security Scanプラグインは、何も変更を加えなくとも自動的にWP_head部分からこのバージョン情報を隠してくれます。 プラグインインストール後はこのように表示されているはずです。 注意書き： もしあなたが洞窟の奥の方か何かに住んでいて、2.6よりも古いバージョンのWordPressを使用していたとしたら、使用中のテーマから手動でバージョン情報を削除する必要があります。header.phpファイル（Appearance ＞ Editorで見つかるはずです）内で、下記のメタタグを見付けて削除して下さい。もし該当のメタタグが見当たらなかったらラッキーです♪ 複数ユーザーへの権限割り当て 今回のステップは複数のユーザーがいるブログにとって非常に重要です。ブログが成長してユーザーの数も増えてきたら、それぞれのユーザーに与える権限をきちんと分析しておいた方がよいでしょう。そして以下のどのプラグインを使用するか選ぶ時期が来たと言えるでしょう。 以前branding our WordPress dashboardという記事で取り上げたプラグインを思い出してみましょうか。Adminimizeは視覚的に変化を与えるだけではなく、あなた自身のダッシュボードだと言う気分にさせてくれます。このプラグインは素晴らしくて、複数ユーザーそれぞれがダッシュボードのメニューやサブメニュー内でどんな作業が出来るのか有効化（もしくは無効化）させることが出来ます。このプラグインを使えば、ほぼすべての機能を有効化（もしくは無効化）させることが出来てしまいます。 注意書き： Role
この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ スマートフォンを使って瞬時に情報を取得することが出来る便利さがうけて、QRコードはどんどん広まっています。QRコードのおかげで小さな電話のブラウザにコツコツと長文のURLを入力する必要もなくなり、QRスキャナーでスキャンすれば自動的に電話発信までしてくれます。 ディベロッパーとして、QRコードジェネレータの構築方法を考えたことがありますか？Google Chart APIを使えば、思ったより簡単にQRコードジェネレータを作ることが出来ますよ。それでは早速始めてみましょうか！ まずその前に・・・ このチュートリアルを読めば、以下のようなQRコードジェネレータを作り上げることが出来ます。 準備段階として・・・ まずはindex.phpとgen.phpという2つのPHPファイルを作りましょう。 index.php： こちらはユーザーが作成したQRコードイメージのサイズやエンコード、エラー修正を行うフロントページです。 gen.php： こちらはGoogle Chart APIからデータを要求し、iframeを使って上記のindex.phpから呼び出されます。 index.phpファイル コードの最初の部分は、QRコードイメージを作成する為に必要な情報を集める為のHTMLフォームです。フォームのターゲット属性の値が「qrcode-frame」になっていることに注目してください。これでiframe経由で送信するようフォームに指示しています。 コードの2つ目の部分はフォームを送信する為に用いられるiframeです。ここでは、ユーザーがページをリフレッシュせずとも継続してQRコードを作れるようにする為にiframeを使用しています。 それではブラウザでindex.phpを開いてみてください。以下のような感じになっているかと思います。 このシンプルなCSSスタイルのままでは面白くないので、少しスタイルも加えていきましょう。このチュートリアルではPHPの方に焦点を置きたいので、CSSスタイルの詳しい説明は省略しますね。 ではもう一度index.phpを開いてみましょうか。今度はこんな感じになっているかと思います。 gen.phpファイル 下記のコードをgen.phpファイルにコピペしてください。 ページにポストされたデータがある場合に限り、リクエストを実行してください。 $_REQUESTを使ってデータをキャプチャし、別の変数に格納してください。 Google Chart APIでURLを構築し、上記でキャプチャしたデータをURLに追加してください。 Google Chart APIが作成したデータと同じ内容を含むimgタグを出力してください。 早速オリジナルQRコードを生成してみましょう！ これでもう完成です！自作のQRコードジェネレータはうまく動いてくれるはずですよ。ブラウザからindex.phpをナビゲートして、必要情報を入力し、「Generate」ボタンを押してみてください。 即座にQRコードが作成されるのを確認出来るかと思いますよ。
WordPressとはWEB上で使われている最大規模のブログプラットフォームの１つで、その知名度の成長とありがたいほどの柔軟性により、静的な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」という名前で保存してください。 それではこれから１つ１つ説明していきましょう。 テンプレートの名前 一行目にはテンプレートの名前を書きましょう。 この「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テーマ（テンプレート）のコーディングの仕方をブログ対応やミニマルテーマも含めご紹介したいと思います。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 ワークステーション設定 チュートリアルを開始するにあたり、まずはご使用いただいているコンピュータへサーバ設定をする必要があります。Windowsの場合はXAMPPやWAMP、Macの場合はMAMPなどがよいかと思います。これらのツールによりローカルテスト環境でWordPressのテストをすることが可能となり、プロジェクトの最中にいちいちFTPを使ってファイル転送する必要は無くなります。 コード編集に関しては、Notepad++のご使用を強くお勧めします。シンタックスがハイライト表示されたり、コーディング用のユーザーインターフェースも非常にシンプルでクリーンであったりと、あくまで私の好みである部分が強いのですが、とても使い易いと思います。（それに無料に勝るものはありません！）他にもNotepadやNotepad 2も同様に使い易いと思いますよ。 必要なフォルダとファイルの準備 WordPressインストールを含むフォルダ内で、wp-content/themes/に移動し「New 3.0 Theme」というフォルダを新規作成し、今後このチュートリアルで作成するファイルは全てこのフォルダの中に収納するようにしてください。では下記の画像の様にファイルとフォルダを追加してください： ステップ１－Style.css sytle.cssにはWordPressテンプレートをスタイリングする全ての要素を書き込みます。けれどまず最初は各テンプレートの名前と、著者名とリンク、そして説明とバージョンを宣言しておきましょう。WordPressテーマ作成時には、テーマを動作させるには必ず2つのファイルが必要になると言うことを覚えておいてください。1つ目はこのstyle.cssファイルで、もう1つは今から作成するindex.phpファイルです。 これらのインフォメーションはいつでも変更が可能ですが、作成された定義に影響を与えないようにきちんとコメント内に記述されているか気を付けるようにしてください。 それでは後程テンプレートのPHPファイルに実装する基本的な定義を記述していきましょう。 タグでは単純にWEBサイト上で使用されるフォントの指定や、（自分の好みに応じて）背景色の設定を行ってください。それからテーマに沿って、リンクのスタイル属性の設定やヘッダーの設定も必要です。 #wrapperはWEBページ全体をカバーし、#headerはその字の通りヘッダー部分、#blogは最新のブログ投稿をカバーしており、最後に.sidebarと#footerも、それぞれ与えられた範囲の基本的な定義をしています。こちらに関してはまた後程詳しく説明しますね。 ステップ２－Header.php 次にheader.phpを作成します。現時点ではWEBサイトのロゴとカスタムナビゲーションまで設定しましょう。 全て詳しく説明する必要はないかと思いますが、上記のコードはあなたが作成するテーマのheader.php全てに必要であると言うことだけは、覚えておいてください。 初めにDOCTYPEの宣言し、WordPressの設定で入力したWEBサイト名を表示させるためのスタンダードを使用します。それからWordPress 3.0のスレッドコメントを有効にするstyle.cssとPHPを記述します。 ステップ３－カスタムナビゲーションの追加 ここまでで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のみですが）私たちが選んだ場所にメニューを配置することを可能にします。 ステップ４－カスタムナビゲーションのスタイリング カスタムヘッダーナビゲーションを実行しておりますが、現時点では何の変哲もない古めかしいリンクのリストと言う感じで面白くありませんよね。これを修正するにはstyle.cssにnavというクラスを追加します。 .navファイルでご覧いただける通り、ナビゲーションの幅や、背景色、アライン設定、ディスプレイ設定など基本的な宣言を幾つかしています。それからリンクの前に黒丸が出ないように、基本的なULリストの設定もしています。リスト自体は左側にフロートし、相対位置設定もしています。 それではリンクとドロップダウンメニューにスタイルを追加することで、ナビゲーション全体のスタイル設定を完成させましょう。 まずはメニュー部分のリンクをスタイリングすることから始めており、ここからドロップダウンメニューのスタイリングに入ります。「.nav ul ul」の部分では絶対位置設定をし、トップの位置は１００％としています。こうすることにより親リンクの直下に配置することが出来ます。更にドロップダウンリンクを少し目立させる為に背景色も変更しています。そしてZインデックスを99999にすることにより、その下に何があろうとこの要素が他のどの要素よりも一番トップに位置するよう設定しています。 ３つ目のドロップダウンメニューでも違いを出す為に、再び背景色をほんの少しだけ変更しています。配置自体は左側に１００％です。これにより１つ目のドロップダウンよりもずっと右寄りに表示されます。トップの設定は３０％としており、こうすることにより２つ目のドロップダウンと接しているけれども、メニュー全体からは下にずれて表示されます。 最後にドロップダウンメニュー用のリンクをスタイリングします。同様にユーザーがリンクとドロップダウンをホバーした時に、ナビゲーションがどのように表示されるかということも設定します。 ステップ５－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の機能をアクティベートするまでは何もしません。 ステップ６－投稿サムネイルを有効にする 先ほどホームページ上で投稿サムネイルが表示されるよう、コードを追加しましたよね。けれどまだその機能をアクティベートしていないので、実際には何も変わっていません。ではここでfunctions.phpを再び開いて、下記のコードをメニューナビゲーションコードの後に来るように追加しましょう。 上記のコードはもうそのものずばりで、書かれている通りの働きをします。二行目のラインで投稿サムネイルへのサポートを追加しており、三行目はサムネイルの厳密なサイズを定義しています。このアーティクルでは横幅520ピクセル、高さ250ピクセルで設定しました。 ステップ７－Sidebar.php ご想像がつくかと思いますが、sidebar.phpはサイトバーで表示させたい情報全てを賄うファイルです。index.php上でsidebar.phpを取得する為のコーディングは既に済んでいるので、今しなければならないことはsidebar.php内に必要情報を追加することだけです。そうすればホームページ上にサイトバーが表示されます。 そうですね。上記がsidebar.phpが機能する為に必要な全てのコートですね。style.cssで作成したdivを呼び出し、その後に続くコードで、WordPressのバックエンドを経由して希望する順番と方法でウィジェットをサイドバーに追加することが出来ます。しかしながら、他の多くの機能と同様に、正常に動作させるためにはfunctions.phpファイルを多少書き換える必要があります。 このコードは、先ほどのsidebar.phpを登録するようWordPressに指示しています。WordPressではもし希望するなら、複数のサイドバーをいとも簡単に取り扱うことが出来ます。けれどこれ以上書くと、この長いチュートリアルが更に長くなってしまうので、もしご興味があればGoogleサーチしてみてください。 ステップ８－Single.php single.phpは、シングルポストページ用に使用するもので、index.phpで書いたコードと殆ど同じです。唯一の違いと言えば、「comments-template」DIVタグとcomennts.phpを読み込むコードを追加したことくらいです。 ステップ９－Comments.php WordPress 3.0のリリースに伴い全WordPressテーマを通してコメントフォームの標準化を進める事は、フックを介して変更することが可能となるのでテーマ作者やプラグイン開発者にとって非常にやり易くなりとても意味のあることです。 以下のコードは各テーマテンプレートにcomments.phpファイルを追加する為のコードです。 このコードにより、テーマに沿った形でコメントフォームが表示されます。もしコメントフォームの更なるカスタマイズにご興味をお持ちでしたら、こちらのWordPress 3.0 Theme Tip the Comment Formというサイトをチェックしてみてください。 ステップ１０－Page.php WordPressでページを作成すると、タイプした内容を表示するには別のファイルが使用されます。そのファイルがpage.phpです。コード自体はsingle.phpとほぼ同じなのですが、このページではコメントテンプレートは省略したいのと、投稿ナビゲーションに少し変更を加えたいのでその辺りが少し変わってきます。けれどそれ以外は全く同じです。 ステップ１１－Category.php category.phpはユーザーが「特定の投稿カテゴリー」や「投稿時間」「特定の著者」を見るたびに、投稿を表示させる為の情報を提供するファイルとなります。先ほどのpage.phpと同様にコードの殆どがsingle.phpと同じですが、最初の部分だけ少し異なります。 このコードが追加された部分で、WordPressループのすぐ後ろに追加されています。 このコードの役割は、現在ブログのどこを参照しているかを表示する為に大量のPHPのif/elseifステートメントを処理することです。なので例えば「Test Category 1」という特定のカテゴリーを見ているとすると、他のポストより先にまずH2ヘッダーの「Archive for the ‘Test Category 1’ Category:」を表示してくれます。これは一定の日付や著者などに対しても同じ働きをしてくれます。 ステップ１２－背景のカスタマイズとリンクフィード 以前少し触れた通り、WordPress 3.0で実装された機能の1つとして、WordPressのバックエンドを通して画像だったり基本色だったりと背景の作成や変更が可能になったということが挙げられます。 この機能を完全に動作させる為に必要なのは、このたった1行のみです： このようにして、背景のカスタマイズが有効となります。次に同じくらいシンプルなコードを追加します。そうすることにより、関連するリンクフィードがサイト上どこでも使用できるようになります。標準のフィード、コメント、タグ、カテゴリーなどを追加コード無しでヘッダーに加えることが出来ます。 この機能が本来の働きを問題なく出来るように、下記のコードをfunctions.phpに追加しましょう。 ステップ１３－Footer.php 今までの作業を全て完成させる為に、footer.phpファイルを作りましょう。このファイルではstyle.cssで宣言した#footer IDを使用し、基本的な著作権情報や一番下にある最新ストーリーやコメントのRSSフィードリンクを含んでいます。 ステップ１４－その他の機能 ここでは、あまり重要ではないけれど、知ってると便利かもしれない機能を紹介したいと思います。WordPress 3.0のマルチサイト機能で、１つのWordPressをインストールしただけで複数のブログを所有することを可能にします。これもfunctions.phpに追加したいと思います。 まとめ この時点で下書きからWordPress 3.0のテーマを完成させているのではないでしょうか。しかもとても人気のある機能を搭載し、かつ必要最低限のままなので、今後もっとグラフィック的に印象を与えるサイトへと変貌させることも充分可能です。他にこのテーマを使ってどんなことが出来るでしょうか。テーマを変更するだけの基本的なオプションとスタイルは備わっているし、サイドバーを更に追加することだって、How to Create a Better WordPress Options Panel のサイトを使って管理パネルを作ることだって出来ます。
読者のニコラスさんからの投稿です： <body>要素や<HTML>要素内で、IDやクラスが使われているのをよく目にするのですが、何故この様なことをする必要があるのでしょうか。どちらの要素もファイル上1つしか存在しないはずなので、bodyやhtmlをCSSで直接装飾したらよいのではないでしょうか。 ニコラスさんがおっしゃっているのは、おそらくこういうことではないかと思います： ただ下記の様にして、クラスネームを省略してしまったらいいのではないかと言うことですよね： 結局HTMLファイル上に、<html>要素は1つしか存在しませんものね。 ニコラスさんのおっしゃることはよく分かります。確かにWEBページのソース表示を見てみると、<html>タグ内に余計なクラスやIDが記述されているのを見かけることがあります。しかし実際、これらのトップレベルのクラスは非常に便利なんです。それではセオリーの復習と、実際の例をいくつか見てみましょうか。 この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 多数のページ、少数のCSSファイル CSSの基本的な考え方は、マークアップからデザイン部分を抽出することです。100を超える全てのページが同じCSSファイルを共有することだってあるのです。これは様々な理由から、きわめて効率的であると言えるかと思います。まず1つ目の理由として、デザインの変更が必要となった時、100ページそれぞれを修正するよりも、一発修正出来た方が楽に決まっています。トップレベルのクラスはどのページが現在表示されているのか識別するのに役に立ち、またその他のページとは異なるスタイリングを施すことも可能にします。 異なるページで、同じCSSを共有し、異なるデザインを施す。そして最高レベルの要素で発生していることなので、ページ全体のデザインは、個々のクラスを使用して設定することが出来ます。（よろしければ過去のアーティクルもご参照くださいね。） WordPress WordPressのパワーサイトでは、ページを表示するためにテーマを使用します。サイト上の全てのページはアクティブなテーマから作られています。このテーマには「header.php」と呼ばれるファイルがあり、全てのページの上部（doctypeやhead、bodyやhtmlのオープニングタグなど）を出力しています。また、WordPressには「body_class()」というファンクションがあり、こちらはロードされているページの種類に応じて、多数のクラスを出力してくれます。殆どのテーマに下記のようなオープニングボディタグがあります： シングルポストのページでは、この様な出力になるかと思います： ホームページの場合は、この様な出力になるかと思います： このお陰でCSSで使用可能な多数のフックが出来るので、ページの種類に応じて個別設定が可能になります。 html要素を直接スタイル設定することが出来るのに、何故WordPressが「body_class」と呼ぶのかよく分かりませんよね。そうなんです。この機能をhtml要素に適用させることが出来るんですよ。 Modernizr Modernizrは、JavaScriptライブラリで、こちらもトップレベルのクラスを追加してくれます。ロードされ実行される時にクラスを動的にhtml要素に追加します。クラスは現在のブラウザの機能を象徴しており、WordPressが適用させてくるクラスは、個々のページをそれぞれ別々に設定することを可能とするクラスであり、Modernizerが適用させてくるクラスは、ブラウザの機能に応じて同じページが異なって見えるように使用出来るクラスです。 Modernizr使用後のhtml要素はこのような感じになります： なのでCSSを使って、機能に応じて異なる設定をすることが出来ます： その他には？ もしこの他にもトップレベルのクラスの使用方法をご存知でしたら、是非教えてください。
この記事は、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サイトは素晴らしいですよね。
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ 先日「黒の画面上に文字が飛び込んできて、その下にあった画像が明らかになる」と言うようなコマーシャルを目にしました。視覚的にもとてもクールでしたし、それを見ていたらWebKitに-webkit-background-clipと言うテキストを通して背景を表示させるプロパティがあることを思い出しました。なので、似たような効果を再現することが出来るかどうか試してみようと思います。可能だとは思いますが幾つか興味深い問題点もありそうです・・・。 最終的にはこんな感じに仕上がる予定です： デモはWebKitブラウザ（Safari、Mobile Safari、 Chrome）上で動作します。 まずは基本コードから そんなに特別なものでもないんですけれどね： 文字を動かす 下記の様にspanタグで全て文字を囲んでしまうのがミソです： ここで使用しているのはただのspanではありません。インラインレベル要素でラッピングしていると言うことが非常に重要なのです。これがインラインブロックやブロックだったり、何か別なものであった場合もうまく動作してはくれません＝（ このspanタグのおかげで、相対配置を使っての文字移動が可能になりますね。メガ楽しみです！ 上記のコードで最初の文字が上部左へと移動してくれるはず・・・。が！違います。失敗に終わります。ポジショニングのせいでうまく行かないようです。残念ｘ２＝（＝（ 試しにマージンを使ってみたら、なんとうまく行きました！やった～！やっと楽しいアニメーションの時間です。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がリメイクされるかどうかは知りません。ただの噂みたいですけれどね・・・。
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 基本的な宣言と使用用途 このアーティクルを執筆した時点では、上記で使用されている３つのベンダープレフィックスのみが実装されています。けれどプレフィックス無しのバージョンが大規模な変更無しですぐに実装される可能性があるので、プレフィックス無しのバージョンで使用することも考慮に入れた方がよいかもしれませんね。 そしてこちらのアーティクル上では、コードの簡潔化を図るために-webkit-のみ記述します。実際に現実社会で使用する際には、きちんと全てのベンダープレフィックスを記述してくださいね。 複数時間軸の指定 もしアニメーションの開始と終了のプロパティが同じならば、０％と１００％をコンマ区切りで指定する方法もあります： 勿論、アニメーションを二度実行させることも出来ますし（または偶数回なら何度でも）、alternateを使って逆方向に戻って来させることも出来ます。 別々のプロパティを持つキーフレームアニメーションの呼び出し プロパティ 値 timing-function ease、 ease-out、 ease-in、 ease-in-out、 linear、 cubic-bezier(x1, y1, x2, y2)（例： cubic-bezier(0.5, 0.2, 0.3, 1.0)） duration と delay Xs または Xms duration-count X fill-mode forwards、 backwards、 both、 none animation-direction normal、 alternate アニメーションの速記 それぞれ個々の値をスペース区切りで記述することも出来ます。durationとdelayを同時に使用する時は順番に記述する必要がありますが、それ以外は順不同で構いません。下記の例で言うと 1s＝duration、2s＝delay、3＝interationsになります。 transformとanimationの組合せ 複数のアニメーション セレクタ上で値をコンマ区切りすることにより、複数のアニメーションを宣言することも可能です。 サポートしているブラウザ Firefox 5+、 IE 10+、 Chrome 6?+、 Safari 5+ 参考サイト Mozilla Docs
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ 読者のジェイソン・ルチェッシさんが、ロールオーバーするとイメージキャプションがスライドインしてくるデモを送ってくださいました。効果を実現させるために無数の入れ子DIVタグが使われていたので、イメージキャプションを付ける標準HTML5の構造とCSSを使って私なりの方法を考えてみました。 そもそもこの効果の目的は一体何なのでしょうね。レイアウト上のスペース削減や、デザイン上キャプション自体が少々目障りだから条件付きで表示されるだけにしておいた方がよいとか・・・。送っていただいたデモだけでは分からなかったのですが、もし気に入らなかったら使わないでおいてくださいね。 HTML5の構造 ピュアでセマンティック的にも全く問題のない、イメージキャプションのマークアップです。 CSSの構造 エンパワーメントの概念は「figure要素は基本的なビルディングブロックで、全てをラップしている。」ここから来ています。figure要素はposition: relative;を指定する必要があり、これによりキャプションを配置したい場所に絶対配置することが可能となり余計なスペースを使うこともありません。またキャプションスライド時に、figureの枠から出たら消滅させる為にoverflow: hidden;も必要になってきます。 スライディングアクションをキメる 画像がロールオーバーされた時にきっちりスライディングアクションをキメるためには、キャプションを完璧に隠さなければなりません。まずはキャプションを左下少し越えたところに配置し、opacityを0にして完全に隠しましょう。それからfigureの範囲内がホーバーされた時に、キャプションをスライドインさせ、opacityも元に戻しましょう。実際にスライドさせるには「transition」を使用する必要があります。 オプション デモではそれぞれ配置場所とスライドインさせる方向が異なります。これはただfigureにクラス名を追加し、クラスによって配置等が異なるように設定してあるだけです。 キャプションに気付いてもらうために・・・ 折角苦労してスライドインするキャプションを作ったのに、誰も気付いてくれなかったら意味がありません。なのでクエスチョンマークのサインを使って、キャプションの存在をアピールしてみましょう。セマンティック的によくない不要なマークアップを増やすよりも、疑似要素を使って生成されたコンテンツを使ってみましょう。 注目していただきたいのが、position: absolute;を使っているのにCSS上でそれ以外に配置に関する値がないところです。何故かと言うと、配置はオプションで作成したクラスの方で指定しているからです。きっとクエスチョンマークは、キャプションがスライドインしてくる隅に配置するのがいいかと思いますので、こんな感じになります： 実際に使ってみること！ このサイトで見つけたアイデアは、是非実際使ってみてください。可能なら（全部あなたが考えたと上司に伝えても構いませんので）会社の大きなプロジェクトなどで使用して、どんどん昇給してもらっちゃってください。
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ こちらの記事は2010年3月2日に掲載されたものに、最新のブラウザサポート状況やシンタックスなど加筆修正しています。 2011年7月20日： シンタックスの再更新 「Safari 4+」「 Chrome 1+」「 Firefox 3.6+」「Opera 11.10+」などは全てCSS3グラデーションをサポートしています。この幅広いブラウザサポートにより、ますます進歩的で魅力的なアピールを実現出来ます。更に付け加えると、CSS3グラデーションでは代替えのもの（画像など）を指定することが出来るので、CSS3グラデーションをサポートしていないブラウザ上では、単純に代わりの画像などが表示されます。 けれど・・・ちょっと待ってください。もしいずれにせよ画像を使用しなければならないのなら、何故わざわざCSSでグラデーションを宣言する必要があるのというのでしょうか。これは私もかなり長いこと疑問に思ってきたのですが、するだけの価値がある理由が１つあります。それはCSS3グラデーションをサポートしているブラウザは、代替えの画像を読み込まないのです。HTTPリクエストが1つ減るだけで、WEBサイトの読み込みが格段速くなります。 書き方 さて、では本題に入りましょうか。こちらは最もシンプルな、上から下へのライン状のグラデーション用CSSです： プレフィックス無しバージョンも追加することが出来ますが、まだどのブラウザでもサポートされていないし、間際に仕様変更があっても困るので止めておいた方が無難でしょうね。 ではもう一度、コメント部分を抜いて書式を揃えて書いてみましょう： CSS3 Please!というサイトでは最新のシンタックスを取り揃えているので、参考になさってくださいね。 レンダリングエンジンごとのシンタックス Mozilla系（Firefox、Flockなど） Mozilla系のシンタックスです（詳細はコチラを参照）： グラデーションを宣言する最もシンプルな方法は、ただ色のリストをカンマ区切りするだけです。上から下へ等間隔の配色でグラデーションが完成します。上記のサンプルコードで、グラデーションを下から上に配置したい場合は、pointとangleの部分を90degに変更します。放射状グラデーションの場合はこちらを使ってください：-moz-radial-gradient WebKit系 （Safari、Chromeなど） WebKit系（Chrome 1-9、Safari 4-5）のシンタックスです（詳細はコチラを参照）： 古いシンタックスを廃止しもっとシンプルなものに変更する傾向にあり、Chrome 10とSafari 5.1ではこのように変わりました： Opera Operaではバージョン11.10からMozillaや最新のWebKitと同じ形式でCSS3グラデーションをサポートしています。 Trident（IE） Tridentのシンタックスです（厳密に言うとCSS3ではないのですが・・・。詳細はコチラを参照）： IE9では未確認ですが、IEの6から8は「filter」でうまくいく筈です。けれど正当なコードではありません。「-ms-filter」はIE8以降で動作します。 厳密に言うと、IEはこのリストに加えない方が良いのかもしれません。filterプロパティを使うと実際動作しますし、プログラム的にグラデーションを宣言することが出来て助かります。けれどこの方法だと、初めにfilterを使い画像を代替えとして使用するのではなく、背景画像を宣言することによりfilterを上書きしてしまうのです。かといって代替画像を書かないわけにもいかないし、この方法は使わない方が賢明でしょうね。 Stopとは WebKitでもMozillaでも、グラデーション用のシンタックス内に「stop」があります。このstopはオプションで、色と位置を追加指定することが出来ます。どういう意味かと言うと、グラデーションは単純にある単色から始まって別の単色で終わるのではなく、stopの位置で色を切り替えることが出来、複数指定することが可能です。 HTTPリクエストの減少 FirebugのNetタブでページで使用されている全てのリソースをチェックすると、結構面白いことが見えてきます。 上記のスクリーンショットはFirefox 3.6です。グラデーションの代替え画像が読み込まれていないことが確認出来ます。すなわちHTTPリクエストを減らすことに成功したと言うことです。 けれどFirefox 3.5.8では結局代替え画像も読み込まれてしまうんですけれどね。 こちらの画像はVistaで開いたFirefox 3.5.8です。グラデーションの代替え画像は読み込まれ（しかも使用され）ているのが分かります。なので古いバージョンのブラウザではHTTPリクエストは減少されません。 WebKitのブラウザだともう少しあやふやな感じです。 WebKitブラウザでも、グラデーションをレンダーするためにCSS3プロパティを使用します。けれど同時に代替え画像も読み込んでいるので、HTTPリクエストは省略されていません。唯一の利点は、色指定をプログラム的に宣言出来る事のみです。 2010年8月9日更新： Safari 5.0.1はまだ代替え画像を読み込んでいます。けれどChrome 6.0.472.25 devでは代替え画像を読み込まなくなりました！ 2011年4月1日更新： Safari 5.0.4でもまだ代替え画像を読み込んでいます。Opera 11.10は正しい判断を下しましたね。代替え画像を読み込んでいません。 2011年7月20日更新： 遂にSafari 5.1で、代替え画像を読み込まなくなりました！ 数字で記述すると言うこと HTTPリクエストの減少により得られたスピードアップと言うのは、ものすごい武器になると思います。WEBパフォーマンスについて追究していくと、HTTPリクエストを減少させることがページ読込み時間改善の1番の近道になると思うからです。更にCSS3グラデーションを使う利点がもう1つあります。それはこのグラデーションがプログラム的に数字で記述されていると言うことです。色の変更が必要だったら、数字を少し変更すればいい。わざわざ画像編集プログラムを使って画像修正する必要はないのです。サイトのメンテナンスが非常に簡単になりますし、値の調整も朝飯前です。きっとすぐにこういう値のアニメーション化とかJavaScriptライブラリに追加されるんでしょうね。すごく楽しみですね。 自動伸縮 画像でグラデーションを表現するには、CSSで背景画像として宣言してリピート表示させるのが一般的です（大抵サイズ的にも丁度よい1px幅で作る方が多いですよね。）。けれど結果としては、固定された場所は確かにグラデーションになりますが、はみ出した部分は単色になってしまいます。これでうまくいく場合もありますが、グラデーションがボックス全体の高さと幅に合わせて伸縮（ストレッチ）してくれた方が断然いいですよね。これもまたCSS3グラデーションの方が便利な理由の一つです： では果たして「今」使うべきなのか？ 2010年3月2日現在の回答：そうですね。大分その時期は近付いてますね。もし数値記述を重要視するのであれば、答えは「Yes」です。今から使う方がよいでしょう。けれどスピードアップのためだけに使用するのであれば、現段階サポートしているのはFirefox 3.6+のみなのでもう少し待った方がよいかもしれませんね。 2011年4月1日現在の回答：概ね「Yes」です。特に線状グラデーションならば、是非使ってみましょう。線状グラデーションはクロスブラウザ対応ですし、サポートしていないブラウザでは使用されないだけですからね。勿論実際の使用ケースによって異なりますが、一般的にグラデーションは視覚的にも微妙な表現ですし、単色カラーや画像で置き換えたとしてもさほど大きな問題にもならないかと思います。 参考サイト WebKitブログ － グラデーション用最新シンタックス Mozilla docs － 線状グラデーション、線状グラデーションの繰り返し、放射状グラデーション、放射状グラデーションの繰り返し CSS3 Please － グラデーション用の最新シンタックスやその他CSS3関連情報多数 Lea Verou － 巧妙かつ実践的な背景テクニック、グラデーション用構文自動作成コンバータ Opera紹介ブログ － 線状グラデーションサポート グラデーションギャラリー 放射状グラデーションに関する情報多数
この記事は、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( )させることを思い付きました。けれどあまりうまくいきませんでした。きちんと停止してはくれるのですが、その後再び再生されないことが何度もあったのです。 一番スムーズに行く方法としては、オーディオ要素を全てのメニューアイテム用に複製することでした。こうすればメニューアイテム１つ１つがオーディオ要素を所有しているので、サウンド再生もオーバーラップも可能になります。
まずはこちらのHTMLから・・・： p要素2番目のpタグにスタイル設定したかった場合、以下のどちらも同じ働きをしてくれます： けれど勿論相違点もあります。 :nth-childセレクタをシンプルに説明すると： パラグラフ要素である親要素に包有される2番目の子要素である。これらの状態を満たす要素を選択するということになります。 :nth-of-typeセレクタをシンプルに説明すると： 親要素に包有される2番目のパラグラフ子要素を選択するということになります。 よく言えば、:nth-of-typeの方が「条件が少なくて済む」という感じですね。 それではマークアップを以下の様に変更したとします： 今度はこちらの記述ではうまくいきません： こちらはうまくいきます： 初めの:nth-childセレクタの方が何故うまくいかないかと言うと、<h1>Words</h1>が追加されたことにより、パラグラフ要素（1）であり、しかも2番目の子要素（2）である条件が当てはまるのは、「Little」になってしまったからです。そのため:nth-childセレクタは「Piggy」ではなく「Little」を選択します。:nth-of-typeセレクタの方で問題がないのは、「Piggy」が親要素に含有される2番目のパラグラフ要素であることに変わりがないからです。 それではもし<h1>タグの後ろに<h2>タグを追加したとしたら、どうなるでしょう。今度は2番目の子要素はp要素ではなくh2要素になります。従って上記2つの条件に当てはまる要素は存在しなくなってしまうため、これまたうまくいきません。けれど:nth-of-typeセレクタの場合は、引き続き問題なく表示されます。 なんとなく今まで:nth-childの方が一般的だと思っていましたが、:nth-of-typeの方が便利で使い勝手がよさそうですね。「もし2番目の子要素がたまたまパラグラフ要素だったら、選択する。」なんて条件を使う気になりますか？そういうことも稀にあるかもしれませんが、それよりも:nth-of-typeを使って「2番目のパラグラフを選択する」とか「テーブル内の行を3行おきに選択する」とした方が、断然使い易いような気がします。 私が「ちょっと待ってよ。なんで:nth-childセレクタがうまくいかないんだ？」と思うときは大抵指定した子要素の番号がずれてしまっている時だったりします。そのため:nth-childを使用する時には、下記のサンプルの様に親要素に縛りをかけて、子要素自体は特定しないで置いておいた方が良いかと思います。 勿論その時々の状況によりけりですけれどね。 各ブラウザのバージョンで言うとFirefox 3.5+、Opera 9.5+、Chrome 2+、Safari 3.1+、IE 9+で:nth-of-typeをサポートしています。jQueryを使えば更に深いサポートが可能になりますが、jQueryでは:nth-of-typeの方はサポートを止めてしまいました。なんだかおかしな話ですよね。最初に聞いたときは使用回数が少ないのが原因かと思いました。（ちなみにjQueryを使って記述する場合は、セレクタを使ってクラスを適用させ、そのクラスにスタイル設定します。\$("セレクタ").css("スタイル設定");）こちらのサイトでは、:nth-of-typeをサポートするプラグインをダウンロードすることが出来ます。 他にも関連セレクタとして「:first-of-type」「 :last-of-type」「 :nth-last-of-type」「 :only-of-type」などもありますので、お忘れなく！こちらで更に詳しく説明しています。 もし視覚的サンプルを試してみたければ、リア・ヴェローさんが作ったこのツールが面白いですよ。
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ CSSアニメーション（ala @-webkit-keyframes）の再スタートは、想像するほど簡単ではありません。ではまず、CSSアニメーションを一度だけ実行すると設定したとしましょう： ロゴ部分にクラス指定して実行したとします： その後、何らかの理由・・・例えばクリックに伴い・・・など、アニメーションを再度実行させたいと仮定します。きっとみなさんCSSで再実行する方法があると予想するかと思いますが、私が思いつく限りそのような方法は残念ながら見当たりません。JavaScript（jQuery）でクラス名を一度削除させて、再追加させてみたりするかもしれませんね： 本当にしなければならないことは、要素をそのページから一度完全に削除して、改めてインサートすることです。jQueryを使った簡単なデモとしては、クローンを作成して、オリジナルのすぐ後ろにクローンをインサートし、その後オリジナルを削除する方法があります。 もっと簡単な方法はありますか？ こういう投稿をすると、大抵いろんな方がもっと簡単な方法を提案してくださることが多いので、今回もそういう提案があるとよいのですが・・・。
一昔前、IE（5.5）などでは非標準のCSSを使って、スクロールバーをカスタマイズすることが可能でした。例えばscrollbar-base-colorをスクロールする要素（<body>など）に使って、結構過激なことなんかも出来ました。けれどIEはそれを廃止してしまいました。 最近になって再びスクロールバーをカスタマイズすることが出来るようになりましたが、今回は非標準CSSではなくWebKitを使うことになります。プロパティはベンダープレフィックス（::-webkit-scrollbarなど）で、シャドウＤＯＭを使用しています。この方法が使われるようになって数年経ちますが、ディビッド・ハイアットさんが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サイトでも、コードスニペットの部分でカスタムスクロールバーを使用しています。スクロールバーがあまり目立たないようにしてあるので、コードの着色部分とあわさって目がチカチカすることもなく、いい感じに仕上がってますね。
あまり普段やってみようと思うことはないかもしれませんが、<img>タグにも背景色を付けることは可能です。例えば画像周囲に2本の枠線を引きたかったとします。1本目の枠線は通常通りborderを使用し、もう1本の方はbackground-colorとpaddingを使ってあたかも枠線かのように見せることが出来ます。もしくは背景色を真っ赤にセットすれば、画像が抜けているところが一目で確認出来ます。 他に背景色を使う可能性としては、画像の透過部分から背景色を透かして見せたい場合などでしょう。実際この方法ならば、何でも自分の好きな形を作って後ろ側に背景色を設定すればよいのです。すなわち作成した形の色をCSSで好きなように変えることが出来るのです。更に言えば、CSSでコントロールするのですから、CSSで出来ることなら何でも出来ると言うことです。アニメーションにすることだって出来ます。 この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ まずは画像の作成ですが、透過させない部分はソリッドカラーで残します。以下のサンプルの場合は白ですね。そして背景色で「形作りたい」個所を透過させます。フォトショップで見るとこんな感じです： そこにマークアップを加えていきます： そして背景色を付けます： それから何色かが順番に繰り返し表示されるようなアニメーションを作ります。シンタックスは2つとも必要です： 最後にアニメーションシンタックスを画像に適用させます： これが完成図です！デモページで実際のアニメーションを確認してみてください。おまけでマウスオーバーすると色が変わる自転車の画像もつけておきます。
この記事は、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%と言う巧妙な記述は、アスペクト比が１６：９のビデオにはうまく作用するのですが、全てのビデオをカバーしてはくれません。 追加のマークアップを記述する必要があります。全てのビデオは別の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だけで簡単にツールチップが作成出来るのです！
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 さて、GoogleやYahoo!、MSNと言った検索エンジンは、検索時の関連性を決定するためのインデックスを実行する時に、もっぱらページのテキストコンテンツをチェックしているというのはご存知かと思います。また、検索エンジンはきちんと組織化区分化されたコンテンツを重要視するため、<h1>と言ったヘッダータグをHTML内で使用することが重要だと言うこともご存知かと思います。けれどもしWEBサイトに時代遅れな大きめ文字のみっともないヘッダーを使いたくなかったとしたらどうしましょうか。グラフィックで置き換えますか？それもいいアイデアですよね。けれど<h1>タグを<img>タグに置き換えてしまうと、検索エンジンにそっぽ向かれてしまうのでそんなことはしたくありませんよね。心配ありません。そんなことしなくていいんです！ 最近いい感じで使われているトリックの1つは、ヘッダー文字を画像に置き換える時にclassを使用することです。ヘッダータグは今まで通り使用し、ただそのタグにこのように独自のclassを追加記述するだけです：<h1 class="headerReplacement">セクションヘッダー</h1> そしてCSSでは下記のようにclassのスタイル設定をしてください： こうすれば、みっともないヘッダー文字は検索エンジンに引っかかる状態のまま、代わりに実際表示させたい画像を置換することが出来ます。またこのテクニックはスクリーンリーダーをご使用なさっている方々や、画像やCSSを無効化させている方々に対しても親切な方法と言えると思います。
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 先日、とある方にこのテクニックに関して質問されたのですが、その時の私の反応は「チュートリアルとして記事にするにはあまりに平凡過ぎるのではないか」というものでした。けれどもそれからしばらく考えてみて、なかなか興味深い点も幾つかあることですし、みなさんに興味を持っていただける内容なのではないかと思うようになったのでこちらに取り上げることに致しました。 今回のアイデアは、ただ単にテキストを画像の上にオーバーレイ（重ねて表示させること）させるだけのことなのですが、左寄せのブロックがきちんとテキスト全体を充分な余白で囲んでいることに注目してください。こちらのスクリーンショットのサンプルをご覧ください： デモへのリンク スキーマ HTML 画像を背景画像としてDIVタグの中に記述してしまえば簡単でしょう。けれどもここでは画像はコンテンツとして扱われており、HTMLにも属しています。そしてDIVタグは絶対位置指定用の外枠として使われています。 CSS このように記述すると、テキストをいい感じで画像の上に重ねて表示してくれますが、テキストを取り囲む黒の半透明の部分の表示までは成功していません。h2タグはブロックレベル要素なので、ここではスタイル設定用としては役に立ちません。事前に幅が設定されていないインライン要素が必要になってきます。 なので、h2タグの内側にspanタグを追加しましょう： spanタグを使っての、テキストと背景スタイル設定方法： 問題点 このままだとテキストを改行すると同時にブロック自体も改行されてしまい、1行目の最後の文字の右側と2行目の最初の文字の左側の余白が確保されません。パディングの意味が無いのです。 これを解決するためには、<br />タグ前後にspanを追加して余白を確保する必要があります。 追加したspanにもCSSでスタイル設定して、パディングを加えてあげます： セマンティック的に見ると・・・ 今までのコーディングでデザイン的には完成しましたが、随分と細かい余計なHTML要素が増えてしまいました。ハッキリ言えばspanタグですね。jQueryを使えばこれを簡単に解決することが出来ます。単純にHTML文からspanタグを削除して、下記のjQueryを適用させれば完璧です：
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 ページ上の全ての要素は矩形のボックスに囲まれています。サイズ変更やポジション変更、その他の動作などは全てCSSでコントロールすることが可能です。それではコンテンツの中を変更した時、ボックスはどのような動作を見せるでしょう。もしボックスの高さを設定していなかったら、ボックスの高さはコンテンツを含有するのに必要なだけ自動拡張してくれます。けれどももしボックスの高さや幅が設定済みで、中のコンテンツが収まりきらなかった場合はどうなるでしょう。ここでCSSオーバーフロープロパティの出番です。そのような場合にどのように処理したいかを指定することが出来ます。 オーバーフロープロパティには4つの値があります：visible（デフォルト値）、hidden、scroll、autoです。まだあまり知れ渡っていませんが、関連するプロパティとしてはoverflow-yとoverflow-xもあります。 それでは1つ1つ使い方など。細かく見ていきましょう。 Visible もしオーバーフロープロパティを設定しなかった場合、デフォルト値はvisibleです。なので一般的には、もし別の設定の上書きをするなどという場合以外には、わざわざ設定する必要もないかと思いますよ。 ここで覚えておきたい大切なことは、コンテンツがボックスからはみ出したとしても、ページ全体の流れも影響を与えることはありません。例を見てみましょう： 文章が含まれたボックスの高さは設定しない方が無難と言うのが定説ですので、それに従っておけばこのような問題は起こらないんですけれどね。 Hidden デフォルト値のvisibleと正反対なのが、hiddenです。その言葉の通り、ボックスからはみ出したコンテンツは全て隠してしまいます。 hiddenは動的なコンテンツで、しかもそれがオーバーフローすることによりレイアウトに大きな影響を与えてしまうような場合には、とても役に立ちます。しかしながら、hiddenにより隠されたコンテンツには、全くアクセス出来なくなってしまうので注意してください。例えばユーザーがデフォルトの文字サイズを大きく設定していた場合、中の文章が収まりきらずボックスからはみ出したが故に隠れた部分は一切見えなくなってしまうというような症状が起こります。 Scroll scrollの設定をするとボックスからはみ出した部分は隠れてしまいますが、ボックス内に設置されるスクロールバーによりコンテンツの内容を確認することが出来ます。 ここでの留意点は、水平方向と垂直方向の両方にスクロールバーが表示されると言うことです。もし片方は必要なかったとしても、とにかく表示されてしまいます。 Auto autoはscrollと非常に似ているのですが、scrollの場合は必要な時だけスクロールバーが表示されます。 フロートの解除 少し変に感じられるかもしれませんが、オーバーフローの使用目的としてもう1つ有名なのがフロートの解除です。オーバーフローの設定をしても、その要素のフロートをクリアしてくれるわけではなく、自分自身をクリアします。もう少し分かりやすく説明しますね。 親要素：autoかhiddenのオーバーフロー設定有り。高さ設定無しと仮定。 子要素：フロート設定有り。 上記のような場合、オーバーフロー設定有りの親要素は、フロート設定された子要素を含有する充分なサイズまで自動拡張するので崩壊してしまうことがありません。 サンプル画像をご覧ください： フロートを極めるという記事でもっと詳しい説明をしておりますので、よろしければご参照くださいね。 各ブラウザでの懸念事項 CSSではよくあることですが、オーバーフロープロパティでもブラウザによって相違点が色々とあります。 例えばこんな感じです： スクロールバーはボックスの内側か外側か？ Firefoxはボックスの外側に表示させますが、IEは内側です。本来内側に表示されるべきなので、IEだけが正しいと言えるでしょう。 上記の画像で相違点をよく確認してくださいね。 IE8でのボックス拡張バグ 面白いバグは様々ありますが、その中の一つがIEでWEBページ全体を隠してしまうと言う現象です。詳細はこちらの記事をご参照ください。 フロートレイアウトの破壊 IEの6と7と8ではデフォルト値のvisibleの場合でも、画像などのコンテンツに合わせて、コンテンツだけではなくボックス自体が水平方向に自動拡張してしまいます。この現象はフロートを使って列方向（カラム）のレイアウト配置していた時などに大打撃を与えてしまいます。拡張された1つ目の列が他の列を下に押しやってしまって、見るも無残な結果になることがあります。 CSSでスクロールバーのスタイル設定は可能か否か？ 古いバージョンのIEでは可能でしたが、今はもう無理です。他のフォーム要素と同様に、スクロールバーはCSSでスタイル設定することは残念ながら出来ません。これがいいのか悪いのか私自身はどちらでも構わないのですが、1つだけ言いたいのはWEBサイトのコンテンツあちらこちらにスクロールバーが表示されている状態はちょっとみっともないです。もしスクロールバーのスタイル方法など考えたいのであれば、JavaScriptで調べてみたらいいかもしれませんね。 IEのトリック IEでは垂直方向のスクロールバーが、必要であろうがなかろうが表示されます。これにより水平方向のジャンプを防止するためには良いのかもしれませんが、いつでも大歓迎と言うわけではありません。body要素にautoのオーバーフロー設定をすれば、これを防ぐことが可能です。
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 もしかしたら何度も申し上げているかもしれませんが、WEBデザイン上の全ての要素は矩形のボックスです。私は本当の意味でこれが分かった時、初めてCSSベースのWEBデザインというものをしっかりと理解出来るようになり、また自分で表現したいレイアウトを実現出来るようになりました。今までにもボックスのポジショニングに関しては少しお話してきたかと思います。 しかし何気にボックスそれ自体に関しては、あまりお話していませんでしたよね。ボックスのサイズと言うのはどのように計算されているかご存知ですか？ボックス構成は以下の図で表すことが出来ます（黄色の部分がボックスで、点線部分はコンテンツです。）： もしFirebugをお使いでしたら、これは見慣れた図ですよね。このFirebugの図は、どの数字がどのようにボックスに影響を与えるのかをよく表していると思います： 1つ目の例でも2つ目の例でも、マージン部分は白で表されていることに注目してください。マージンはボックスのサイズには影響を与えません。けれども、ボックスの周りにある他のコンテンツに対しては影響を与えます。そのためCSSボックスモデルの使い方を理解することは大切になってきます。 ボックスのサイズは以下のような方法で算出されます： Width（幅） width + padding-left + padding-right + border-left + border-right Height（高さ） height + padding-top + padding-bottom + border-top + border-bottom これらの要素が宣言されなかった場合は？ パディングやボーダーが宣言されなかった場合は、ゼロ（CSSリセットを使った場合が殆ど）か、ブラウザのデフォルト値（フォーム要素はリセットされないことが多いので、ゼロではない可能性の方が高い）になります。 ボックスの幅（width）が宣言されなかった場合（しかもボックスがブロック・レベル・エレメントだった場合）には、少し面倒くさいことになってきます。まずはここからお話して、後ほどそれ以外のことについてもお勉強しましょうか。 ブロック・レベル ボックスのデフォルト幅は？ もしボックス幅を指定をせず、またボックスのポジション設定がstaticかrelativeだった場合、ボックス幅自体は100％のままです。そしてパディングとボーダーは外側に付け加えられるのではなく、ボックスの内側を削っていきます。けれども、もし明示的にボックス幅を100％と指定した場合には、パディングは通常通り外側に設置されます。 ここで学べることは、ボックスのデフォルト幅というのは厳密に言うと100％ではなく、「（いろいろ差し引いて）残ったもの」と言う感じです。ボックス幅を指定するかしないかによっていろいろと状況も変わってくるので、覚えておいて絶対に損はないです。 いつも頭を抱えてしまうのが、テキストエリアです。テキストエリアではcols属性は必須です。このcols属性を満足させる為に幅指定もした方が無難です。そして子要素を持つことは出来ません。その為、テキストエリアを使用する場合には、明示的に100％の幅指定をして、同様にパディングも設定しておけば、充分なエリアを確保出来るはずです。静的に設定された幅の環境ではピクセル幅に頼ることもしばしばありますが、流動的な幅設定の環境ではそれがうまく行くとは限りません。 絶対配置あり、幅指定なしの場合 ポジション設定がabsoluteで幅指定は無しの 場合はこれまたやっかいな動きを見せてくれます。この場合の幅とは、コンテンツを含有するために充分なエリアに過ぎません。従ってもしボックス内のコンテンツが単語1つだった場合には、その単語を表示するのに必要なエリアが「幅」となります。もし2つの単語だったら、その分幅が広がります。 ボックスの横幅は親要素（relative設定された直近の親要素か、ブラウザ ウインドウ）の100％に達するまでは広がり続け、100％に達したら回り込みを始めます。コンテンツを含有するために、ボックスが垂直方向に自動拡張することには疑問を感じないのに、同じことが垂直方向で起こると変な感じがしますね。テキストはプラットフォーム間で異なる方法でレンダリングされるということは言うまでもありませんが、それぞれのブラウザによって対応方法にクセがあるので、奇妙に感じる気持ちは否定しなくていいと思いますよ。 幅指定なしでfloat設定されている場合 幅指定なしで、float設定されたボックスも同じような動きを見せます。ボックス幅はコンテンツを含有するのに必要な分だけです。そして親要素（今度はrelative設定されている必要はありません）の幅に達するまで広がります。幅指定されていないボックスというのは非常に壊れやすいので、ページ全体のレイアウトのようにミッションクリティカルなシナリオなどでは依存しない方がよいでしょう。もしサイドバーとして使用するために、コラムをfloat指定して、必要幅を確保するために画像などの要素を内部に組み込んだりしてみた暁には、見事にトラブルにぶち当たります。 インライン要素だってボックスです 今まではボックスレベルの要素についてお話してきました。ボックスレベルの要素ならボックスとして考えるのも簡単かと思いますが、インライン要素だってボックスなんです。とてもとても細長い矩形を思い浮かべてみてください。その細長い矩形が各行を包み込んでいます。インライン要素でもその他のボックスのように、マージンやパディングやボーダーを設定することが出来るのです。 この「包み込み」がとても紛らわしくて、上記のように一見左側のマージンはボックス全体を右側に押しやるのではないかと思いますが、実際は一行目のみです。何故ならボックスの開始場所はそこのみだからです。パディングは今まで同様各行の上部と下部に適用されます。上の行と下の行のパディングが重なり合った場合は無視され、本来必要な高さのみ維持されます。背景は動作を確認し易いように、透き通らせています。 自分の目で確認してみましょう 実際にページ上でボックスがどのようになっているのか見てみたいと思いませんか？スタイルシートに以下のコードを書き込んでみてください。
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 この記事は元々2007年の後半にVolkan Görgülüと共同執筆したものですが、今回加筆修正致しました。 CSS Sprites使い方 本当に「知っている」と言えますか？まず、その名前だけ聞くと、ちょっと誤解を招くかもしれません。なぜならここで言うSpritesは、あなたが今思い浮かべているであろう小さい画像のことではなく、もっと大きな１つの画像のことを差しているからです。今までにオンとオフの状態が同じ画像に含まれていて、バックグラウンドの位置を変更することにより、画像表示が切り替わるようなCSSのテクニックを見たことがありますか？ こちらにそのCSSのトリックの一例があります。 CSSスプライトもその延長上にあると考えてみましょう。相違点はと言うと、前述のCSSテクニックの場合は2つか3つの画像が1つの画像にまとめられている程度ですが、CSSスプライトの場合は何十個何百個と無制限の画像を1つにまとめることが可能です。「スプライト」という言葉の語源はもうかなり昔のコンピュータグラフィックとビデオゲーム産業に由来します。そのアイデアはコンピュータがグラフィックをメモリに取得することであり、その画像の一部分のみを表示させます。この方が次々に新しい画像を取得するよりも速いのです。スプライトは大きな複合グラフィックです。CSSスプライトはこれと殆ど同じ理論を使っています：まず画像を取り出して、シフトすることにより一部分のみを表示させ、複数の画像を取得することにより発生するオーバーヘッド（システム全体の負荷）を軽減させます。 Spriteでウェブパフォマンスの向上 いいえ、そんなことはありません。もう大分過去のことになりますが、昔はみんなページのロードスピードを速くするために画像を小さく分割していました。そういった技術は分割された画像が同時にロードされてくるので、スピードが短縮されたかのように感じられました。けれど全ての画像は1つ1つ異なるHTTPリクエストとして送信されるのであんまり効率的とは言えないかと思います。 Tenni TheurerさんがYahoo!のユーザーインターフェースブログに掲載した”Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests（パフォーマンスリサーチ Part1：HTTPリクエストを減らす80/20ルールとは？”という記事を参照してみましょう。 テーブル１はHTMLドキュメントのダウンロードに5％から38％ほどを必要とするWEBサイトの一覧です。残りの62％から95％は画像やスクリプトやスタイルシートと言ったHTMLドキュメント内のその他のコンポーネントを取得するためのHTTPリクエストとして使われています。HTTPバージョンのレスポンスの速さや各ユーザーのブラウザにより異なりますが、ページ上に沢山のコンポーネントを保有していることは、ブラウザがホスト名ごとに並行してたったの2つか4つのコンポーネントしかダウンロードしないという事実によりさらに悪い影響を与えます。こういった経験により、HTTPリクエストの数を減少させることは応答時間の減少にも大きく影響し、またもっとも簡単なパフォーマンスの向上と言えるのではないでしょうか。 テーブル １ 各有名サイトでのローディングに費やす時間比較 HTMLの取得にかかる時間 それ以外 Yahoo! 10% 90% Google 25% 75% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% CNN 15% 85% 1つ1つの画像は、例えそれが<img=タグで記述されてようと、CSSで背景画像として記述されていようと、結局は別々のHTTPリクエストです。従ってこういった個々のリクエストがどのような悪影響を及ぼしてくるかは、想像するに容易いかと思います。 CSS Sprite(スプライト)活用方法 それでは、CSSスプライトを使用する前の例から見てみましょうか。下記のCSSでは、それぞれのクラスでは背景画像を指定しているのに対し、アンカータグ自体は背景画像がNONEになっていることに注目してください。 CSSスプライトを使用すれば、もう少しこのデータを軽くすることが出来ます。5つのボタンの為に10個の別々の画像（5つはデフォルト状態の画像で、残りの5つはマウスがロールオーバーした場合の画像）を用いる代わりに、全ての画像を1つにの大きな画像にまとめてしまえばよいのです。あまり細かいところまでは説明しませんが、簡単な流れをお見せしましょう。まず1つの大きな画像を作成してください。横幅は使用する画像の中で一番横幅が広いものに揃え、縦幅は使用する全ての画像の高さ合計プラスXピクセルを加えてください。Xピクセルとはこれからひとまとめにする画像の合計数です。次に左揃えの状態で、画像を1ピクセル間隔空けながら縦に並べてください。 それではCSSスプライト使用後の例を見てみましょう。CSSではアンカー要素自体には1つの背景画像が設定されており、個々のクラスにはY座標で背景画像の位置を変えているだけです。 これによりHTTPリクエストの数を9個も減らすことに成功し、画像の合計サイズも6.5KB減少しています。こんな小さなサンプルでもこれだけ大きな数字の変化があるのですから、本物のWEBサイト上ではどれだけ違ってくるのか想像してみてください。 CSS Sprite(スプライト)ツール Chuck Norriceさんは「大きなことを成し遂げるには、それ相当の大きな貢献をしなければならない」とおっしゃっていたことを思い出しました。本当に彼がおっしゃったかどうかは定かではないのですが、まぁとにかくよいアドバイスだと思いませんか。しかし幸いにもCSSスプライトを簡単に作成し実装出来るようなWEBサービスが存在するのです。本当に数多くのサービスが存在するのですが、中でも私がおススメは、SpriteMeです。 SpriteMeを使ってみましょう SpriteMeはブックマークレットです。なので一度ブックマークバーに登録してしまえば、あとは好きなWEBサイトに行ってブックマークをクリックすればいいだけです。するとスクリーンの右側にオーバーレイで表示されます。 上部の枠は、スプライトで一括出来ると予想される背景画像の一覧です。下の方の枠はスプライトでまとめるには適していないであろうと予想される画像の一覧で、その理由もきちんと表示されています。もしあなたの考えと異なるならば、ドラッグして上や下の一覧に加えたり外したりすることも可能です。上の枠にひとまとめにしたい画像が整ったら、「Make Sprite」のボタンをクリックしてください。自動的に1つの大きな画像にまとめてくれます。（やった！CSSスプライトですね！）ひとまとめになった画像はこんな感じで表示されます。 このサイトの現在の設定では、最終結果の（縮小）版です。（よろしければ本物の方も参照してみてくださいね。） 最近SpriteMeではCSSをエクスポート出来るようになりました。ボタンをクリックすると以下のようなコートが表示されます。 線で消されたコードは今までCSSで使用していたコードで、そのコードを書き換えたものが直下に記述されています。 それではスプライトで不可能なことは？ グラフィックを繰り返し表示することが出来ません（注1）。スプライトは1つのブロックになったグラフィック用のものです。例えばアイコンなどはCSSスプライトで使用するのにとても適しています。 注1：勿論繰り返し使用することも出来なくはないのですが、ちょっとトリッキーで、X方向かY方向いずれかの1方向にしか使えません。 CSS Sprite（スプライト）実用性 スプライトを使用することにはもう誰も疑いを持たないでしょう。ぜひ使用してみるべきです。それでは新しいデザインを作成する際の、ワークフローはどのようにしましょうか。きっと以下の2つの方法いずれかを使用した方がいいかと思います。まず1つ目は、ページを作るのと同時進行でCSSスプライトも設定していきます。ということは、フォトショップも開いて、左上から順番に画像を並べていきます。また追加したい画像があれば追加して再保存していきます。 もう1つの方法は、、、こちらの方がしっくり来るかと思うのですが、CSSスプライトは後回しに考えます。まずはそれぞれ別々に画像を作成してしまいます。そしてページが完成したら（もしくは、少なくともリリースできる状態になったら・・・。ページっていつまで経っても更新改善要素満載ですからね。）、SpriteMeを使用してスプライトしていけば完成です。 その他の例も少し載せておきますね。 Google Reader icons Facebook
2009年にW3CがXHTML2をやめてHTML5の開発に集中したことや、GOOGLE, APPLE & MicrosoftのVPやCEOが揃って ”これからは、HTML５” と言ったことをきっかけに、HTML5の注目とその浸透率は、日に日に加速している。実際に最終的なHTML5の完成は２０２２年以降とされているが、ブラウザーのサポートの早さと企業の後押し次第では、予想よりずぅ〜と早く完成するのではないかという見解もある。 そこで、今回はHTML5の中でも簡単に使用できる便利な機能をいくつかピックアップして紹介したいと思います。 Doctype Doctypeの歴史をたどると、なぜこんなバカバカしい長ーーーいDoctypeになったかわかりますが（ヒント：IE)、そんな長い古い昔の歴史は忘れて、新しく短いきれいな新しい歴史に向かう第一歩です。 古いDoctype: 新しいHTML5 Doctype: すばらしい。こうやって人間は、昔の苦労を忘れていくんですね〜。 Script と Links の Types 新しいHTML5では、JavaScriptやCSSファイルなどを入れる場合、そのファイルがどんなタイプかを指定するtypeを指定する必要がなくなり、簡単になりました。 古いLinkとScript 新しいLinkとScriptの入れ方 コンテンツを編集 最近よくWeb2.0などで見られるのが、ディスクトップアプリーケーションなどの用に、文書などのコンテンツをクリックすると、フォームになり、それで編集して、コンテンツをアップデートすると言ったようなのがありますが、現状では、jQueryのJeditableに見られるようにJavascriptを使って作られています。 新しいHTML5では、contenteditable=”true”を指定するだけで、その属性内の内容が編集できるようになります。例えば、p に指定するとこんな感じです。 HTML5 フォームインプット フォームは、いろんなアプリーケーションで最も使われている属性です。今回HTML5では、様々な機能がフォームのinput属性に追加されました。その一つがtypeで指定できる様々な種類です。range inputの使い方は、前回のチュートリアルでも紹介しましたが、他にも以下のリストが使えるので、是非是非試してみてください。また、typeを指定することで、validationも行ってくれるので、いち早くすべてのブラウザーが対応してくることを願うのみです。 Search tel url email datetime date month week time datetime-local number range color Audioのサポート ちょっとしたBGMを流すにも、ちょっとしたFlash Playerなどを用意する必要がありましたが、HTML5では、audioタグが用意されているので、簡単に音楽を流せる。もちろん、まだ実際にサポートしているブラウザーは少ないので、すぐに使うにはリスクが高いがもうあと１年もすれば大丈夫でしょ。 Videoのサポート 音楽だけでなく、動画もHTML5で使える様になるのは、業界にとってはかなりの大ニュースだと思います。Youtubeもいち早くHTML５でビデオを埋め込みをサポート＜http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html＞させるなど、いろいろな方面から活発的にHTML５のビデオサポートが行われている。 videoタグ内にある”preload”を見てもらうとわかる様に、簡単にpreloadを出来るのもうれしいですねー。 他にも、media elements APIを使えばビデオプレヤーのカスタマイズなどもできるので、カスタマイズしていいのができましたら、是非共有してください。 少しでも早く使いたい方へ もうウェブ業界である程度身を置いている人であれば知っていると思いますが、CSSのサポートが最悪だったIEが、今回、HTML5のサポートも今の所最悪です。 ただ、実際に日本でのIEの浸透率は、海外と比べてもダントツで大きいために、日本国内でのHTML5を使用すためには、できるだけIEでもしっかり動かしたい。 ただ単にHTML5を使いたいがためにわざわざJSを使うのは気が引けますが、知らない人のために、こんな物があるというのだけ紹介しておきましょう。 JSでHTML5をIEで使えるようにする
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 CSSにはvertical-align（垂直方向の位置揃え）というプロパティがあります。これは初めて説明を受ける時には少し分かり難いかと思いますので、ここで取り上げてみたいと思います。基本的な記述方法は下記のようになります： ここではimg要素に対して、垂直方向の位置揃えを適用させています。画像は通常インライン要素なので、問題ない限り、テキストに対して正にきっちりインラインに整列されます。けれども「インラインに整列される」とは一体どういう意味なのでしょう。ここでvertical-align（垂直方向の配置）の出番です。 vertical-alignの有効な値には baseline、sub super、top、text-top、middle、bottom、text-bottom、length、value in percentageがあります。 私が思うに、ここでややこしいのがvertical-alignをブロック要素で使おうとして、思うような結果が出ず困ってしまう方が多いのではないかということです。もしdiv要素（親）の中でdiv要素（子）を使用し、子div要素内で垂直方向設定をしようとしても、うまくいきません。ダグラス・ヘリオットさんがlost in the WoodsというWEBサイト内でとても分かりやすく説明しています。 Baseline もし何も宣言しなかった場合、vertical-alignのデフォルトはbaselineです。画像はテキストのベースライン上にテキストと並んで配置されます。アルファベットにはデセンダーと言って、jやpやyのようにベースラインより下にはみ出す文字があることを忘れないようにしましょう。デセンダー文字の下のはみ出した部分はベースラインではないので、画像はそういったデセンダーの下辺に揃うことはありません。 Middle アイコンサイズの画像の場合、vertical-alignで最も使用度が高いのはmiddleでしょう。これはどのブラウザでも大抵同じような結果になります： ブラウザはテキストの高さと画像の高さをうまいこと調整して、センタリングしてくれます： ここで気を付けておきたいのが、もし画像のサイズが文字サイズより大きかった場合、後ろに続く行を下に押しやってしまうことがあります： Text-bottom text-bottomはbaselineと異なり、テキストの下辺はディセンター文字の下に降りた部分になります。そのためtext-bottomの場合は画像もその下端を基準にして配置されます： Text-top text-bottomとは反対にtext-topは現在のフォントサイズの一番高い場所を基準とします。なので、その上端を基準として配置することが可能です。Georgiaというフォントタイプの場合は他のフォントよりも背が高い文字もあるので気を付けておきましょう。 Top&Bottom topとbottomもtext-topやtext-bottomと同じような働きをします。しかし今回はテキストの上辺や下辺ではなく、他の画像などその行に存在するもの中で一番上端や下端を基準とします。例えば同じ行に2つ画像があったとして2つともサイズは違えど、テキストよりも背が高かった（もしくは足が長かった）とします。その場合はテキストの上下辺は関係なく、その行内で最も高い上端（もしくは下端）に揃えて配置されます。 Sub ＆ Super これらの値はsuperscriptとsubscriptを略したものです。日本語だと上付き文字と下付き文字ですね。その言葉の通り以下の画像のように、上付き文字か下付き文字の位置に配置されます： テーブとVertical Align テーブルセルの場合は画像配置と異なり、middleがデフォルト値となります： もしセル内に余白がありテキストを上寄せもしくは下寄せしたい場合は、topやbottomを使うことが出来ます： テーブルセル内でvertical-alignを使用する場合は、topかbottom、middleのいずれかを使用することだけ考えればいいかと思います。その他の値は全く道理にかなわず、予測不可能な結果をそれぞれのブラウザで表示させます。例えばIE6でtext-bottomを設定してもbottomとして扱われ、Safari4ではtopとして扱われてしまいます。sub設定の場合は、IE6ではmiddleとして処理され、Safari4ではtopとして処理されてしまいます。 Vertical Align and Inline-Block 画像は技術的にはインライン・レベル要素ですが、実際にはインライン・ブロック要素のような動きをします。その他のインライン要素とは異なり、幅や高さを設定することが可能です。 インライン・ブロック要素はvertical-align設定をされた画像と同じような動きをするので、上記を参照してみてください。しかしどうせ全てのブラウザで同じようにインライン・ブロック要素が配置されるとは限らないのでvertical-alignに関してはあまり心配する必要もないかと思います。まぁそれはまた別の話になってしまうのですが・・・。 valign たまに垂直方向の位置揃えの為に、valignを使用しているのを見ることがあります（例：<td valign=top>）。この属性は廃止されつつあるので使わない方がよいと言うことを、覚えておいた方がよいでしょう。いずれにせよCSSで設定出来るので、わざわざvalignを使う理由も特にないのではないでしょうか。
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 floatとは？ float（フロート）はCSSで使用される配置用プロパティです。その目的と由来を理解する為には、プリントデザインを参照してみる必要があるでしょう。プリントレイアウトでは、場合によっては文章で画像の周りを囲ませることがあります。これは一般的に「回り込み」と呼ばれています。画像の例を見てみましょう。 ページレイアウトプログラムでは、プリントレイアウト同様に回り込ませることも出来るし、それを無視させることも出来ます。回り込みを無視させると画像は沈んでしまい、まるでそこに画像が無かったかのように文章が画像の上に重なって表示されてしまいます。これが回り込みをさせるかさせないかの違いとなり、WEBデザインにも共通してきます。 WEBデザインでは、CSSのfloatプロパティで指定された要素は、プリントレイアウトで述べたようにその要素の周りを文章が取り囲む状態になります。float指定された要素は無視されず、沈むことなく流れにそのまま浮かばせる（float）ことが出来るのです。これはabsoluteを用いて指定する、絶対配置と大きく異なる点です。絶対配置されたページの要素は、プリントレイアウトで回り込みを無視するよう指示された時と同じように、WEBページ上の流れから外されてしまいます。また絶対配置された要素は他の要素とは一線を画し、隣同士にあろうがなかろうが、お互いに一切影響を与えることはありません。 CSSでfloat設定をする場合は以下のように記述します： floatプロパティには4つの値があります。leftとrightはその単語の通り、左寄せもしくは右寄せを指定します。デフォルト設定はnoneで、要素が流れに乗ることはありません。すなわち回り込みすることはありません。最後にinheritはその要素を包含する要素（親要素）のfloat プロパティーを継承します。 一体floatの使い道とは？ 文章の回り込みを防ぐ用途は一旦置いておき、floatはWEBページ全体のレイアウトを作成することが出来ます。 floatはまたもっと細かい部分のレイアウトでも活用することが出来ます。以下の画像例を見てみましょう。例えばfloatをアバターイメージの配置設定の為に使用したとしたら、もし画像サイズが変更になったとしても、文章は自動的に調整されうまいこと表示されます。 これはrelativeを用いて枠組みの相対位置を指定し、absoluteを用いてアバターの絶対位置を指定すれば同じように再現出来るかもしれません。しかしこの方法では画像のサイズが変更されたときにうまく自動調整されることはありません。 floatのクリア floatと関連するプロパティとしてclearがあります。clearプロパティに指定された要素は、floatの流れに乗ることはなく、流れが無くなったところに身を置きます。文章で表すよりも画像を見ていただいた方が分かりやすいでしょう。 上記の例ではサイドバーはfloat設定で右寄せされており、メインのコンテンツよりも文章が短く終わっています。従ってその後に記述されたフッターはfloat設定の影響により、floatの流れに乗りサイドバーの下に表示されてしまいます。これを解決するにはフッターをどちらのfloatからもクリア（解除）させる必要があります。 clearにもまた4つの値があります。bothが最も一般的に使用され、どちらの方向から来る流れも遮断するため流れの影響を受けません。leftとrightはその単語の通り片方からの流れを遮断します。デフォルト設定はnoneで、ほぼ使用されることはないでしょう。inheritは一応5つ目の値となりますが、インターネットエクスプローラーではサポートされていません。右側もしくは左側の流れだけを止めることは自然界ではあまりないかもしれませんが、使い道はあるというものです。 大崩壊 floatを使った設定の中で非常に途方に暮れてしまうのが、どのような影響を親要素に与えるかです。もし親要素（すなわちfloatを包含している要素）がfloat指定された要素以外何も包含していなかった場合は、言葉の通り崩壊し高さが無くなってなってしまいます。もし背景設定などされていない場合には非常に気付き難いかもしれませんが、覚えておいた方がよいでしょう。 崩壊と同様、目で見ても分かりやすくはない状態でないので、次のケースはもっと最悪です。こんなシナリオがあったとしましょう。 もし上側のブロックエレメントがfloat要素部分も包み込めるよう自動拡張するならば、パラグラフ間の文章の流れに不自然なスペースが出来てしまい解決しようがありません。このようなケースではWEBデザイナーとしては先ほどの崩壊事件よりも声を大にして文句を言うべきです！ 崩壊現象の場合はそれぞれのブラウザでの問題や、レイアウトが変に崩れてしまうことを防ぐ方法を考えれば解決します。コンテナ内でfloat設定されている要素の後ろにあるものをclear設定すればよいのです。そのコンテナの外側の話ではないので気を付けましょう。 floatをクリアする方法 もし状況をきちんと把握しており、問題が起こらないと分かりきっているならばclear: bothをどうぞ使ってください。けれどなかなか世の中そんなにうまくことは運びませんし、もう少しfloatを解除する知識を付けておきましょう。 空っぽDIVメソッド： これは言葉の通り、空っぽのdivを記述することです。 /*例*/ <div style=”clear:both;”=</div= [/css] たまに<br /=タグや他のエレメントを見かけることもありますが、divの使用が一般的です。なぜなら、divそれ自体はデフォルト設定も無く、特別な機能も無く、CSSでスタイル設定されることもあまり無いからです。このメソッドは文脈上意味を持たないしプレゼンテーションのためだけに書かれているので、一部の真面目なセマンティック信者たちにはとても不評です。厳密に言えば彼らは正しいのですが、まぁこの方法でうまく解決して、誰も傷つかないのならいいのでしょうないでしょうか。 overflowメソッド： この方法では親要素にoverflowプロパティを設定します。もしoverflowプロパティが親要素にautoかhiddenで設定されていたとしたら、親要素はfloat部分を包含するために自動拡張し、実に効果的にクリアしてくれます。この方法は不要な要素を追加するわけではないので、セマンティック的にも問題ありません。しかしこのメソッドの為に新たにdivを追加するならば、先ほどの空っぽのdivと同様にあまりセマンティック的だとは言えないでしょう。overflowプロパティは元来はfloatを解除するために作られたものではないということも留意しておきましょう。またコンテンツを隠してしまったり、不要なスクロールバーを引き起こさないようにも注意しておきましょう。 簡易クリアメソッド： この方法はfloatを解除するために、見せかけのセレクター（:after)を使用します。親要素にoverflowプロパティを設定するのではなく、例えばclearfixなどと名付けたクラスを追加し、そのクラスにCSSでスタイル設定をしてあげればよいのです。 この設定はfloatを解除する親要素の後ろに、非表示の小さなコンテンツをぽちっと適用させています。けれど古いブラウザにも対応させるためには他にもコードを追加する必要があるので、完全解決とは呼べないかもしれません。 floatを解除する他の方法を見てみましょう。ここに違う種類のブロックが並んでいます。 同じ種類のブロックを見やすく並べるためには、この場合だと色が変わるたびに改行するのが良いでしょう。もし色ごとに親要素が設定してあれば、overflowメソッドか簡易クリアメソッドを使うことが出来るでしょう。もしくは色グループの間に空っぽdivメソッドを入れてあげても効果があります。どちらの方法を使うかはあなたにお任せします。 floatの問題点 floatは取り扱いが難しいことでしばし取り沙汰されます。その取扱いの難しさはIE6と、IE6のfloatに関するバグに起因することが大きいでしょう。もしIE6のサポートをしないと決めたらそんなに気にならないのでしょうが、どうしても気になってしまう方もいらっしゃると思うので簡単に説明しましょう。 pushdown： これはfloatの中にあるアイテム（大抵は画像）がfloat自体よりも大きい場合に発生します。殆どのブラウザはfloatの外側にはみ出して画像を表示しますが、他のレイアウトには殆ど影響しません。IEの場合は画像をきちんと包み込むためにfloatも拡張してしまうので、ときにレイアウトに大きく影響してきます。代表例としてはメインコンテンツからはみ出した画像が、サイドバーを下へ押しやってしまう現象です。 解決方法：はみ出してしまうような画像がないことを確認しましょう。またoverflow: hiddenを使ってはみ出した部分を切り落としてしまいましょう。 2重マージンバグ： IE6をサポートするために他にも覚えておいた方がよいことは、floatと同じ方向にマージン設定をした場合、マージンが2重（2倍）になってしまいます。 解決方法：floatにdisplay: inline設定をしましょう。それでもブロックレベルであることに変わりはないので心配しないでください。 3px Jog： これは、float設定された要素の隣にある文章が、何故か3ピクセル分離れて表示される現象です。 解決方法：影響を受ける文章に高さや幅の設定をしてあげましょう。 ボトムマージンバグ：これはIE7のバグで、float設定された親要素の中にfloat設定された子要素があった場合、子要素の下の部分のマージンが、親要素によって解除されてしまう現象です。 解決方法：親要素にbottom paddingの設定をしましょう。 代替え案 もし画像の周りに文章を回り込ませる必要があれば、float以外にあまり選択肢はありません。CSSを使って、イレギュラーな形に合わせて文章を回り込ませる方法も参考にはなるでしょう。けれど、ことページレイアウトの部分に関して言えば、float以外にも選択肢はあります。エリック・ソルさんが書いた「Faux Absolute Positioning」というアーティクルはとても興味深いテクニックで、絶対配置の良いところを残しつつfloatのフレキシブルな機能とうまく調和しています。CSS3が正式発表されれば、テンプレートレイアウトモジュールを使ってのページレイアウトも非常に役に立つかと思います。
デモへリンク ファイルダウンロード 今回は、３State CSSメニューの作り方を紹介します。3 Stateとは、１：普段の状態、２：マウスをメニュー上に動かした時の状態、３：ページにいることを表した状態の三つの状態のことをいい、http://www.sagawa-exp.co.jp/ のメニューなどがいい例です。 ビデオ１ [youtube=http://www.youtube.com/watch?v=HeX2QgOU21E&rel=0&w=590] ビデオ２ [youtube=http://www.youtube.com/watch?v=BNoMwKNqA7s&rel=0&w=590] コード
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 IDとClassはフックです HTML/XHTML文書の内容を表現するには何かしらの方法が必要です。<hや<p>、<ul>と言った基本的な要素はそれ自体でも役割を持っていますが、大体の基本的なタグはページ要素やレイアウトの選択と言った設定をカバーしているわけではありません。そのためIDやClassを用いる必要があります。例えば<ul id=”nav”>と記述すれば、このULリスト（箇条書きリスト）に目印を付けたことになるので、ページ上にある他のULリストと区別して、このIDがついたULリストだけに特別な設定をすることが可能になります。またフッターなど関連したタグがないセクションでも、<div id=”footer”>としておけば区別しやすくなります。また、他のコンテンツとは別にしてサイドバーにいくつかボックスを持たせている場合は、<div class=”sidebar-box”>などと記述することが出来ます。 これらのIDやClassは“フック（引っ掛け針）”で、マークアップを構築する際にとても重要な手段となります。日本語では「目印」と言った方が分かりやすいかもしれませんね。CSSを使うときにはセレクタを築いたりスタイル設定をする際に、明らかに必要と言えるでしょう。JavaScriptなど他の言語でもIDやClassに頼るところが大きいと思います。しかし、IDとClassの違いとは一体何なのでしょうか。 IDはユニーク（唯一無二） それぞれの要素は1つのIDしか持つことが出来ません。 個々のページでそのIDを使用した要素もまた、たった1つでなければなりません。 初めにこれを習った時に、「IDは一度しか使えないけれど、Classは何度でも使えるよ。」と言うことを何度も何度も聞かされました。けれど私にとっては何か「非常に重要なこと」というよりもむしろ「ただ経験でものを言ってるだけでしょ。」と感じられたので、右から左に筒抜け状態でした。もしあなたがHTML/CSS命！の人ならば、実際あまり違いを感じられないと思うのでそういう状態は続くでしょうね。 けれど1つ大切なことがあります。もし同じIDを2つ以上の要素で使用したならば、バリデーションチェックでエラーが出てしまいます。バリデーションチェックは非常に重要なので、これを無視することは出来ません。なので何故1度しか使えないのかもう少し追求してみましょうか。 Classはユニーク（唯一無二）ではない 複数の要素で同じClassを使用することが可能です 複数のClassを同じ要素内で使用することも可能です もしページ上で何度も使用される可能性があるスタイル設定ならば、Classを使うべきです。例えば複数の”widgets”を使用しているページがあったとします。 さぁこれで同じ内容でスタイル設定したい時には、Class名”widgets”をフック（目印）として使用することが出来ます。けれどもし一箇所だけ、同じスタイル設定だけれども他の部分より大きめに表示させたい場合はどうしたらよいでしょう。そんな時には以下のように他のClass名も追加すれば、カバーしてくれます。 あらたに新Class名を追加する必要はなく、ただ追加したい設定がしてあるClass名を同じタグの中に追加すればよいだけです。これらのClassはスペースで区切られ、いくつ追加しても大体どのブラウザでも対応可能です。（実際その数は1000以上とも言われています。私たちが使いそうな数よりは明らかに多いことだけはハッキリしていますね。） IDやClassに対しブラウザのデフォルト設定はありません Class名やIDを要素に追加したとしても、デフォルトで何かが自動的に設定されているということはありません。 初心者の時はよくこれで戸惑いました。1つのサイトで作業をしていて、何か特定のClass名を追加すると問題が解決するなんてことがたまにあります。そのため同じ問題が起こっている別のサイトでも、このマジカルパワーを持ったクラス名を追加すれば解決するだろうなんて思ってしまいますが、そんなことはありません。 ClassとID自体は、スタイル設定の情報を持っているわけではないのです。CSSのターゲットになってスタイル設定を受け入れているだけです。 バーコードとシリアルナンバー そうですね、バーコードとシリアルナンバーを例にして考えてみると、分かりやすいかもしれません。お店でiPodを手に取ったとします。パッケージには、バーコードが記載されています。バーコードをスキャンすれば、店舗は商品情報を得ることが出来ます。システム上には「どういったプロダクトで価格は幾らなのか。」などという情報がきちんと登録されているわけです。ひょっとしたら、どんな色なのかとか、お店のどこに保管されているのかなどと言った情報も含まれているかもしれません。そして同機種のiPodのバーコードは全て同じ番号なわけです。 iPodにはまたシリアルナンバーも割り当てられています。シリアルナンバーはユニークナンバーなので、同じシリアルナンバーを持ったiPodや他のデバイスは世界のどこにも存在しません。シリアルナンバーには価格等の情報は含まれていません。そうすることも可能ではありますが店舗側にとってあまり賢い方法とは言えないと思います。例えば価格変更などがあった際に、バーコードなら機種統一のバーコードに登録されている価格を変更すればことが済みますが、シリアルナンバーの場合は1つ1つの機種の登録価格をいちいち変更しなければなりません。 IDとClassの違いも丁度こんな感じです。再利用するような情報はClassに設定して、1度しか使わないようなユニークな情報はIDに設定すればいいのです。 IDには特殊なブラウザ機能があります Classはブラウザの中では特に特別な能力はありませんが、IDは1つとっておきの切り札を隠し持っています。それは何かというとURL上での「ハッシュ値」です。もしhttp://yourdomain.com#commentsというようなURLがあったとしたら、ブラウザはyourdomein.comページ内のcommentsというID設定がされた個所を自動的にスクロールして表示させます。ここで重要なのは、もし順番に見て欲しいエレメントがあったとしてもスクロールされてしまうのです。例えあなたがBody部分にスクロール可能な何か特別なDIV設定をしていたとしても、そのDIV設定自体無視されスクロールされてしまいます。 これが、IDは1つのページに1度しか使うことが出来ない大きな理由です。1度しか使わないからブラウザはどこを表示したらよいのか認識することが出来るのです。 要素内には両方記述することが出来ます 1つの要素内に、IDとClassの両方を書き込むことは全く問題ではありません。むしろよい考えであることの方が多いのです。WordPressのコメントリストアイテムのデフォルトマークアップを考えてみましょう。 ここではClassに対し、ページ上で表現したい全てのスタイル設定をしてあります。それと同時にWordPressが生成したユニークIDも記述されています。このIDは直接リンクしている場合に有効です。これで特定のページの特定のコメントに簡単にリンクすることが出来ます。 CSSでは大した問題ではありません CSSに関して言うと、IDで出来てClassでは出来ないことはないし、その逆もまた然りです。最初にCSSを習った時に、うまく解決出来ないことがあり、トラブルシューティングの為にIDとClassを入れ替えてみたりしたこともありますが、これは全くCSSでは関係ないのです。 JavaScriptでは関係してきます JavaScriptの達人ならば、ClassとIDの違いはきっと既にきっちり理解しているでしょうね。JavaScriptでは、IDはページ上に1つしか存在しないと言う前提で動作しています。そうでないと頻繁に使用されるgetElementByIdファンクションも使い物になりません。もしｊQueryに精通なさっている方ならば、ページエレメントにClassを簡単に追加や削除出来ることをご存じなはずです。それがｊQueryの大切な機能でもあるからです。IDにはそんな機能が存在しないことをお気づきになりましたか。こういった値を操作するのはJavaScriptの責任ではありません。下手な使い方をすると本来の価値よりもむしろ大きな問題に繋がるからです。 必要なければ使わなければいいのです 今までお話してきたとおり、ClassとIDはとても重要で、スタイル設定やページ操作には欠かせないものです。けれども慎重に意味的に利用するべきです。 そうすれば以下のような間違いを防ぐことが出来るはずです。： ご存じの通り、このタグはリンク、すなわちa要素（アンカー要素）ですね！a要素はタグ内に直接スタイル設定が出来るのだから、ここにわざわざclassを追加する必要はないのです。 こんな間違いも防げるはずです。： ページ内に右側コラムが1つしかないなら、ここにIDを記入すること自体に問題なないのですが、名前の付け方がよくありません。要素の内容を分かりやすくしようと思ったのかもしれませんが、配置場所とか見え方とかそういう名前の付け方はあまりよくありません。ただ「sidebar」とした方が適切です。 マイクロフォーマットは正に特定のClass名です マイクロフォーマットは難し過ぎると思っていませんか？実際はそんなことないのです。マイクロフォーマットは保有している情報がどんな情報を表しているのか、規格化されたクラス名でマークアップしましょういう仕様に過ぎません。標準的なvCardを見てみましょう。
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 レンジ入力欄をHTML5で作成するとこのようになります： 対応しているブラウザでは以下のように表示されます： これは非常に便利な機能で、ユーザーから最小値や最大値を収集したい場合には、どこでも使用することが出来ます。 しかし、少し変だと思いませんか？ このスライダーだけだと、レンジ入力欄はユーザーに対し実際に送信される正確な「数値」を目視させていないのです。もしあなたの質問事項が「お元気ですか？」だったとして、左に行けば行くほど「哀しい」、右に行けば行くほど「嬉しい」というような値を表現しているのであれば、実際にユーザーに数値を確認してもらう必要はないかもしれません。けれども大抵は数値を表示させる方が無難なことが多いでしょう。 公正を期すために、スペックにはどのように書かれているか参照すると： input要素とは、数値を表す文字列に要素の値を設定する働きをしますが、正確な値は重要ではないという警告が付いており、UAにより数値を求める時よりも、シンプルなインターフェースを提供させることを可能にしています。 けれども、それは自分たちが見栄えの良いスライダーを使用したいがために、送信した数値をユーザーに見せなくていいということにはつながりません。 各ブラウザがUIコントロールを変更して、自動的に数値を表示するようにしてくれたらありがたいのですが、まぁ自分たちで作ることにしましょう！ このような場合にはoutputタグの使用がベストです。outputタグとはform要素内での何らかの計算結果を表示する時に使用されます。とてもシンプルな実装サンプルをご覧下さい。 けれど、こんなインラインJavaScriptは今どき流行らないし、ｊQueryを参照してCSSできちんと処理した方がよいでしょう。今回のゴールは、時間を求めたり、最低値最大値、またステップなどを求めたりと、どのようなレンジ入力欄の使い方をしたとしても、スライダー上の吹き出しに現在値を表示させることです。 それではまずoutput要素のスタイルを指定しましょう。当然のことながら、input要素の前に記入します。そうすることにより、一度JavaScriptで設定してしまえば、残りの値も調整することが可能になります。疑似要素でグラデーションを付けてたり、角を丸く削ったり、小さな三角形のポインタを付けることも出来ます。 次にすべきことは、全ての範囲において数値の変化を確認することです。すなわち今回の目的は、スライダーのスペースで吹き出しの左側をシフトしてみることです。 スライダーの入力幅や最小値最大値は任意に設定可能なので、これは言うほど簡単なことではありません。 少し数学のお勉強もしてみましょう。こちらはｊQueryのJavaScriptで、コメントも載せてあります： 大変だったのは、1.3の値のところです。吹き出しの尖がった先端を、スライダーの真ん中に揃えようとしましたが、それは簡単ではありません。何故ならスライダーの真ん中が１００％左端または右端に行くことはないからです。従ってこの数値は完璧ではありませんが、何もないよりは幾分かマシでしょう。 ボーナスとしては、レンジ入力をサポートしていない各ブラウザでも、吹き出しの動作を表示してくれます。 備考：上記のコードは最小値と最大値が定められているレンジ入力欄に対して有効であって、もし最小値と最大値が無い場合は、うまく動作しません。私は最小値と最大値を設定しないでレンジ入力欄を使用するのは少し違和感を覚えますが、もし最小値と最大値を設定しなかった場合、デフォルト値は0から100です。それを証明するには下記のコードでテストしてみてください。もし下記のコードに変なところがあれば、修正して試してみてください。こんな感じになると思いますよ。 それでは最小値と最大値を算出してみてくださいね。こちらにライブデモもありますので、よろしければご覧ください。改善案はいつでも大歓迎です！
長くウェブプログミングを行っている人でも、DIVとSPANの違いは？と聞くと, “DIVはブロックエレメントでSPANはインラインエレメント”と返ってくるが、実際にどう使い分ける？と聞くとボロックエレメントが必要な場合はDIVで、インラインエレメントが必要なときはSPAN” と返ってくる。 実際、その答えは間違ってはいない。ただ、状況によってはSPANを使ってわざわざスタイルシートで display:block; を指定すことがある。CSSをメインで行ってないプログラマーにとっては、”なぜ？わざわざ一行増やすの？”となる。 正しいDIVとSPANの使い分け方の答えは、CSSの元々のフィロソフィーにある。 いつも忘れては行けないのが、CSSの本来の役割は、ウェブサイトのコンテンツであるテキストとデザイン用のコードを分けながら、正しいマークアップを行うことにある。 例えば、本文の題名をdivで囲むことは、正しいマークアップではないことはみなさんわかりますね？！ では、DIVはある区分を囲む為にあるのもわかりますね？！ 例えば下のように筆者の紹介用のブロックがあるとしたら、必然的にすべてをDIVで囲み一つの意味のあるセクションとにします。 じゃ、最終的に”筆者名”にスタイリングする必要があり、スタイリングにブロックエレメントが必要だとして、 divかspanタグしか使えない状況だとしたら、あなたらSPANかDIVどっちらを使いますか？ …. わかりますね？ 正しいマークアップを使うことがHTML/CSSでは、一番重要だということです。
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 ウェブ上で表示されているフォントは、基本的にはベクターグラフィックなので、フォントサイズを12pxから120pxに大きくしたりしても、ぼやけたりしないのです。ベクターと言うことは、ピクセルのデーターでフォントや形を表示するのではなく、数式で計算されたポイント一個一個で作られておます。なので、ベクターイメージ編集ソフト（e.g. Adobe Illustrator)の様に、テキストの周りストロークを書いたりできるのです、そして、ついてWebkitでも同じ様にテキストにストロークを書けるようになりました。 使用例： ショートハンド そこで自分はすぐに”いいねー。webkitでしかサポートしてないってことは、テキストカラーと背景を白にして、テキストストロークを入れれば、webkitだけにでもテキストの飾り付けができる！” 嬉しいことに、Webkitも簡単にWebkitでしか適用なれないプロパティーが提供しているので、全部のブラウザーに影響なく使える； @font-face を使って Anime Ace 2 のフォントにストロークを使った場合。 webkit以外のブラウザーは普通の黒い文字になる。 text-strokeを他の方法で再現 次に、まだwebkitしか対応していないtext-strokeを使用するのではなく、FirefoxやOpera,IE9でも対応しているtext-shadowを使ってテキストストロークを再現してみましょう。shadowを上下左右に1pxずつ ずらせて blurはなしで設置します。 これが、テキスト影(text-shadow)を使ってtext-strokeを再現したのになります。かなりいい感じに再現できてますのねー。この方法を使う一番の問題は、2px以上のストロークを設定すると、ストロークに間が空いてきます。webkitを使ってもstrokeのpxが大きくなると問題が出てくるので、とっちらを使ってもそう大差は無さげな気がしあす。 text-strokeとtext-shadowを合わせる text-strokeとtext-shadowを合わせて使うと、なかなか面白い表現をすることができる。それでは、webkitのtext-strokeを入れてからtext-shadowをいれてみましょう。 テキストストロークのアニメーション テキストストロークは、色んなカラー値使用できるので、透明なストロークを重ね合わせて、重なった部分だけが濃くすることもできる。 残念ながら、ストロークの太さはWebkit Keyframeアニメーションには対応してないが、色のアニメーションは対応している。
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 :nth-child と :nth-of-type を完璧に使い分けれるのは、なかなか難しいですが、どんどん理解していくことで、CSSのプロに一歩近づけると思います。 今回、:nth-child を使って、何個か例をあげて説明して行こうと思います。 ５個目だけのエレメントだけをセレクトする場合 かっこ内に特定の数字を入れることで、上の例で言うと５個目だのliを指定して、スタイルを当てれます。 ５個目以降だけのエレメントだけをセレクトする場合 これでもし li が１０個以上あったら、それらもすべて指定することになります。n は、0 から始まることを覚えといてください。 最初の５個だけのエレメントだけをセレクトする場合 n が 0 から始まって -1, -2, -3 となっていきますので、 5 番目より低いエレメントが選択できます。 １個目から始まって、４個ずつ飛ばして選択する場合 奇数を選択する場合 偶数選択する場合 最後のエレメントを選択する場合 １０個のエレメントがあれば１０個目を、１００個あれば１００個目を選択します。 最後から２個目のエレメントを選択する場合 nth に last を入れることで、最後から何個目かを選択することができます。もちろん 2n などを使うことで、後ろからの偶数でもOKです。 対応しているブラウザー 面白いことに :first-child は、インターネットエクスプロラー7(IE7) より対応していましたが、 それ以外のセレクターは IE9 になってからしか対応してません。 それ以外のブラウザーに関しては、特に心配することなく使えると思います。IEの対応が心配な方は、Selectivizrなどを使って補助もできます。
デモへリンク 元ファイルダウンロード ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを４回に分けて説明しています。 今回は、第４回目の最終回です。 そして、この最終回は、チュートリアルをビデオ録画して送りいたします。ビデオチュートリアルは、文書と違い、簡単に見たい所を飛ばすことや、飛ばし読みなどは難しいですが、実際にどんな用に作られたか目で見ながら学ぶことができるので、文書よりもっと簡単に学べるとおもいます。 過去のチュートリアルを見ていない方は、こちらよりどうぞ。 第１回： ウェブサイト作成の準備＆ボディーのバックグラウンドイメージの設定 第２回： メニュー＆ロゴ、ソーシャルリンクのCSS&HTML 第３回： jQueryを使ってイメージスライダーの設置 第４回： 最新のプロジェクトのCSS ビデオ講座 ビデオチュートリアルパート１ [youtube=http://www.youtube.com/watch?v=9Hye8gLzyWY&rel=0&w=590] ビデオチュートリアルパート２ [youtube=http://www.youtube.com/watch?v=6GU_TPJ4bUI&rel=0&w=590] ビデオチュートリアルパート３ [youtube=http://www.youtube.com/watch?v=rwwyTOLD_lI&rel=0&w=590] ビデオチュートリアルパート４ [youtube=http://www.youtube.com/watch?v=ddBiJFeL1h0&rel=0&w=590] 今回の分のHTML 今回の分のCSS
ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを４回に分けて説明しています。 これが今回のチュートリアルで作って出来上がったウェブサイトです。 完成したサイト 第１回： ウェブサイト作成の準備＆ボディーのバックグラウンドイメージの設定 第２回： メニュー＆ロゴ、ソーシャルリンクのCSS&HTML 第３回： jQueryを使ってイメージスライダーの設置 第４回： 最新のプロジェクトのCSS ビデオ講座 １．スライダー プラグインをダウンロード 画像を順番に表示させる、スライダー系のプラグイン色々とありますが、今回は、CSS Tricksの運営者Chris Coyierが初めて作って、その後数人のでプログラマーが参加し強化された、AnythingSliderを使いたいと思います。 AnythingSliderは、機能が豊富なのと、自分が好きな様にスタイルができるので、とても重宝すると思います。 それでは、早速ここからダウンロードしてください＝＞AnythingSlider ダウンロード ２．スラーダー用のファイルの設置 お決まりですが、とりあえずjQueryのスクリプトのリンクとAnythingSliderのスクリプトファイルと自分たちのスクリプットファイルをヘッダー内にリンクを挿入してください。 それと、AnythingSliderのCSSをリンクさせてください。これで、最低限必要なファイルは、全部OKです。 ３．スライダー用にのHTMLマークアップ Anythingスライダーは、ul li を使いますので、一個一個のスライダーは必ず li の中に入れてください。今回は、li の中に入るのは、画像だけですので、とても単純に以下の様になります。 画像は、適当に用意いたしました。今回使う画像のサイズは、800×280 です。 ４．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としてファンクション内に指定しますので、 {} で閉じてください。 なので、最終的に全部をまとめると以下の用になります。 ５．CSSの調整 あとは、自分のサイトのデザインに会う様に CSS でマークアップをしていきます。anythingslider.css 内のcssを変更してもいいのですが、新しいバージョンにアップデートした場合に、簡単に上書きできないので、すべてのCSSは、自分のサイトのメインのstyle.cssに入れていきましょう。 そんなに難しいCSSは入っていなので、説明ははぶいておきます。 なにか、分からないようなことが有れば、いつでもコメントを残してください。 これで、スライダーの完成です。必要があればスライダーのデモご覧になって遊んでみてください。 今回のチュートリアル分のデモ 第１回： ウェブサイト作成の準備＆ボディーのバックグラウンドイメージの設定 第２回： メニュー＆ロゴ、ソーシャルリンクのCSS&HTML 第３回： jQueryを使ってイメージスライダーの設置 第４回： 最新のプロジェクトのCSS ビデオ講座
最近では、すっかり定番となってしまったライトボックスですが、ライトボックスのコピーキャットがオリジナルを越える機能を搭載して、どんどん出てきている。 ライトボックスクローンの比較表が作成される程、その数は日に増しているので、クオリティの高いの数個使いこなし、是非次のプロジェクトに合わせて、一つ取り入れたいものだ。 そこで、今回は、FANCYBOXというすばらしいライトボックスクローンの設置方法を紹介しよう。 1. 必要なファイルをダウンロード なにはともあれ、必要なファイルをダウンロードしましょう。 うれしいことに、FancyBoxをダウンロードしますと、必要なファイルがすべて入ってます。早速FancyBoxのウェブサイトに行って、右側のダウンロードリンクを押してください。 FancyBox http://fancybox.net 2. 必要なファイルをページにリンクさせる 自分はファイルの配置を以下のようにしましたが、自分のウェブサイト合わせた配置でかまいません。 私と同じファイルの配置であれば、index.phpは以下の様にしてください。ファイルの配置を変えた場合は、自分のフィアルの配置に合わせて、リンクのパス（道）は変更してください。 ３．一個のイメージだけをライトボックスで表示 最初に画像ファイルへのリンクを作り、a tag に class 若しくは id を指定する。 そして、以下の様にしてその a tag を fancybox で表示する様に指定するコードをhead内に入れる。 もっと写真のでかたなどをコントロールしたい場合は、オプションを指定してください。 ４．アルバムのイメージをライトボックスで表示 アルバムなど複数のイメージを表示させる場合でも、やり方はさっき程と同じです。唯一違うのは、a tag の中に rel=”” 内にアルバム名を指定するだけです。 複数のアルバムがある場合でも、アルバム名を変えるだけになります。 もし、アルバムのサムネイルを一個しか表示しない場合は、以下のようにしてください。 ５．インラインコンテンツをライトボックスで表示 インラインコンテンツとは、同じフィアル内にあるコンテンツのことです。同じファイル内にコンテンツを作り、divなどの中にいれて、display:none を指定して、ページが表示されても見えないようにします。fancybox でリンク先をそのdivに指定しますと、fancyboxが勝手にdisplayを変更し、ライトボックスの中に表示してくれます。 これは、とっても簡単にできるにも関わらず、いろいろな所で使えるので便利です。User Experienceの向上に欠かせないものです。たとえば、ちょっとした規約などの表示を別のページに飛ばすのではなく、ライトボックス内に表示。他にも、用語の意味を表示したり、ビデオを表示したりできます。 ６．ajaxコンテンツ をライトボックスで表示させる Ajaxでコンテンツを表示させるのも、リンクの先を別のページに変えるだけで、基本的にはさっき程のインラインと変わりありません。 ７．iFrameで別のサイトコンテンツ をライトボックスで表示させる iframeなどは、よく別サイトを自分サイト内に表示させる場合などに使います。iframeの場合は、リンク先URLのあとに?iframeを入れるだけです。 http://example.com?iframe 是非、あなたの今のサイトに導入してみてください。
ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを４回に分けて説明したいと思います。 これが今回のチュートリアルで作って出来上がったウェブサイトです。 完成したサイト 今回は第２回、メニューとロゴの部分をコーディングしたいと思います。 第１回： ウェブサイト作成の準備＆ボディーのバックグラウンドイメージの設定 第２回： メニュー＆ロゴ、ソーシャルリンクのCSS&HTML 第３回： jQueryを使ってイメージスライダーの設置 第４回： 最新のプロジェクトのCSS ビデオ講座 １．メニューの画像を用意する 今回は、普通のテキストでもメニューを作ることができますが、ウェブの標準フォントでないフォントを使いたい人の為に、画像を使ってコーディングを行いたいと思います。 それでは、以下の様に２個の画像を用意してください。一個目は、メニューの背景となる画像、２個目はメニューの文字とマウスがメニューの上に来た時とそのページが選択されているときの状態（HoverとActive 状態)の画像を用意します。 ちょっと前までは、各メニューの項目を一個ずつのイメージで作ってましたが、ほんの一年程前から、すべてを一つにまとめた方が、ホームページが早く表示されることが分かり、今ではすっかり定番となっている。 ２．メニューのコーディング まずは、今回のコンテンツのサイズは、フォトショップから見ると９５０pxぐらいですので、まず、ヘッダー用にDIV(今回HTML5のHEADERを使いますが）を作って、その中にメニュー用のDIVの器を作ります。メニュー用のDIVは、９５０pxで指定して、いつでも中央に来る様に左右のマージンをAutoにします。この９５０pxと中央に来る様にしてするCSSは何度も使う予定なので、classを作っておきましょう。 次に実際のメニューのコーディングを行っていきます。htmlの方は、ul でリストを以下の様に作ります。 ulにさっき程一個目の画像を背景に指定します。ulのサイズは画像と同じサイズに指定して、上下のスペースをmarginで指定して, float:rightでul全体を右によせます。 ul をfloatしたけど、下のコンテンツを上に来てほしくないので、clearfixのcssをul の一個上のdiv に指定します。 ３．フロート クリア フィックス (Float Clear Fix) Floatを指定してコンテンツの位置を調整することは、日常茶飯事です。それによって、したのコンテンツがあがってくることを防ぐ為の、以下のコードは色んなブログで紹介されていますので、スニペット（よく使うコード）として保存しておいてください。 ４．メニューの項目をコーディング まず、a は、インラインタグなので、display blockを指定して、height と width を指定できる様にします。float leftを指定して、 a をすべて横に並べて、text-indent を -9999px に指定することで、テキストを見えなくします。次にすべての a に２個目のメニューの画像を指定して、そのあとに一個ずつBackground positionを利用して、位置を調整します。 li:nth-child はCSS3ですので、すべてのブラウザーに対応していません。とは言っても、今現在で対応してないメジャーブラザーはIEだけすけど。。（IE消えてくれないかな。。） IEに対応させる場合は、各 li にIDでも指定してください。 ５．Logoの部分のコーディング これは、メニューの部分の繰り返しなので、特に説明する必要ないかと思いますが、何か分からないことがあればコメントを残してください。今回は、CSS3を使わずにやったので、メニューをIEに対応させたい人は、参考にしてください。 ６．最終的なコード 最終的なコード以下とデモへのリンクです。 デモ style.css reset.css
ウェブサイトの作り方を学ぶには、やはり、一からどう作っるか説明するのが一番学べると思います。 ということで、今回はクオリティの高いフォトショップのウェブデザインのコーディングを４回に分けて説明したいと思います。これが今回のチュートリアルで作って出来上がったウェブサイトです。 完成したサイト このシリーズでは、ホーム（トップ）のページだけをCSS＆HTMLにコーディングしますが、トップページができれば、他のページも難なくできると思います。 あと、フォトショップのデザインのチュートリアルは今度ご用意しますので、お楽しみに待っててください。 第１回： ウェブサイト作成の準備＆ボディーのバックグラウンドイメージの設定 第２回： メニュー＆ロゴ、ソーシャルリンクのCSS&HTML 第３回： jQueryを使ってイメージスライダーの設置 第４回： 最新のプロジェクトのCSS ビデオ講座 １．フリーのフォトショップウェブデザインファイルを入手 今回は、MateusのGrunge Para Portfolio を使います。ダウンロードのリンクは以下になります。 http://www.mateusneves.com/design/layout-grunge-para-portfolio-gratuito/ ２．ウェブページの各部分を見極める フォトショップで開いたら、まず一番最初にすることは。。 考えることです。基本的なウェブサイトは、Background(背景), Header（ヘッダー）, Content Area（コンテンツ エリア） と Footer に分けることができます。 今回のデザインの背景から見てみると、背景画像は大きな画像が一つで大丈夫そうですねー。 ヘッダーには、メニュー（ナビゲーションバーNavigationbar）とロゴとソーシャルサイトへのリンクがあって。これは、他のページでも、同じく登場するので、phpなどで、includeするといいと思います。 コンテンツの部分は、最近のプロジェクトのスライダーあって、さらにその下に三つのポートフォリオの画像を載せれる部分があります。これらのコンテンツの部分はページごとに異なりますねー。 フッターの部分はオレンジのバーより下の部分で、ちょっとしたサブロゴと他のページへのリンクがあります。このフッターも全部のページに共通の部分になります。 ３．固定レイアウト（Fixed Layout), 柔軟レイアウト (Liquid Layout), エラスティックレイアウト (Elastic Layout) を決める 各レイアウトの詳しい説明は、リファレンスを用意しますが、簡単に説明しますと、画質解像度によってレイアウトが柔軟に対応できものを作るか、ある程度解像度の枠を絞って製作するかということです。固定レイアウトが一番簡単なのと、デザインが保てるで、7割、8割がたのウェブサイトは、固定レイアウトのはずです。 今回のウェブサイトのデザインは、柔軟レイアウトにする意味がなさそうなので、固定レイアウトで行いたいと思います。 ４．骨組み（フレームワーク）を作る 骨組みのプランをしっかり作っておくことで、実際のコーディングが楽になります。自分は、簡単にノートにスクラッチして、どの部分がどれくらいの大きさで、どこにどうやって、なにを置いて、どう作るかをノートにまとめます。先に色んな細かい部分をシュミレーションすることで、後に遭遇する問題を前もって理解し、それを回避できるように考えながら、骨組みにコメントなどを入れて作ります。 骨組みは、人によって様々なので、状況と自分に合ったものを作ればいいと思います。ウェブ製作会社のなどでは、しっかりとした物を作って、クライアントと確認しながら進める場合も少なくありません。 その他にも、オンラインツールやダウンロードして使えるソフトウェアも数多く存在しますので、Googleってみてください。 http://www.hotgloo.com/ https://gomockingbird.com/ https://cacoo.com/ http://iplotz.com/ http://www.balsamiq.com/products/mockups ５．エディター＆ブラウザー それでは、コーディングを始めましょう。今回は、マックのCodaを使って行います。HTMLやCSSは過去の物を習うより、将来に必要なHTML５やCSS３をドンドン使っていきます。あと、現在IEを使ってる人はすぐにIEをパソコンから消去してください。IEは現在ブラウザーのマーケットで一番遅くて、一番規格が外れている、バグだらけのブラウザーです。 ファイアーフォックス、クローム若しくは、サファリをゲットしてください。 フォルダーの構成は以下のように設定しておきます。 ６．HTML5のDOCTYPE お好きなエディッターを開いて、新規にファイルを作成して、index.htmlに名前を変更して保存して、HTML5用にDOCTYPEやBODYタグを以下のように用意します。あとCSS用のフォルダ−を作ってそこにstyle.cssのファイルを作って、HTMLのHeadの中からリンクさせてください。 ７．css リセット 実は、ブラウザーによって様々ですが、ブラザーは基本的なCSSのマークアップを行っているのです。例えば、body や div にマージンが勝手に入っていたり、ul や ol に list style が適用されています。今後スムーズにCSSのマークアップを行うために、css reset のスタイルシートも入れておきましょう。 自分はmeyerweb の CSS Resetシンプルなのを使ってますが、yahoo の YUI CSS Reset など使うのもいいかも知れません。 ８．bodyのバックグラウンドーイメージ 今回は大きなイメージ一つでバックグラウンドイメージの作成で良さそうですね。Photoshopからイメージをスライスさせてウェブサイト用にエクスポートさせましょう。 JPG 80%ぐらいで画像を保存してイメージフォルダーに保存してください。 そして、CSSを以下のように書きます。 まぁ、コードを見てもらえばわかると思いますが、bodyにbackgroundとして、さっき程フォトショップからエクスポートしたイメージにリンクさせて、真ん中の上に配置して、繰り返しをなしに設定して、画像が以外の部分の色を設定しました。 これで一気に雰囲気がでてきましたねー。 第一回目はこれで終わりです。第２回は、トップのメニュー＆ロゴの部分のチュートリアルになりますので、お楽しみに。 第１回： ウェブサイト作成の準備＆ボディーのバックグラウンドイメージの設定 第２回： メニュー＆ロゴ、ソーシャルリンクのCSS&HTML 第３回： jQueryを使ってイメージスライダーの設置 第４回： 最新のプロジェクトのCSS ビデオ講座
HTMLでもCSSでもCでもJavaScriptでも、プログラーマーたちは自分たちの書くコードを一秒でも早く書くため手に様々ツールを開発してきたが、今回、ロシアからこれからのコーディングを全く新しい方法で行う、ZenCodingが注目を浴びている。 ゼンコーディングとは、特定の文字配列をつかうことで特定のコードを簡単に呼びだすことができます。 これだけ聞いてもパッとこないと思いますので、早速見てましょうか。 １. 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は簡単に目的にあったようなシステムにできるので、とても気に入っています。 今回は、今作っている情報系サイトでつかった、カテゴリーによって記事のデザインを変更する方法を紹介します。これができることによって、例えば、ビデオの紹介ページ用のレイアウトとは別に本紹介ページレイアウトを変更するといったようにデザイン/レイアウトをカテゴリー別に簡単変更することができます。 これと、後に紹介予定のCustom Fieldを合わせ使うことで、簡単にビジネスディレクトリーや本やビデオなどのレビューディレクトリーなどがつくることができます。 さーあそれは、早速やってみましょーーう、えーとまずは、 １．自分の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”８”の内のページを開いたら、single-8.php のレイアウトに沿って表示されます。 このコードは、どこかのサイトで紹介されたものです。Function内に直接コードを使う方法以外にも、Pluginなどもありますので、是非探してみてください。
ＷｏｒｄｐｒｅｓｓのＥｘｃｅｒｐｔ は、抜枠に書いた文書若しくは本文の一部をデフォルトの（たしか）５５文字にしてテンプレートに表示させれるとても使い勝手がい いテンプレートタグの一つです。 ただ、デフォルトで指定する文字数では、都合が悪い場合もあります。実は、簡単なＰＨＰで本文の文書の文字を指定した数だけ抜きとれます。それでは、早速やってみましょうか。 ますは、自分が使っているＴｈｅｍｅフォルダの中からＦｕｎｃｔｉｏｎ.php ファイルを開いてください。 Function.php に以下のようなＦｕｎｃｔｉｏｎを作っておきます。 後は、テンプレートファイルに以下のようにすれば、本文より、イメージなどを抜いた、指定した文字数だけが表示されます。 上の場合は２５０文字表示されます。Ｐａｒａｇｒａｐｈタグなど何も付いてないので、好きなように前後に付け足せば完了です。例えばこの様に いかがですか？何か意見や感想があれば聞かせてください。その他、読みたいチュートリアルのリクエスト等ありましたら、教えてください。
