今回はCSSが思うように表示されない場合、どういう点に注目すれば原因にあたりをつけることができるか、
という点に着目して自力で不具合箇所を特定するために必要なチェック項目を紹介します。

【２】目視・自力で不具合箇所を特定

HTMLとCSSの紐付けに問題がある場合

一部のスタイルだけが適用されないのではなく、そもそもCSS自体が全く効いていない状態で表示される場合は、そのCSSファイルがHTMLに正しく紐付けされていない可能性が高くなります。CSSへのファイルパスや、指定しているファイル名の指定を再確認しましょう。

特定のセレクタに記述したスタイルだけ全く効かない場合

ある特定のセレクタに対してだけ、何を指定しても一切スタイルが反映されない場合は、プロパティではなくセレクタの記述に問題がある可能性が高くなります。指定したセレクタのスペルが違っていたり、指定したセレクタで目的の要素が正しく指定できていないようなケースが考えられます。セレクタ名というのはユーザが任意で設定するものであるので、ツールで自動的にエラーを見つけることが困難です。従って、自分で「あ、これはセレクタが効いてないな」ということに気づく必要があります。
セレクタが効いていなければ、全てのスタイル指定は一切無効となりますので、そこが判断ポイントとなります。

気づきにくいうっかりミスの場合

初心者にありがちなうっかりミスのうち、気付きにくいものに次の項目があります。
　1.全角文字の混入（特に全角スペース）
　2.編集後の未保存
　3.編集しているファイルとブラウザで表示しているファイルが違う
いずれも無意識でやっている場合が多いので、案外自分で気づくのが難しかったりします。
こういうこともある、という可能性を頭に入れておきましょう。

CSS仕様通りの挙動の場合

例えばdisplay:block;が指定されている要素ではvertical-alignが無効となるなど、CSSの仕様で無効となるケースが定義されているようなものは、いくら指定しても反映されません。仕様に沿った形でデザインを再現するようにプロパティの指定方法を再検討する必要があります。デベロッパーツールで確認すれば適用されていないことは確認できますが、「なぜ適用されないのか？」という原因については仕様を知識として知っていないと回避方法や代替手段なども見つけられないため、初心者がつまづきやすいポイントです。これについては仕様解説をきちんとしている技術書やブログ記事などで地道に勉強しましょう。

ブラウザキャッシュの問題

　編集内容をサーバにアップロードして確認しているような場合、外部CSS、JS、画像などのファイルがブラウザにキャッシュされており、単純な再読込ではキャッシュのほうが読み込まれて最新のデータが反映されないことがあります。
ブラウザのキャッシュを削除して再読込したり、該当ファイルを直接ブラウザで開いて再読込することを試してみましょう。

ブラウザ側のサポート状況の問題

　指定したプロパティによっては、ブラウザ側がそもそもサポートしていない、あるいはバグにより正しく表示できないという状況もあり得ます。特定のブラウザ環境でだけ表示がおかしい、といったケースの場合はブラウザのサポート状況を調査する必要があります。
ブラウザ環境ごとのサポート状況を知りたい場合には「Can I use…」で該当のプロパティ等を検索してみましょう。また、バグについては「“ブラウザ名” “起こっている現象” バグ」といったキーワードで検索してみると解決策が見つかりやすくなります。

まとめ

いかがでしょうか？ CSSが反映されない事態に遭遇すると、つい真っ先に「ブラウザのバグ」を疑ってしまうかもしれませんが、今のブラウザ環境ではバグによって表示がおかしくなるケースはむしろ稀で、大半がユーザー自身のミスか、CSSの仕様を知らないだけ、といったことが原因です。
ツールを活用することで原因特定を簡単にすることもできますが、ツールでは見つけられない問題も多々あります。
自力で原因の特定と解決ができるように「どういうミスが有りうるのか？」ということを頭にいれておきましょう。

CSSを書いていると、時々思ったような表示にならないことがあって困りますよね？
特に初心者の頃は何が原因なのか見当がつかず、無駄に時間だけが過ぎていくなんていうこともあるかと思います。
そこで今日は、特に初心者が自分で書いたコードがうまく表示されない場合にどうやって問題箇所を特定していけば良いのか紹介したいと思います。

【１】ツールを使ってミスをチェック

HTMLの文法チェック

まず最初に、W3Cの文法チェックツールなどを使って、HTMLの文法チェックを行い、構文エラーが無いかどうか確認しておきましょう。
HTML側に重大な構文エラー存在していると、それが表示崩れの原因だったりすることもあるからです。問題が確実にCSS側にあることを確認するためにも、HTMLはクリーンな状態にしておく必要があります。

CSSの文法チェック

次に、CSSをW3Cの文法チェックツールなどを使ってチェックします。単純なスペルミスなどであればツールが確実におかしいところを見つけて教えてくれます。
なお閉じカッコが抜けている等の重大な構文エラーがある場合は「文法解析エラー」として解析エラーが発生した箇所のセレクタ名と行数を教えてくれますが、「閉じカッコがありません」等の具体的なエラー箇所は教えてくれませんので、それは自分で探す必要があります。

デベロッパーツールで現在のCSS適用状況をチェック

Google Chrome Developer Toolは、Chromeに付属している開発者ツールです。
表示がおかしいと思われる要素をブラウザの画面上で右クリック→検証で呼び出すと、
該当の要素に現在適用されているCSSのスタイルの状態を確認することができます。
もしスペルミスや利用できないプロパティなどの記述があった場合には図のような表示でスタイルが適用されていないことを視覚的に示してくれます。

