表示件数と高さが変わるブロックの一覧を、画面サイズに合わせてカラム数を変えて表示する方法
レスポンシブなサイトで高さが可変のブロック要素の一覧をレイアウトする際にてこずったので、課題になったこととその解決方をメモしておきます。ニュースサイトなどに良くあるサムネイル画像とタイトルのブロック要素の一覧で、画面サイズに合わせてカラム数が変わる以下のようなレイアウトです。ちなみに、Flexboxを使わないやり方です。nth-child()とclearを使った方法、inline-blockを使った方法、さらに、flexboxを使った方法の3つをまとめてみました。 レイアウトの条件 レイアウトの条件を整理しておきます。 表示件数が変わる 表示件数が変わる場合でも同じHTMLとCSSでレイアウトする ブロックによって高さが異なる 画面サイズに合わせてカラム数を変える 上の条件だとli要素をfloatしてメディア・クエリで画面ごとに幅を指定すれば簡単にできそうです。ところが、ブロックの高さが変
ENTEREAL
Bootstrapでレイアウトデザインをするにあたって、必要な情報を分かりやすくまとめてみました。 この内容は、本家Bootstrapのサイトにも載っていますが、英語が苦手な方、使うのになれていない方をターゲットにわかりやすく噛み砕いて説明する事を目的にしています。 Bootstrapでのレイアウトの基本 Bootstrapのグリッドの機能を使ってページレイアウトをする際には、「固定幅レイアウト」と「リキッドレイアウト」の2通りの基本レイアウト方法を選ぶ必要があります。 Bootstrap的に言うと、<div class="container"></div>と、<div class="container-fluid"></div>のどちらを使うのかという事なのですが・・・。 固定幅レイアウト (container) ブラウザウインドの幅に応じた固定の幅がデフォルトで決められていて、それを元
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
便利なネガティブマージン | CSS Lecture
