すたらブログ

文系Webプログラマの備忘録

CSS

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

CSS

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

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

CSS

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

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

CSS

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

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

CSS

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

CSSだけで実現するパララックスの練習

CSS

(追記 2016-06-06) 本文中のCSSのみのデモは、IEでマウスホイールを使ってスクロールすると画面がチラつきます。 やはりJavaScriptライブラリを使うのが良いと思います。 「ScrollMagic」というライブラリを使ったデモを公開しています。 デモ: http://sutar…

CSSの教訓: レスポンシブなページでは、サイズの相対指定を忘れずに

CSS

症状 ひとつのHTMLに対してPC/モバイル両方のCSSをそれぞれ用意する、いわゆるレスポンシブなページについて。 モバイル向けではヘッダーをposition: fixedで固定し、その中にドロワーメニューのトグルボタンを右上隅に絶対表示で設置しています。 PC向けの…