エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
レスポンシブで要素数・高さ可変のボックスをタイル状に揃えて並べる | Tips Note by TAM
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
レスポンシブで要素数・高さ可変のボックスをタイル状に揃えて並べる | Tips Note by TAM
はじめに はじめまして、エンジニアの安部です。 実案件で、RWD(レスポンシブ・ウェブ・デザイン)で要... はじめに はじめまして、エンジニアの安部です。 実案件で、RWD(レスポンシブ・ウェブ・デザイン)で要素数・高さ可変のボックスをタイル上に並べ、画面幅に合わせて列数を変える(かつIE8対応)ということをやったので紹介します。 背景 CMSやテンプレートエンジンを用いて、カタログや写真の要素を複数行・複数列に並べることがあるかと思います。 要素数が可変でRWDの場合、段ごとに親要素でくくることができないため高さが違う要素でレイアウトが崩れてしまいます。 これをflexboxなどは使わずゴリゴリ手で書いて対応してみます。 例:タイル上に並んでいないページ 実装 使うもの HTML: data属性 CSS: float JavaScript: jQuery JavaScript: jQuery.heightLine JavaScript: underscore.js マークアップ 繰り返しの基本