その記述がどこに記載されているかは、セレクタの右肩にファイル名と行数が表示されますので、目視で探すより遥かに早く修正箇所を特定することができます。
また、次のような表示になっている場合は、他のセレクタによって上書きされていることを示しています。

複数のセレクタから同時に同じ要素・同じプロパティに異なる値が指定された場合、CSSセレクタの仕様に従って優先順位・あるいは詳細度の高いセレクタで指定された値が反映され、他の指定は無視されてしまいます。
自分で書いたCSSなら身に覚えがあるかもしれませんが、他人が書いたCSSの一部を編集している場合、他にどんな指定がされているのか全てを把握することは困難ですので、そのようなケースでは特に重要な機能になります。

今回は各種チェックツールを使って問題箇所を特定する方法を紹介しました。
これらについては既に活用している人も多いかもしれませんね。
次回は、目視など自力で不具合箇所を特定する際にチェックする項目を紹介したいと思います。

2017年4月にvistaのIE9サポートが打ち切られたことで、
今年新たに制作されるWebサイトの動作保証環境の多くはIE11および
Edge, Safari, Chrome, Firefoxの各最新版のみ、というのが標準となってきた印象があります。

最新環境＋IE11のみにすることで自由に使えるようになる技術とは？

IE10以下やAndroid4.x以下といったCSSのサポート状況が悪い環境を排除することで、ほとんどのCSS3プロパティや新しい値・単位等が利用可能となります。
その中でもサイズ可変を前提としたデザインの再現で従来難しかったものを可能にする便利なプロパティ・値・単位等がいくつかありますので、まだ取り入れていない場合には試してみると良いでしょう。

【1】新しい単位「vw・vh」

vw・vhとは、viewportのサイズを基準として相対的にサイズ指定するための新しい単位で、vwがviewportの横幅、vhがviewportの縦幅を基準とする相対単位となります。

・1vw = viewport幅の1/100
・1vh = viewport高さの1/100

となりますので、50vwでviewport幅の50%、100vhでviewport高さの100%といった計算となります。
この単位ならではの便利な活用例として次のようなケースが考えられます。

１．画面幅に応じて文字サイズを自動的に拡大縮小する（vwを使用）
２．常に画面の高さに対して一定の比率のサイズを保つ（vhを使用）

いずれも従来の単位では不可能か、指定が困難だったものを簡単に実現することができます。

＜参考サイト＞
◎px や % はもう古い? Viewport unitsという新たな単位『vw』,『vh』の使い方
◎サポート状況

【2】新しい値「calc()」

calc() とは、CSSで**四則演算が使える**ようになる新しい値（関数）です。これを使うと、例えば「左右20pxのmarginを含めて要素の幅を25%に設定する」といったことが可能となります。

セレクタ { width: calc(25% - 40px); }

calc()のすごいところは、計算させる数値の単位が違ってもよしなに計算してくれるというところです。

＜参考サイト＞
◎サイズ指定に役立つ！CSSでcalc()を使う方法【初心者向け】
◎calc()とビューポート単位を使ったコンテナからの解放
◎サポート状況

【３】新しいレイアウト手法「flexbox」

flexboxとは、従来のfloatやdisplay:table-cell等を使ったボックスレイアウトでは実現が困難だった様々なボックスの整列・配置を可能にする新しいボックスレイアウトのための仕様（プロパティ群）です。
flexboxを使ったレイアウトでは、次のようなボックスのレイアウトがCSSだけで簡単に実現できます。

１．隣り合うボックスの高さを自動的に一番大きいものに揃える
２．隣り合うボックス同士を上下中央揃えで配置する
３．複数のボックスを親要素に対して均等割付で配置する
４．HTMLのソースコードの順番に関わらずボックスの順番を任意に変更する
５．メディアクエリと組み合わせて縦並びと横並びを自動的に切り替える

などなど。いずれもfloatやdisplay:table-cellでは実現不可能な仕様ですが、flexboxを使えば簡単に実現が可能となります。特にレスポンシブのサイトにおいてデザインを意図した通りに再現しやすくなるため、環境が許すなら積極的に活用したいプロパティNo.1かと思います。

＜参考サイト＞
◎これからのCSSレイアウトはFlexboxで決まり！
◎CSSレイアウトにfloatは古い！初心者でも初められるFlexbox入門
◎サポート状況

まとめ

昔から運用されているWebサイトや、BtoBサイト、中高年向けサイトなどの運営をしていると、どうしても対象環境の選定が保守的になりがちで、結果として新しい便利な技術があっても利用しないでいつまでも苦労することになってしまいがちです。
少しずつでも知識・技術をアップデートしていくようにしましょう。

2016年11月1日、W3CからHTML5.1が「勧告」されましたが、ご存知でしょうか？

HTML5.1はもともと2014年のHTML5勧告に間に合わなかったものをカバーした
マイナーチェンジ版ですので、基本的にはHTML5と全体的に大きく違うものではありません。

HTML5とHTML5.1で何が変わったのか、その全貌はこちらの差分一覧（英語です）から確認することができます。

今日はこの中からマークアップ分野に特に気になったものを２つ紹介したいと思います。

①picture要素とsrcset属性の追加

HTML5.1におけるマークアップ分野での目玉は何と言ってもpicture要素とsrcset属性の追加でしょう。
これらは「レスポンシブイメージ」と呼ばれるもので、これまでは複雑なCSSやJavascriptの力を借りても完全に対応することが困難だった「画面サイズや解像度に応じて必要な画像をブラウザ側で判定して選択的に表示」することができる新しい要素・属性です。

