Blue Point Solutions
WordPress
winmonaye

【エレメンター】設定

エレメンターの設定メニュー関する情報、それぞれ項目の意味を紹介します。 一般 投稿タイプ エレメントの使用場所を選択します。 デフォルトカラーを無効化 テーマのカラー設定を使用するか、エレメンターでコントロールするかを選択します。 デフォルトフォントを無効化 テーマのタイポグラフィ設定を使用するか、エレメンターがそれを制御するかを選択します。 エレメンターを改善する＞使用状況データのトラッキング 有効にすることで、エレメンターを使用している方法について学び、改善するのに役立ちます。 スタイル デフォルトの汎用フォント デフォルトのフォールバックフォントを選択する コンテンツの幅 コンテンツ領域のデフォルト幅を設定する。 ウィジェット間のスペース ウィジェット間のスペースを設定する。 選択範囲をフィットするよう引き伸ばす 広がったセクションがフィットする親エレメントのセレクタを入力する。 ページタイトルセレクター ページタイトルを非表示にするには、CSSセレクタをここに入力してください。 タブレットのブレークポイント デスクトップデバイスとタブレットデバイスの間にブレークポイントを設定します。このブレークポイントの下に、タブレットのレイアウトが表示されます（デフォルト：1025px） モバイルのブレークポイント タブレットとモバイルデバイスの間にブレークポイントを設定します。 このブレークポイントの下にモバイルレイアウトが表示されます（デフォルト：768px） 画像 Lightbox すべての画像リンクを Lightbox ポップアップで開き、すべての画像リンクに対し、Lightbox が 自動的に動作します。 詳細 CSS 印刷設定 CSSを独立したスタイルシート（推奨）として含めるか、各ページに含めるかを選択します。 エディター読み込みツールのメソッドを切り替える サーバー構成の競合が発生した場合は、このオプションを有効にします。

記事を読む »
December 6, 2018 No Comments
WordPress
winmonaye

【エレメンター】マイテンプレート

エレメンターテンプレートライブラリを使用すると、100を超えるデザイナー製のページレイアウトやブロックにアクセスできます。 テンプレートの挿入 ①アイコンをクリック  すると、ページテンプレート、ブロック、または独自に保存されたテンプレートが編集画面から追加されます。 ②テンプレートをプレビューするには、 虫めがねのアイコンをクリックします   。 ③必要なテンプレートを選択するには、[挿入] をクリック します。 ④好きなテンプレートは、♡をクリックすると「お気に入り」に保存されます。 ⑤.json  または  .zip  ファイルをアップロードするには、  右上隅の矢印 をクリックします。 ページをテンプレートとして保存する ①パネルの下部にある緑色のボタンをクリックします。 ②「テンプレートとして保存」を選択 ③テンプレートに名前を付けて保存する。 セクションをテンプレートとして保存する ①保存するセクションを選択し、セクション設定を右クリックします。 ②名前を付けて[保存]をクリックします。 テンプレートをエクスポートする方法 保存したテンプレートをエクスポートすることが出来ます。 ① アイコンをクリックする。 ②  エクスポートしたいファイルのをクリックし、エクスポートします。 テンプレートをインポートする方法 エクスポートまたはダウンロードしたテンプレートをインポート出来ます。 ①アイコンをクリックしてライブラリを開きます。 ② 右上隅の矢印 をクリックします。 ③「ファイルを選択」をクリックし、インポートしたいファイルを選びます。 ④インポートしたファイルが「テンプレート」リストに表示されます。

記事を読む »
December 4, 2018 No Comments

HTMLタグにIDやクラスを指定するワケ

読者のニコラスさんからの投稿です： <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を使って、機能に応じて異なる設定をすることが出来ます： その他には？ もしこの他にもトップレベルのクラスの使用方法をご存知でしたら、是非教えてください。

記事を読む »
October 29, 2011 No Comments
jQuery & JS
winmonaye

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

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

記事を読む »
October 27, 2011 No Comments

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

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

記事を読む »
October 25, 2011 No Comments
CSS
winmonaye

webkitキーフレームアニメーション構文

この記事は、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

記事を読む »
October 23, 2011 1 Comment

cssイメージキャプションのスライドイン

この記事は、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上でそれ以外に配置に関する値がないところです。何故かと言うと、配置はオプションで作成したクラスの方で指定しているからです。きっとクエスチョンマークは、キャプションがスライドインしてくる隅に配置するのがいいかと思いますので、こんな感じになります： 実際に使ってみること！ このサイトで見つけたアイデアは、是非実際使ってみてください。可能なら（全部あなたが考えたと上司に伝えても構いませんので）会社の大きなプロジェクトなどで使用して、どんどん昇給してもらっちゃってください。

