この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。
はじめに
Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。
- font-size
- line-height
- vertical-align
- inline-block
トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚的に書いてしまっている部分だったという感想をいただきました。本記事の内容を理解すれば、日頃のコーディングの悩みがすっきりするかもしれません。
なお、この連載の内容は、弊社、株式会社PixelGridが運営するフロントエンドの技術情報を配信するサービス、CodeGridにて連載された内容を元にしています。フロントエンド関する様々な情報を毎週配信しています。ご興味があれば、こちらもチェックしていただけると幸いです。
レイアウトの仕組み、正しく理解できていますか？
こんなHTMLがあったとします。
この時、以下のように画像が並べられますが、画像の下部には、何かわずかなスペースが発生してしまいます。
このスペースは、以下の様なCSSを書くと、消すことができます。
img { vertical-align: top; }
このスペースは一体何か。なぜvertical-alignを書くと消えたのか。私はなぜこのようなことになるのか、よく分かっていませんでした。
また、以下のようにアイコン画像やラジオボタン、チェックボックスをリストの頭に配置するのは、よくあることです。
しかし、このアイコン画像ら、なかなかうまい位置にレイアウトされないことがあります。上記画像のように、少し下や上にずれてしまったり。ここでvertical-alignをいじったり、position: relativeにしてわずかに上や下にずらしたりなどして調節したりする人は多いでしょう。ですが、そもそも、なぜこのようにうまくレイアウトされないのか。どうすればうまく調節できるのか。それを調べていったところ、結果として、インラインのレイアウトについて詳しく理解するに至りました。
普段何気なく使っているけれど、実は詳しくは知らない（かもしれない）、インラインのレイアウトについて解説していきます。
font-sizeとline-height
まずははじめに疑問として挙げた、画像下部に発生するスペースについて考えていきましょう。……と言いたいところですが、その前に、これを理解するにはまずfont-sizeとline-heightの理解が必須です。今回はこれを解説していきましょう。
次のようなHTMLとCSSがあるとします。
The quick brown fox jumps over the lazy dog. ...
p {
font-size: 16px;
line-height: 16px;
background: #a6dbbe; /* green /
}
span {
background: #f197f1; / purple */
}
これは、以下のように描画されます。
このとき、文字の大きさは16pxで、行の高さも16pxです。それぞれの行を枠で囲んでみると、以下のようになるでしょう。
ここで、line-heightを広げてみます。
p {
font-size: 16px;
line-height: 24px;
}
すると、以下のように行の間にスペースが発生します。
この時の文字の大きさと行の高さについて、詳しく見ていきましょう。
ピンクの間に見える背景のグリーンの部分が、line-heightを指定することで広げられた「行間」となりますが、この部分のことをleadingといいます。
このleading、次のように、真ん中で半分に分割されます。このように半分に分割されたleadingをhalf-leadingと呼びます。
1行というのはfont-size分の高さを持った基本領域（inline box）の上下にhalf-leading分のスペースが加わり、成り立っています。このとき、1行の高さはline-heightが示す値、この場合でいうと24pxです。この値から基本領域の高さ16pxを引いた8pxがleadingの高さとなり、half-leadingの高さは4pxとなります。図にすると以下のような形です。
line-heightを変えると、この緑で示したleading部分の高さが変化することとなります。
行内の各部名称
行の中では、このように文字上下のスペースが確保されるようになっています。各部には、以下のように名前がつけられています。
テキストが配置される場合、まず始めに、それを配置するための箱が用意されると考えます。この箱のことをinline boxと呼びます。上図にて、紫で色を付けた領域です。テキストが配置される場合、このinline boxの高さが、1em分の高さです。
例えばfont-size: 16pxと指定したら、このinline boxの高さが16pxとなり、16pxが1emとして扱われるようになるという具合です。
そして、その上下にhalf-leading分の余白が加わり、1行の高さとなります。この高さがline-heightが示す高さとなります。こうして拡張されたinline boxのことを、extended inline boxと呼びます。line-heightが24pxなら、extended inline boxの高さが24pxとなります。
このinline boxの上端をtext-before-edge、下端をtext-after-edge。extended inline boxの上端をbefore-edge、下端をafter-edgeと呼びます。
インラインのレイアウトを考える上で重要なのが、baselineです。
baselineとは、その名が示す通り、文字の土台となるラインです。アルファベットの文字は通常、このbaselineを基準としてデザインされます。そして、ここから一定の距離のラインで、小文字の高さを揃えます。この高さがx-heightです（この高さは、CSS内で1exとして利用できます）。
ちなみに、このbaselineはアルファベットを基準に考えた場合で、日本語などのbaselineは、これよりもちょっと下がbaseline（ideographical baseline）となります。
CSS3の仕様を見ると、将来的には、このideographical baselineもvertical-alignなどの基準位置として利用できるようになるようです。
行の高さ
行というのは、テキストを配置するのに必要な分だけ作られます。そして、その高さは、各行それぞれにおいて決定されます。以下のようなHTMLとCSSがあったとします。
The quick brown fox jumps...
そして、各要素に異なるfont-size、line-heightと色を指定します。
p { font-size: 12px; line-height: 18px; }
b { font-size: 20px; line-height: 30px; }
em { font-size: 30px; line-height: 40px; }
i { font-size: 40px; line-height: 50px; }
すると、以下の様な描画結果となり、当たり前のことですが、pの中にたくさんの行が発生していることが分かります。
ここで、1行目を詳しく見てみると、以下の様にレイアウトが行われています。
b、em、iそれぞれの要素は、それぞれに指定されたline-heightの分だけの高さを持つextended inline boxを形成します。その前後のテキストは、pのline-heightが適用されます。こうして、複数のextended inline boxが一つの行の中に存在する場合、その中で最も高さの高いボックスの高さが、行の高さとなります。この場合は、<i>fox</i>が50pxで一番高いので、この高さが行の高さとなっています。これが基本的な行レイアウトの仕組みです。そして、これらのボックスは、ベースラインに沿って揃えられます。この揃え位置をいろいろと変更できるのがvertical-alignです。
今回は、font-sizeとline-heightにより、どのように行がレイアウトされるのかを解説しました。次回はvertical-alignについて解説していきます。
イベント動画
イベントの模様はYoutubeで公開されています。よろしければ、ご覧ください。