srcset属性

srcset属性はいわゆる「Retinaディスプレイ対応」のように、デバイスピクセル比や
画面サイズに応じて高解像度画像と低解像度画像を使い分ける用途で用いるものになります。

<img src="photo.jpg" srcset="photo@2x.jpg 2x" width="100" height="100" alt="">

例えばこのように記述すれば、デバイスピクセル比が2の環境であれば自動的に
photo@2x.jpgの方が表示され、それ以外の環境ではphoto.jpgの方が表示されるようになります。

picture要素

picture要素は例えば「大画面環境では横に長い比率のメインビジュアルを表示し、
スマホ環境では縦に長い比率のメインビジュアルを表示する」などのように、
画面サイズなどに応じてサイズ・解像度・アスペクト比・トリミング位置などが
異なる複数の画像を使い分けられるようにすることができる要素です。

<picture>
  <source media="(min-width: 960px)" srcset="large.jpg">
   <source media="(min-width: 640px)" srcset="medium.jpg">
  <img src="small.jpg" alt="">
</picture>

このように、主にmedia属性で画面サイズを指定して表示したい画像を
動的に切り替える用途で用いられることが多くなります。

【参考サイト】
◎『レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能』
◎picture要素のサポート状況
◎srcset属性のサポート状況

②セクション要素内での見出しレベル仕様の変更

2014年勧告のHTML5では、「セクショニング・コンテンツの入れ子によって
正しく階層構造がマークアップされている場合、その中で使用される見出しレベルは問わない」
という仕様がありましたが、この仕様が削除されました。

先述のHTML5-5.1差分一覧の、「削除された仕様」に次の項目があります。

・The use of nested section elements each with an h1 to create an outline.
（アウトラインを生成するためにそれぞれh1を持つネストされたセクションを使用すること）

つまり、これからは
セクション要素内で使用する見出しレベルはセクションの入れ子階層に応じて適切に設定する必要
があるということになります。

【参考サイト】
◎W3C仕様 Headings and sections
◎【HTML5.1勧告】セクション要素内見出しレベル仕様の変更について

以上2点が個人的に特に注目したい変更点になります。
API関連や、その他細かい追加・削除・変更項目等もありますので、念のため差分一覧にも目を通しておくと良いでしょう。

2016年1月、Microsoftのサポートポリシーが変更され、各OSごとにインストールできる最新版のIEのみをサポートし、それ以前のバージョンはサポート外となりました。
これによって実質的にサポート対象がIE11のみとなったことで、これから新規で制作されるWebサイトについては原則としてIE11のみサポートとする動きが加速してくると思われます。

IEのサポートが11のみになると、これまで使えなかったCSS3の機能も他のモダンブラウザと足並み揃えて使っていくことが可能になり、「これでやっとIEの呪縛から開放される…！」と喜んでいる方も多いかもしれません。

しかし、CSS3が自由に使えるようになったことに油断して「ある対策」を取っておかなかったとしたら、ある日突然「うちのIE11で表示が滅茶苦茶なんだけど!?」というクレームが舞い込んでくるかもしれません。。。

ちゃんと作って確認もしたはずなのに…!?

• ・HTML5/CSS3を使っている
• ・ChromeやFirefoxなどIE以外のブラウザは問題ない
• ・クライアントのIE11では表示が激しく崩れている
• ・同じIE11でもマシンによって激しく崩れるものと崩れないものがある

事前に何度も動作チェックして、問題ないことを確認したはずなのに、
どういうわけだかクライアントの環境ではとんでもなく表示が崩れており、
大変なお叱りを受ける……

こんなことが制作現場では実際に起きています。
原因が思い当たりますか……？

• ・クライアントのブラウザのJSがオフになっている…？
• ・CSSの読み込みが阻害されている…？
• ・アンチウィルスソフト等が悪さしている…？
• ・クライアントのマシンに特殊な設定が施されている…？

いいえ、違います。

このような場合、その原因は十中八九IEの「互換表示」がオンになっていることが原因であると思われます。

IEの「互換表示」。これは、Web制作者側から見ると最後に残ったIEの罠です。

互換表示とは

IEの互換表示機能は、古いIE向けに制作されたWebページの表示が崩れる場合に、レンダリング方法を古いIEと同じ状態に変更することで表示崩れを直すための機能です。
互換表示をオンにすると、具体的にはIE7相当のレンダリング能力でWebページの表示を行うことになります。
たとえ最新のIE11を利用していようと、ひとたび互換表示をオンにしてしまうと表示能力はIE7と同じです。当然、HTML5やCSS3は認識できません。結果、表示が大きく崩れてしまうことになるのです。

互換表示がオンになる方法は大きく３通りあります。

1. 1. アドレスバー横の互換表示ボタンを手動でオンにした場合
2. 2. ブラウザの設定でWebサイト単位で設定されている場合
3. 3. Microsoft側のデータベースに互換表示が必要なサイトだと認識されているドメインの場合

1.は閲覧している人が自分の意志で互換表示にしている状態なので、それで表示が崩れても閲覧する側の自己責任です。しかし、2や3の場合、閲覧している本人の知らないところで「互換表示」の設定がなされてしまっていることになりますので、適切に対処しないとトラブルの原因となります。

互換表示を回避する方法

Web標準に準拠して正しく作られているWebサイトの場合、普通は互換表示で閲覧されると逆に表示がおかしくなってしまいます。
従って、このようなトラブルを未然に防ぎたければ、制作者側で互換表示を回避するための対策を施しておく必要があります。

