表示件数と高さが変わるブロックの一覧を、画面サイズに合わせてカラム数を変えて表示する方法
レスポンシブなサイトで高さが可変のブロック要素の一覧をレイアウトする際にてこずったので、課題になったこととその解決方をメモしておきます。ニュースサイトなどに良くあるサムネイル画像とタイトルのブロック要素の一覧で、画面サイズに合わせてカラム数が変わる以下のようなレイアウトです。ちなみに、Flexboxを使わないやり方です。nth-child()とclearを使った方法、inline-blockを使った方法、さらに、flexboxを使った方法の3つをまとめてみました。 レイアウトの条件 レイアウトの条件を整理しておきます。 表示件数が変わる 表示件数が変わる場合でも同じHTMLとCSSでレイアウトする ブロックによって高さが異なる 画面サイズに合わせてカラム数を変える 上の条件だとli要素をfloatしてメディア・クエリで画面ごとに幅を指定すれば簡単にできそうです。ところが、ブロックの高さが変
最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ
最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材やプレビューを紹介します。 Boring Cards UI Kit PSD、個人・商用利用無料。 Bootstrap 4でも新しいコンポーネントとして注目されているカードを使用したUIキット。黄金比をベースにしたデザインはさまざまなサイズ・カラーで展開することができます。
矢野りんのWebレイアウト講座
トピックスTopics 2024年08月14日 セミナー・イベント 【9/18（水）開催】業界最大級のオンライン展示会「ITトレンドEXPO 2024 Summer」出展のお知らせ 2024年07月10日 ニュースリリース マイクロメイツ、業務フロー作成の基礎知識を学習する「業務フロー作成基礎研修」の提供を開始～業務フロー整備により組織の業務効率化と生産性向上を支援～ 2024年06月26日 ニュースリリース マイクロメイツ、企業のマニュアルを5つの観点で評価する「マニュアル無料診断」を開始～評価結果をもとに、改善点と解決策を提示し、マニュアルの高度化を支援～ もっと見る マイクロメイツとはABOUT MICROMATES 私たちマイクロメイツは、お客さまのIT投資効果を最大にするための各種サービスをワンストップで提供しています。 基幹システムの導入などの際に、お客さまのご要望をヒアリング
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインのアイデアが豊富！最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ
