CSS
(最終更新: 2016-11-03) 目次 高さを揃えれば崩れない 高さがバラバラだと崩れる 1行内の要素数を固定すれば崩れない flexboxで完全解決 JavaScriptでも解決できる まとめ 写真のサムネイルなど、数量不定で大量の要素を横並びに表示させ、画面幅に収まらな…
目次 clearしないとどうなるか フロートの親要素の次の要素でクリアすると フロートの直後に空要素を設置すれば解決 クリアフィックスを使えばキレイ 擬似要素:afterについて フロートの解除について、順を追って解説します。 下記のような表示を目指してHTM…
ウェブサイトを制作する際、まだまだIE8をサポート対象に含める場合があります。 使って良いもの・ダメなものを自分用に整理しておきます。 IE8では禁止 nth-child (IE9なら可) 対応状況: http://caniuse.com/#feat=css-sel3 calc() (IE9でもダメ) 対応状況:…
目次 条件 補足 縦横比を維持した可変の設定 デモと結果 結論 条件 .outerは縦横比を維持しつつ可変に。 .innerの幅・高さは固定。 対応ブラウザはIE9以上。できればIE8も含めたい。 <div class="outer"> <div class="inner"> inner<br>text </div> </div> 以上の条件で、下記で紹介されている5つの方策をそれぞれ試…
(追記 2016-06-06) 本文中のCSSのみのデモは、IE11でマウスホイールを使ってスクロールすると画面がチラつきます。 Edgeでは問題ありませんが、やはりJavaScriptライブラリを使うのが良いと思います。 「ScrollMagic」というライブラリを使ったデモを公開し…
症状 ひとつのHTMLに対してPC/モバイル両方のCSSをそれぞれ用意する、いわゆるレスポンシブなページについて。 モバイル向けではヘッダーをposition: fixedで固定し、その中にドロワーメニューのトグルボタンを右上隅に絶対表示で設置しています。 PC向けの…