対策方法はいたって簡単です。
HTML文書のhead部分に、以下のメタタグを1行追加するだけです。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

これだけ。
X-UA-Compatibleの指定はその他互換表示設定よりも優先されますので、
ここでIE=edgeとしておけば、互換表示での閲覧を防止することができます。
簡単ですね。

たった一行追加するだけですので、これまで特にクレームを受けたことはないという方も
念のため入れておくことをお勧めします！

今回は「display:table-cell;で横並びにしたボックスは、自動的に高さが揃う」という特徴を生かしたレイアウトを作ってみたいと思います。
完成目標はこちらになります。

・1行３列の横並びボックス
・中身のテキストの行数は可変
・中身のテキストの行数が変わっても常に上下センター揃え＆ボックスの高さも一定

上下センター揃え＋ボックスの高さ揃えという、どちらもdisplay:table-cell;が得意とするレイアウトの特徴を持ったレイアウトですので、とりあえず仮想テーブルにしてみたいと思います。

１．仮想テーブルレイアウトで横並びボックスを作る

まずul要素を仮想テーブルレイアウトで横並びにします。

【HTML】

<ul class="table-box">
	<li>テキストテキスト</li>
	<li>テキストテキスト</li>
	<li>テキストテキスト<br>テキストテキスト</li>
</ul>

【CSS】

/*簡易リセット*/
*{
	margin:0;
	padding:0;
}
ul,li{
	list-style: none;
}

/*仮想テーブルの設定*/
.table-box{
	display:table;
	width: 100%;
}
.table-box li {
	display: table-cell;
	width:33.3333%;
	padding: 40px 10px;
	border:#ccc 1px solid;
	background: #e7e7e7;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
}

[デモ]

ul要素をtable、li要素をtable-cellとした1行3列の仮想テーブルとしましたので、
上下センター揃えも隣り合うボックスの高さ揃えも実現できています。しかし、
隣り合うtable-cellは基本的にborderを挟んで密着してしまうため、デザインのように
均等に余白をあけて配置することがそのままでは困難です。

仮想テーブルレイアウトを使いこなそう①で説明した通り、display:table-cell;を設定した要素ではmarginは無効となるため、通常のフロートレイアウトのようにmarginで余白を取ることはできません。また、今回はtable-cell自体に背景色がついているので、paddingをボックス同士の間隔として使うこともできません。

このような時、ひとつの選択肢になるのがborder-spacingの活用です。

２．border-spacingでtable-cell同士の間隔をあける

border-spacingは、表組みのセル同士の間隔を指定するプロパティです。
table要素に対してborder-collapse: collapse;を指定すると、隣り合うセルのborderは重なって１本の線として表示されますが、border-collapse: separate;を指定するとそれぞれが独立した線として表示され、そのborderとborderの間隔をborder-spacingとして設定できるようになります。これは仮想テーブルレイアウトに対しても有効であるため、次のような指定を加えるとtable-cell同士の間に隙間を持たせることができるようになります。

【CSS】

.table-box{
	display:table;
	width: 100%;
	border-collapse: separate;
	border-spacing: 20px;
}

border-spacingで設定した余白は、セルに対して上下左右に付きますので、border-spacing:20px;と一律設定した場合、以下のような形となります。

［デモ］

これではレイアウト的に困る場合、例えば上下のみ、左右のみにborder-spacingを設定することも可能です。

●上下のみの場合： border-spacing: 0 20px;
●左右のみの場合： border-spacing: 20px 0;

※border-spacingの値にはpx値しか使えません。
※border-spacingの値を上下左右バラで指定することはできません。

３．両サイドの20pxの余白を無くす

border-spacingでセル間の間隔を確保した場合、仮想テーブルの両サイドにも必ずセル間と同じサイズの余白が入ってしまいますので、デザイン的にコンテンツ幅を揃えたい場合は少々困ります。
この場合は、仮想テーブルに親要素を追加して、その親要素の左右marginにborder-spacingと同サイズのネガティブマージンを指定してやると、全体のコンテンツ幅を調整することができます。

【HTML】

<div class=“space-between”>
	<ul class="table-box">
		<li>テキストテキスト</li>
		<li>テキストテキスト</li>
		<li>テキストテキスト<br>テキストテキスト</li>
	</ul>
</div>

【CSS】

.space-between{
	margin-left: -20px;
	margin-right: -20px;
}

［デモ］

いかがでしたか？
仮想テーブルレイアウトを使えば、「ボックスの高さ揃え＋コンテンツの上下中央揃え」といったレイアウトも怖くないですね。

ではまた次回！

• ブラウザ幅に対して全体の枠は最大800pxでセンター揃え
• 写真とキャプションのサイズは固定サイズレイアウト時の比率をキープ

という条件で作ってみたいと思います。

１．仮想テーブルレイアウトのレスポンシブ化

【HTML】

<div class="media">
	<div class="media-ph"><img src="img/photo.jpg" alt=""></div>
	<div class="media-data">
		<dl class="caption">
			<dt>1000畳もの大きさを誇る藤棚</dt>
			<dd>あしかがフラワーパークにある樹齢150年の大藤棚。空いっぱいに広がる巨大な藤棚は圧巻です。</dd>
		</dl>
	</div><!-- /.media-data -->
</div><!-- /.media -->

【CSS】

/*簡易リセット*/
*{
	margin:0;
	padding:0;
}

/*フルードイメージ  ①*/
img{
	max-width: 100%;
	height: auto;
}