記事を読む »
October 19, 2011 No Comments
CSS3
winmonaye

CSS3グラデーションを今使う

この記事は、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紹介ブログ － 線状グラデーションサポート グラデーションギャラリー 放射状グラデーションに関する情報多数

記事を読む »
October 17, 2011 No Comments

:hoverでHTML5サウンド再生

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

記事を読む »
October 15, 2011 No Comments

画期的なCSS3 Gradient ツール

NettutsでおなじみのJeffrey WayやCSS TricksのChris Coyierなどが絶賛し、UIにななり力を入れて作られて、MAC用のAPP、[Gradient App]. まだまだ, Color Stopなどができないですが、今後生き残るツールの一つになるのは、間違いなさそうです。 http://www.gradientapp.com/

記事を読む »
October 13, 2011 No Comments

スティーブ・ジョブズの偉大なる軌跡（1955-2011）

この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 もし、スティーブ・ジョブズが10月5日水曜日に逝去したことをご存じないとしたら、きっと洞窟の中などで生活なさっているのでしょう。世界中のニュースで放送され、TwitterやFacebookや日常のプライベートな会話内でも、この偉大な企業家が残した膨大な損失と巨大な穴についての話題で持ちきりになったと言う事実は言うまでもありません。そうですね。確かにスティーブ・ジョブズは「全世界をあっと言わせ」ました。 "I want to put a ding in the universe."（世界中をあっと言わせてやりたいんだ。） この記事では数々の影響力の大きな名言や、スティーブ・ジョブズに敬意を表して贈られたアート作品を引用し、スティーブ・ジョブズの功績とプロフェッショナルな人生について着目していきたいと思います。 偉大なるスティーブ・ジョブズ "Be a yardstick of quality. Some people aren’t used to an environment where excellence is expected." （自身がクオリティの判断基準となりなさい。中には卓越を期待される環境に慣れていない人もいるのだから。） バックグラウンドについて "Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma – which is living with the results of other people’s thinking. Don’t let the noise of others’ opinions drown out your own inner voice." （人生は限られている。だから誰かの人生を生きて時間を無駄にしたりしてはいけない。他者の考えの結論に過ぎないのだから、世の定説に引っかかってはいけない。他者の考えに惑わされて、自分自身の心の声を聞き逃してはいけない。） スティーブン・ポール・ジョブズは1955年2月24日サンフランシスコにて産まれ、ポール＆クララ・ジョブズ夫妻に養子として迎え入れられました。ジョブズ夫妻はまた女児も養子として迎え入れています。彼の産みの両親はのちに結婚し、女児を設けました。 1972年に高校を卒業後、オレゴン州ポートランドにあるリード大学に進学しましたが、たった1学期で退学を決意しました。彼自身の言葉で表現すると、退学（ドロップ・アウト）を決意してからは、興味のある授業にのみ出席（ドロップ・イン）していました。その興味のある授業の中のひとつが、カリグラフィーのコースでした。ジョブズはのちに「もし大学でカリグラフィーの授業を受けていなければ、Macは複数の書体や適切な文字間スペースフォントを搭載していなかっただろう。」と述べています。 インドでの滞在を終えてから、スティーブ・ジョブズは元の職場であるアタリに技術者として復帰しました。 1976年にスティーブ・ジョブズはスティーブ・ウォズアニックとロナルド・ウェインと共にApple社を設立しました。その後1983年にペプシコーラに勤めていたジョン・スカリーをApple社のCEOとして引き抜きました。この時のあまりに有名な口説き文句が「このまま一生砂糖水を売り続けたいか。それとも自分と一緒に世界を変えてみないか。」と言うものでした。 1984年の終わりに向かい不況に見舞われながらジョブズとスカリーの仕事上の関係は悪化し、内部権力闘争の結果、スティーブ・ジョブズはマッキントッシュ部門責任者としての職務を追われました。ジョブズはのちにApple社から解雇されたことは、彼の人生に起こった最高の出来事だったと語っています。 NeXTプロジェクト "The heaviness of being successful was replaced by the lightness of being a beginner again, less sure about everything. It freed me to enter one of the most creative

記事を読む »
October 9, 2011 No Comments

:nth-childと:nth-of-typeの違い

