CSS: ブロック要素を折り返しつつ横並びで表示させる方法

CSS

(最終更新: 2016-11-03) 目次高さを揃えれば崩れない高さがバラバラだと崩れる 1行内の要素数を固定すれば崩れない flexboxで完全解決 JavaScriptでも解決できるまとめ写真のサムネイルなど、数量不定で大量の要素を横並びに表示させ、画面幅に収まらな…

2016-09-26

CSS: フロートの解除にはクリアフィックスが便利

CSS

目次 clearしないとどうなるかフロートの親要素の次の要素でクリアするとフロートの直後に空要素を設置すれば解決クリアフィックスを使えばキレイ擬似要素:afterについてフロートの解除について、順を追って解説します。下記のような表示を目指してHTM…

2016-05-24

CSS: IE8もサポートする場合の注意点

CSS

ウェブサイトを制作する際、まだまだIE8をサポート対象に含める場合があります。使って良いもの・ダメなものを自分用に整理しておきます。 IE8では禁止 nth-child (IE9なら可) 対応状況: http://caniuse.com/#feat=css-sel3 calc() (IE9でもダメ) 対応状況:…

2016-05-15

CSS: 要素を天地左右の中央に配置したい(条件あり)

CSS

目次条件補足縦横比を維持した可変の設定デモと結果結論条件 .outerは縦横比を維持しつつ可変に。 .innerの幅・高さは固定。対応ブラウザはIE9以上。できればIE8も含めたい。 <div class="outer"> <div class="inner"> inner<br>text </div> </div> 以上の条件で、下記で紹介されている5つの方策をそれぞれ試…