/*baseスタイル*/
.media{
	max-width: 800px; /*②*/
	margin: 30px auto;
	padding: 25px;
	background: #f9f2fc;
	box-sizing: border-box; /*③*/
}
.media-ph{
	width: 61.3333%; /*④*/
	padding-right: 20px; /*⑤*/
	display:table-cell;
	vertical-align: middle;
}
.media-data{
	width: 38.6666%; /*⑥*/
	display:table-cell;
	vertical-align: middle;
}
.caption {
	padding: 15px;
	background:#fff;
	border-radius: 10px;
}
.caption dt{
	margin-bottom:10px;
	color: #330066;
	font-weight: bold;
	font-size: 14px;
}
.caption dd{
	font-size: 12px;
}

①まずはレスポンシブ対応とするため、画像を伸縮できるようにフルードイメージ化します。

②全体の枠は基本横いっぱいまで広がりますが、800px以上は大きくならないようにmax-widthを設定しておきます。

③固定pxのpaddingを含んだ状態で最大値800pxにできるよう、ボックスモデル計算をborder-box基準に変更しておきます。

④・⑥ 写真とキャプションが入るボックスは、固定レイアウト時の比率を保つように%指定に変更します。
固定レイアウト時の数値は以下の状態ですので、④は460÷750=61.3333%、⑤は290÷750=38.6666%となります。

⑤display:table-cell;になると、ボックスモデルのサイズ計算は自動的にborder-boxとなりますので、「20pxのpaddingを含んだ状態で全体が61.3333%」という計算が成立します。

レスポンシブ化した実装サンプル

上記サンプルHTMLを、実際にウィンドウの幅を広くしたり狭くしたりして確認してみてください。
正しい比率を保ったまま全体が伸縮するようになっているでしょうか？

２．Firefox・IEへの対応

上記のサンプルで正しく比率を保ったまま伸縮した方は、おそらくChromeやSafariをお使いなのではないでしょうか？
実は上記のコードではFirefoxやIE10+では画像のmax-widthが無効となり、伸縮してくれないはずです。
このことは、レスポンシブのサイトを作っていて、display:table-cell;を使った際に結構ハマる項目ですので、対処法を押さえておきましょう。

.media{
	display:table; /*①*/
	table-layout: fixed; /*②*/
	width: 100%; /*③*/
	max-width: 800px;
	margin: 30px auto;
	padding: 25px;
	background: #f9f2fc;
	box-sizing: border-box;
}

親要素がdisplay:table-cell;であるimg要素に、max-widthを効かせるためには、table-cell;が指定されている要素の直接の親要素に対して以下の３つの指定を必ず加える必要があります。

• ① display: table;
• ② table-layout: fixed;
• ③ widthの明示

Firefox/IEのバグ修正版

上記３つの指定を加えたサンプルを、FirefoxやIE10+で確認してみてください。
今度はちゃんとChromeと同じように、指定した比率で伸縮していると思います。

今回のケースに限らず、横並びにしたいボックスに対して単純にdisplay:table-cell;を設定しただけでは思うようなレイアウトにならないことがよくあります。table-cellを利用する際には、その親要素に対して原則としてdisplay:table;を設定し、table要素領域を明示するようにした方が良いでしょう。

いかがでしたか？
レスポンシブWebデザインでもtable-cellは大活躍ですので、上記の注意点を忘れずにいろいろ試してみてくださいね。

次回も仮想テーブルレイアウトの活用例を紹介します。
お楽しみに！

１．フロートレイアウトでの実装

【HTML】

<div class=“media”>
<div class=“media-ph"><img src="img/photo.jpg” alt=""></div>
<div class=“media-data">
<dl class=“caption”>
<dt>1000畳もの大きさを誇る大藤</dt>
<dd>あしかがフラワーパークにある大藤棚。空いっぱいに広がる巨大な藤棚は圧巻です。</dd>
</dl>
</div>
</div>

【CSS】

/*簡易リセット*/
*{
	margin:0;
	padding:0;
}
/*baseスタイル*/
.media{
	padding: 25px;
	background: #f9f2fc;
}
.media:after{
	content:””;
	display:block;
	clear:both;
}
.media-ph{
	width: 440px;
	margin-right: 20px;
	float:left;
}
.media-data{
	width: 290px;
	float:left;
}
.caption {
	padding: 15px;
	background:#fff;
	border-radius: 10px;	
}
.caption dt{
	margin-bottom:10px;
	color: #330066;
	font-weight: bold;
	font-size: 14px;
}
.caption dd{
	font-size: 12px;
}

◎フロートでの実装サンプル

フロートで実装した場合、このように写真とキャプションは上揃えとなってしまいます。
では次に仮想テーブルレイアウトで実装してみましょう。

２．仮想テーブルレイアウトに変更

.media-ph{
	width: 440px;
	margin-right: 20px;
	display: table-cell;
	vertical-align: middle;
}
.media-data{
	width: 290px;
	display: table-cell;
	vertical-align: middle;
}

◎仮想テーブルレイアウトの実装サンプル

横に並べたい.media-ph、.media-dataをdisplay:table-cell;に変更します。
するとこの２つのブロックはtd/th要素とみなされ、ブラウザ側は1行2列のtable要素がそこに存在するとみなしてレイアウトするため、このように自動的に横並びとなります。
更にtd/thの中ではvertical-alignを使うことが可能となりますので、.media-phと.media-dataの中身を自動的に上下中央に揃えることが可能となります。とても便利ですね！

