Category: 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のフルサポートや、最終的にはテーブルレイアウトが不要となったり、まだまだ進化し続けるのではないでしょうか。 　　　

読者のニコラスさんからの投稿です： <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 の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 先日、とある方にこのテクニックに関して質問されたのですが、その時の私の反応は「チュートリアルとして記事にするにはあまりに平凡過ぎるのではないか」というものでした。けれどもそれからしばらく考えてみて、なかなか興味深い点も幾つかあることですし、みなさんに興味を持っていただける内容なのではないかと思うようになったのでこちらに取り上げることに致しました。 今回のアイデアは、ただ単にテキストを画像の上にオーバーレイ（重ねて表示させること）させるだけのことなのですが、左寄せのブロックがきちんとテキスト全体を充分な余白で囲んでいることに注目してください。こちらのスクリーンショットのサンプルをご覧ください： デモへのリンク スキーマ 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

この記事は、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が正式発表されれば、テンプレートレイアウトモジュールを使ってのページレイアウトも非常に役に立つかと思います。