最終回 カラムレイアウト
インラインブロックを利用したカラムレイアウトを解説します。要素の外からはインラインレベル要素としてレイアウトされるにも関わらず、ブロックレベル要素を内包できる特殊な性質を活かします。
第5回 リストマーカーの配置 2
今回はナビゲーションとして利用されるリンクが付いたリストマーカーの画像配置を考えます。リストマーカーとして使う要素を行の中央に配置するだけでなく、クリックも可能な実装を解説します。
第4回 リストマーカーの配置 1
リストの頭に配置されるアイコンやビュレットを思った通りの位置に配置する実装を、仕組みから詳しく解説していきます。「アイコンが微妙にずれて気持ち悪い」状態を解消しましょう。
第3回 アイコン画像の配置
行頭にある画像アイコンを行の真ん中に見えるように配置するために、vertical-alignをどのように指定すればよいか考えます。万能な設定はなく、画像要素と後続テキストの大きさのバランスが重要です。
第2回 画像の余白 2
行の中での位置はvertical-alignプロパティによってコントロールできます。このプロパティの値によって、画像や文字がどのように配置されるのか、余白はどのように発生するのかを詳しく解説します。
第1回 画像の余白 1
vertical-align: topの指定で、画像の余白はなぜ消えるのでしょう？ 要素がどのようにレイアウトされていくのかinline layoutの仕様を理解すると、なぜそうなるのかがきちんと説明できるようになります。