３．写真とキャプションの間に余白をあける

display:table-cell;はとても便利ですが、利用にあたっていくつか注意点もあります。
display:table-cell;が適用されると、その要素はtd/th要素と同じ振る舞いをするようになります。
それは使えるプロパティだけでなく、使えないプロパティもtd/th要素と同じになるということを意味しています。
table-cellでは使えないプロパティの代表が、marginです。表組みの場合、セルとセルはborderを挟んで隣接しており、そこにmarginは存在しませんので、いくら元の要素がdivだったとしても、table-cellにした時点でmarginは無効となってしまいます。
今回のケースの場合、写真とキャプションの間には20pxの余白を取りたいのですが、フロートレイアウトの時のように.media-phにmargin-right:20px;を設定しても無視されてしまいます。
display:table-cell;を設定した要素同士の間に余白を取りたい場合は、

• ①marginではなくpaddingを利用する
• ②それ自身ではなく子要素にmargin/paddingをつける
• ③border-spacingを使う

といった選択肢の中から、デザインに合ったものを選ぶ必要がありますので注意をしてください。
今回はシンプルに①の方法で対処してみようと思います。

.media-ph{
	width: 440px;
	padding-right: 20px;
	display: table-cell;
	vertical-align: middle;
}

◎余白調整後の実装サンプル

いかがでしたか？display:table/table-cellは、IE8以上の全ての環境で利用することができますので、隣り合うコンテンツを上下中央で揃えたい場合の選択肢の一つとして是非活用してみてくださいね。

次回は、仮想テーブルレイアウトをレスポンシブ対応にしてみたいと思います。
ではまた。

ご無沙汰しております。フリーのマークアップエンジニア草野です。
皆さんは「テーブルレイアウト」をご存知でしょうか？
本来「表組みデータ構造」を表すための要素であるtable要素を、レイアウトの枠として利用するかつて一斉を風靡したWebページのレイアウト手法です。

この手法はWeb標準が広く浸透した今日では基本的にタブーとされているものであり、HTMLメールや某大手ECサイトのような特殊なケースを除き、原則として用いてはならないというのが業界のお約束となっています。

ただ、このテーブルレイアウト、実は普通のフロートレイアウトには無いとても魅力的な特徴があるのです。

フロートレイアウトの弱点

例えば、この図のようなデザインを通常のフロートレイアウトで組もうとしても、フロートの仕様上CSSだけでは実現することができません。フロートで横に並べたボックス同士は常に上揃えにしかならないからです。

また、こちらのようなレイアウトもフロートレイアウトでは実現できません。
フロートで横に並べたボックスの高さを、自動的に最も大きい物に揃えることはCSSではできないからです。

「上下中央で揃えられない」「並んだボックスの高さを揃えることができない」というのは、フロートレイアウトの二大弱点なのですが、困ったことにこのようなレイアウトの要望はデザイン的にごく当たり前であり、日常的に発生するものであるというのが現実です。
しかし仕様として出来ないものはできないので、手動でマージンを設定したり、JavaScriptを活用したり、positionを併用してトリッキーな実装を行ったりして何とかしのいできたのがこれまでの実態でした。

ところが、「上下中央で揃える」「並んだボックスの高さを自動的に揃える」というデザイン要望を、「テーブルレイアウト」であれば簡単に、しかもCSSだけで実現できるのです！

仮想テーブルレイアウト

テーブルレイアウトと言っても、昔のように本当にtable要素をレイアウトの枠として使うのではありません。あくまでマークアップは本来の役割通り、divやその他の文書構造に則した要素を使用し、そのdisplayプロパティの値をdisplay:table、display:table-cell;などのtable要素が持つ値に変更することでブラウザの挙動だけtable要素のように振る舞わせる、「仮想テーブルレイアウト」という手法を使うのです。

table関連の主な要素と、それに割り当てられたデフォルトのdisplay値は次の通りです。
このdiv等の要素のdisplay値を、これらtable系のdisplay値に変更することで、table系の各要素と同様のふるまいをさせることが可能となります。

上記の中でも仮想テーブルレイアウトで特によく使うものが「display:table;」と「display:table-cell;」です。よほど特殊なレイアウトでない限り、基本的に仮想テーブルレイアウトではこの２つの値を駆使して実装をしていきます。

次回から数回にわたって、仮想テーブルレイアウトの活用例を紹介していきたいと思います。
お楽しみに！

１．メニューのベースを作る

［サンプル１］

<ul class="menu">
	<li><a href="#">メニュー１</a></li>
	<li><a href="#">メニュー２</a></li>
	<li><a href="#">メニュー３</a></li>
</ul>

/*リセット*/
ul,li{
	margin:0;
	padding:0;
	list-style:none;
}
/*メニュー用スタイル*/
.menu{
	border:#ccc 1px solid;
}
.menu li+li{
	border-top: #ccc 1px solid;
}
.menu a{
	display:block; /*ブロック化*/
	padding: 15px; /*a要素の領域を拡大*/
	color:#666;
	text-decoration:none;
}
.menu a:hover{
	background:#e7e7e7; /*ロールオーバー時の設定*/
}

ul要素でメニューの構造を作り、a要素をブロック化してpaddingを設定することで、枠内全体をクリック可能な状態にします。こうしておくことでリンク可能な領域が広くなりますので、マウスでも指でもどちらでもストレス無く操作できるようになります。
メニューやボタンのような枠囲みされたリンク領域を作る場合には、必ずa要素のブロック化をしておくようにしましょう。

