連載の最終回は、これまで説明した手法を利用して、要素を左右上下の中央に配置する方法を解説します。わからない点があれば、その手法を詳しく解説している回を読み直してみるのもよいでしょう。

今回は上下中央寄せの手法のうち「絶対配置とtranslate」「テーブルレイアウト」「Flexbox」を利用した3つの方法を紹介します。新しい環境で使える手法です。

絶対配置とネガティブマージンを利用した手法、絶対配置と上下marginにautoを指定する手法を解説します。それぞれの手法の使用できる条件、またなぜそうなるのかという仕組みから理解しましょう。

今回からは上下中央寄せを実現する方法を解説。紹介する手法は主に9つです。まずは、単純な実装から順に紹介します。上下padding、line-heightを利用したインラインレベルコンテンツの配置などです。

左右中央寄せの手法のうち、インラインブロックを利用する方法、Flexboxを利用する方法の2つを解説します。細かなコントロールができるか、できないかは、仕様と実装の理解にかかっています。

実務に頻出する要素を中央に寄せるさまざま方法を解説。同時になぜそうなるのかを仕様から、きちんと読み解きます。ただ「寄せる」から「わかって寄せる」実装を目指しましょう。

フォームに関連するbuttonやinput要素などのカスタマイズができるappearanceプロパティを取り上げます。ブラウザで先行実装されているので、スマートフォンではしばしば利用するプロパティです。

インラインブロックを利用したカラムレイアウトを解説します。要素の外からはインラインレベル要素としてレイアウトされるにも関わらず、ブロックレベル要素を内包できる特殊な性質を活かします。

今回はナビゲーションとして利用されるリンクが付いたリストマーカーの画像配置を考えます。リストマーカーとして使う要素を行の中央に配置するだけでなく、クリックも可能な実装を解説します。

リストの頭に配置されるアイコンやビュレットを思った通りの位置に配置する実装を、仕組みから詳しく解説していきます。「アイコンが微妙にずれて気持ち悪い」状態を解消しましょう。

行頭にある画像アイコンを行の真ん中に見えるように配置するために、vertical-alignをどのように指定すればよいか考えます。万能な設定はなく、画像要素と後続テキストの大きさのバランスが重要です。

行の中での位置はvertical-alignプロパティによってコントロールできます。このプロパティの値によって、画像や文字がどのように配置されるのか、余白はどのように発生するのかを詳しく解説します。

vertical-align: topの指定で、画像の余白はなぜ消えるのでしょう？　要素がどのようにレイアウトされていくのかinline layoutの仕様を理解すると、なぜそうなるのかがきちんと説明できるようになります。

borderプロパティの書き方と、その仕様を深く掘り下げます。おそらく使ったことがない人はいないプロパティですが、指定の意味を知ると、さらにメンテナンス性のある効率のよい書き方ができます。

おそらく使ったことのない人はいないcolorプロパティ。仕様の特徴を押さえ、プロパティの値として変数のように使えるcurretColorと併せて使うと、メンテナンス性の高いコードを書くことができます。

z-index再入門の最終回では、実際の業務で出くわす可能性のある困ったz-indexの実装が引き起こす問題を紹介し、実際の実装のヒントとして、その解決法をいくつか提案します。

z-indexプロパティ、positionプロパティ、スタック文脈とスタックレベルを用いて、意図しない重なりが起こる原因を解説します。またスタック文脈を生成するz-index以外のプロパティにも触れます。

z-indexは要素の重なりを指定するプロパティですが、その仕組みを正確に押さえておかないと、思い通りの重なり順になりません。まずはz-indexの仕様も含め、z-index使用に必須項目を解説します。

displayプロパティのtable関連値の実装応用例をさらに紹介します。一方、このプロパティを使う際に注意しなければならないことを、仕様書を参照しつつ押さえます。

これまでfloatで実現していた段落レイアウトをdisplay: tableで実現するだけでなく、さらに、その特性を活かした応用例を紹介します。日常業務でも使えそうなサンプルを用意しました。

2014年4月にWindows XPのサポートが終了し、業務で対応すべきブラウザがIE8もしくは、IE9以上に変化してきます。この記事ではIE8以降で使えるマルチカラムレイアウト手法を解説します。