まずはこちらの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」などもありますので、お忘れなく！こちらで更に詳しく説明しています。 もし視覚的サンプルを試してみたければ、リア・ヴェローさんが作ったこのツールが面白いですよ。

記事を読む »
September 9, 2011 2 Comments

CSS アニメーションの再スタート

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ CSSアニメーション（ala @-webkit-keyframes）の再スタートは、想像するほど簡単ではありません。ではまず、CSSアニメーションを一度だけ実行すると設定したとしましょう： ロゴ部分にクラス指定して実行したとします： その後、何らかの理由・・・例えばクリックに伴い・・・など、アニメーションを再度実行させたいと仮定します。きっとみなさんCSSで再実行する方法があると予想するかと思いますが、私が思いつく限りそのような方法は残念ながら見当たりません。JavaScript（jQuery）でクラス名を一度削除させて、再追加させてみたりするかもしれませんね： 本当にしなければならないことは、要素をそのページから一度完全に削除して、改めてインサートすることです。jQueryを使った簡単なデモとしては、クローンを作成して、オリジナルのすぐ後ろにクローンをインサートし、その後オリジナルを削除する方法があります。 もっと簡単な方法はありますか？ こういう投稿をすると、大抵いろんな方がもっと簡単な方法を提案してくださることが多いので、今回もそういう提案があるとよいのですが・・・。

記事を読む »
September 6, 2011 1 Comment

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

一昔前、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サイトでも、コードスニペットの部分でカスタムスクロールバーを使用しています。スクロールバーがあまり目立たないようにしてあるので、コードの着色部分とあわさって目がチカチカすることもなく、いい感じに仕上がってますね。

記事を読む »
September 6, 2011 3 Comments

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

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

記事を読む »
August 23, 2011 No Comments
jQuery & JS
winmonaye

YouTubeビデオの幅をFluidにする

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

記事を読む »
August 19, 2011 No Comments

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

この記事は、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だけで簡単にツールチップが作成出来るのです！

記事を読む »
August 17, 2011 1 Comment

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を無効化させている方々に対しても親切な方法と言えると思います。

記事を読む »
August 11, 2011 No Comments

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を適用させれば完璧です：

記事を読む »
August 10, 2011 No Comments

CSS Overflow

この記事は、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のオーバーフロー設定をすれば、これを防ぐことが可能です。

記事を読む »
August 8, 2011 1 Comment

CSSボックスモデル

この記事は、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指定して、必要幅を確保するために画像などの要素を内部に組み込んだりしてみた暁には、見事にトラブルにぶち当たります。 インライン要素だってボックスです 今まではボックスレベルの要素についてお話してきました。ボックスレベルの要素ならボックスとして考えるのも簡単かと思いますが、インライン要素だってボックスなんです。とてもとても細長い矩形を思い浮かべてみてください。その細長い矩形が各行を包み込んでいます。インライン要素でもその他のボックスのように、マージンやパディングやボーダーを設定することが出来るのです。 この「包み込み」がとても紛らわしくて、上記のように一見左側のマージンはボックス全体を右側に押しやるのではないかと思いますが、実際は一行目のみです。何故ならボックスの開始場所はそこのみだからです。パディングは今まで同様各行の上部と下部に適用されます。上の行と下の行のパディングが重なり合った場合は無視され、本来必要な高さのみ維持されます。背景は動作を確認し易いように、透き通らせています。 自分の目で確認してみましょう 実際にページ上でボックスがどのようになっているのか見てみたいと思いませんか？スタイルシートに以下のコードを書き込んでみてください。

記事を読む »
August 2, 2011 No Comments

ウェブの常識：CSS Sprite（スプライト）とは？

この記事は、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

記事を読む »
August 1, 2011 No Comments

  • カテゴリー

    • 最新ブログ

    ご相談ください

    弊社では、案件のサイズに関係なくコストパフォーマンスの高いウェブ制作サービスを提供しております。

    気軽にご相談ください。

    Email: info@winandcompany.net

    WordPress、Laravel、React Natvieを得意としたウェブシステム開発会を行っております。社多言語対応も可！
    気軽にお問合せください。

    Twitter Facebook Dribbble Youtube Pinterest Medium

    メニュー

    About

    • Stories
    • Community
    • Blog
    • Careers
    • Brand Assets

    Downloads

    • Coming Soon...
    • Coming Soon...
    • Coming Soon...
    • Coming Soon...
    • Coming Soon...

    © All rights reserved

    Made with ❤ in San Francisco Bay Area, California