今回デザイン的に下線は付けたくないので削除し、代わりに:hoverで背景全体の色が変わるようにしておくことで「リンク領域である」ことを視覚的に示しています。
ただし、スマートフォン等のタッチデバイスではそもそも「ロールオーバー」という機能そのものが存在しませんので、このままでは「タップしてみて初めてリンクであることが確認できる」という状態になってしまっています。

２．リンクしていることを明示するためメニューに矢印を追加する

［サンプル2］

.menu a:after{
	/*①*/
	content:"";
	display:block;
	
	/*②*/
	width:8px;
	height:8px;
	border-top: #666 2px solid;
	border-right: #666 2px solid;
	
	/*③*/
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

タッチデバイス向けのUI対策でよく取られているのが、「矢印等のデザインでリンクしていることを明示する」という手法です。
矢印の形状は様々ですが、今回は直角を使った右矢印を追加してみたいと思います。

①:after擬似要素で空のブロックコンテンツを生成

矢印画像アイコンを背景画像に貼っても良いのですが、その場合いわゆるRetina問題（※１）が生じてしまいます。スマートフォン環境も考慮した場合、できるだけ画像に頼らない手法を検討することをおすすめします。そこで、:after擬似要素で矢印を描画するための空のコンテンツを生成し、CSSで直角矢印を作ることにします。

②borderで直角を描画

生成したブロックにborderで直角を描画します。今回は上と右ですが、隣り合う２辺であれば基本的にどこでも構いません。
width/heightが矢印の大きさになりますので、デザインに合わせて適宜設定しましょう。

③時計回りに45度回転させる

CSS3のtransformプロパティを使って時計回りに45度回転させます。回転させる方向と角度を調整することで、上下左右どちら向きの矢印でも表現することができます。
なおtransformプロパティはブラウザによって対応状況が異なるため、iOSやAndroid、Safari向けに -webkit-プレフィックス、IE9向けに-ms-プレフィックスをつける必要があります。

３．矢印をメニューの右端に配置する

［サンプル3］

.menu a{
	/*省略*/
	
	/*④*/
	position:relative;
}
.menu a:after{
	/*省略*/
	
	/*⑤*/
	position:absolute;
	right: 15px;
	
	/*⑥*/
	top:0;
	bottom:0;
	margin:auto;
}

最後に、作成した矢印をメニューの右端に配置します。今回は親要素を基準として任意の場所に配置したいので、positionを使った絶対配置を使います。

④親要素を絶対配置のための「基準ボックス」とする

position:absolute;で要素を絶対配置するためには、「基準ボックス」が必要です。これを基準として絶対配置の座標を決めるからです。もし基準ボックスを設定しないままposition:absoluteを使用した場合、自動的にbody要素（＝ブラウザ枠全体）が基準ボックスとなりますので、任意の位置に絶対配置することは困難となります。
ある要素を基準ボックスとするためには、position:relativeまたはposition:absoluteが設定されている必要がありますが、通常基準ボックスを設定するだけであればrelativeを使用します。

⑤矢印の左右位置を設定

position:absolute;で配置方法を絶対配置に変更し、rightプロパティでa要素の右端から15pxの位置に矢印を配置します。

⑥矢印の上下位置を設定

上下方向は、メニューが複数行になる等、高さが変わったとしても自動的にa要素の上下中央に配置したいと思います。
ポイントは「topとbottomを両方0に設定し、marginをautoにする」ということです。この方法のメリットは、どんなサイズの要素でも自動的に親要素に対して上下中央に配置することが可能なことです。ちなみに「leftとrightを両方0」にすれば、左右中央揃えの絶対配置も可能です。

いかがでしたか？
絶対配置の上下中央揃え等は、単純ですが知っていると便利なテクニックですので是非活用してみてください。
ではまた次回！

★１．ハイライト・シャドウを加える

［サンプル表示］

<p><a href="#" class="btn btn_arw1”>ボタン</a></p>

.btn{
	display:inline-block; 
	padding:10px;
	background:#69C;
	color:#fff;
	text-align:center;
	text-decoration:none;
	border-radius: 5px;
	box-shadow:
		-1px -1px 0 #ccc, /*ハイライト*/
		1px 1px 0 #000, /*シャドウ*/
		1px 1px 5px #666; /*ドロップシャドウ（ぼかし有り）*/
}

box-shadowは要素に影をつけることができるCSS3の新プロパティです。
box-shadowの基本書式は以下の通りとなります。

CSS3では「, (カンマ)」で値をつなぐことで、ひとつのプロパティに複数の値を持たせることができますので、左上方向にハイライト、右下方向にシャドウとしてそれぞれ1px幅のソリッド（ぼかし無し）な影を持たせて立体化し、更に３つ目に5px幅のボケ足を持ついわゆるドロップシャドウを追加しています。シャドウは必要であればいくつでも追加することができますので、いろいろ試してみるとよいでしょう。

★２．ボタン内側に立体感を出す

［サンプル表示］

.btn{
	/*省略*/
	box-shadow:
		-1px -1px 0 #D4EDFF,
		1px 1px 0 #369,
		1px 1px 5px #666,
		0 0 15px 2px rgba(0,51,153,0.5) inset; /*内側のシャドウ*/
}

box-shadowは通常要素の外側に影をつけるものですが、「inset」を追加することで要素の内側にも影をつけることが可能（※）です。そこで今回は内側へのbox-shadowを利用してふんわりと立体感を追加することにします。

X座標,Y座標の値を0,0にすると、要素の周囲全体に均等に影をつける（光彩表現）が可能となります。
そのまま15pxのぼかし幅で内側に影をつけても微妙に平面的に見えるので、今回は更に2pxの「spread値」を追加しておきます。spread値とは、要素の境界線から指定した幅だけベタ塗りする領域を指します。オプション値なので普段は省略しておけば良いですが、追加する場合には必ずボカシ幅の次に記述する必要がありますので注意してください。
※insetによる内側へのbox-shadowは、CSS3 PIEでも再現できないので、IE8以下では使用できません。

★３．マウスオーバー時にフワッと変化させる

［サンプル表示］

.btn{
	/*省略*/
	transition: 0.5;
}

「:hoverでマウスが乗った時」など、要素の状態が変化したタイミングで滑らかにプロパティの値を変化させる「切り替えアニメーション効果」を追加するものがCSS3の「transiton」プロパティです。

transitonは

の４つのプロパティをひとつにまとめたショートハンドプロパティで、このうち必須なのは「transiton-duration」のみで他は省略可能です。単純にふわっと変化させたいだけの場合には今回のようにtransition-durationの値のみ設定しておけば簡単ですね。
※IE9以下非対応、Androidでは-webkit-プレフィックスが必要です。

★４．クリック時に「押した」感を出す

［サンプル表示］

.btn{
	/*省略*/
	position:relative; /*相対配置指定*/
}
.btn:active{
	left: 1px; /*右に1pxずらす*/
	top: 1px; /*下に1pxずらす*/
}

最後に、クリックした時に少し押し込むように右下に位置をずらすことで「押した感」を出してみましょう。
「クリックした時」というのは:active擬似クラスで設定することができます。
ここに「①自分自身の現在の位置を基準として」「②右下に1pxずつ位置をずらす」というスタイルを指定します。
まずpositionの値をrelativeにすることで「自分自身の現在地を基準として相対的に位置をずらす」ということが可能になります。そして次に:activeのタイミングで表示座標を右に1px、下に1pxずらすことで完成となります。
要素の座標を数値で指定するleft/right/top/bottomの各プロパティは、対象要素のpositionプロパティが「static（初期値）」以外の場合のみ有効となるので、忘れずにpositionの指定をするようにしておきましょう。

いかがでしたでしょうか？
CSSで何ができるか知っていればアイデア次第でいろいろな表現が可能になりますね。

１．ボタンのベースを作る

［サンプル１］

<p><a href="#" class="btn">ボタン</a></p>

.btn{
	display:inline-block; /*ブロック化*/
	padding:10px;
	background:#69C;
	color:#fff;
	text-align:center;
	text-decoration:none;
}
.btn:hover{
	background:#6CF;
}

まず基本となるボタンのベースを設定します。ボタン状のリンクを作るためにはまずa要素のdisplayプロパティを「inline」から「block」もしくは「inline-block」に変更（ブロック化）する必要があります。
幅や高さを指定したり、文字列の周囲に広いリンク領域を確保したりするために必ずどちらかを指定してください。block／inline-blockのどちらにするかは、widthを親要素の幅いっぱいに自動的に広げたいか、それとも文字列の長さに応じて自動的に伸縮するようにしたいか、という点で選択するとよいでしょう。
今回はボタン幅は文字列の長さに応じて自動的に伸縮するようにしておきたいので、inline-blockを指定しておきます。

２．角を丸くする

［サンプル２］

.btn{
	display:inline-block;
	padding:10px;
	background:#69C;
	color:#fff;
	text-align:center;
	text-decoration:none;
	border-radius: 5px; /*角を丸くする*/
}

角丸のボタンにする場合は「border-radius」プロパティを使用します。CSS3のプロパティになりますので、IE9から利用できます。
（IE8以下に角丸を適用したい場合は、「CSS3 PIE.htc」等の機能補完用スクリプトを利用するなどの別途対策が必要となります）

３．ボタンにbefore擬似要素で三角アイコンを追加する

［サンプル３］

<p><a href="#" class="btn btn_arw1">ボタン</a></p>

.btn_arw1:before{
	content:""; /*アイコン用の空オブジェクトを生成*/
	display:inline-block;
	width:0;
	height:0;
	border: transparent 4px solid; /*三角形のサイズ指定*/
	border-left-color: #fff; /*三角形の向き指定*/
	margin-right: 3px; /*位置調整*/
	margin-top: -3px;　/*位置調整*/
	vertical-align:middle;
}

アイコンを追加する方法はいろいろありますが、三角形のような基本図形であればCSSだけで表現が可能です。
まず.btn_arw1に「:before擬似要素※」を設定します。
:before擬似要素に対してconentプロパティで空のオブジェクトを生成しておき、これに三角形アイコンのデザインを施していきます。
三角形の実装にはborderプロパティを利用します。width/height共に0にした上で、透明色（transparent）の実線を適用します。
サイズ0の要素にborderを設定すると、borderは以下の図のような形に４分割されます。

後は矢印の向きと反対側のborder（右向き矢印ならborder-left）に色だけ設定してやれば三角形の出来上がりです。

上記コードの場合、出来上がる三角形の形状は二等辺三角形となりますが、各種数値を調整することで正三角形やその他の三角形も作成できます。その場合はやや仕組みが複雑になりますので、「CSS triangle generator」などのツールを活用すると良いでしょう。

いかがでしたか？
テキスト＋CSSでデザインすれば、文字の打替えやバリエーションの追加も自由にできますね。
次回はこのボタンに更にCSSで装飾を加えてバリエーションを追加していきます。
お楽しみに♪