実践
inline layoutを使いこなす
6

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア

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

高津戸 壮
高津戸 壮 | フロントエンド・エンジニア