表示件数と高さが変わるブロックの一覧を、画面サイズに合わせてカラム数を変えて表示する方法
レスポンシブなサイトで高さが可変のブロック要素の一覧をレイアウトする際にてこずったので、課題になったこととその解決方をメモしておきます。ニュースサイトなどに良くあるサムネイル画像とタイトルのブロック要素の一覧で、画面サイズに合わせてカラム数が変わる以下のようなレイアウトです。ちなみに、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年04月01日 お知らせ 代表取締役社長交代のお知らせ 2024年02月27日 ニュースリリース マイクロメイツ、新入社員教育に適したeラーニングコンテンツ「ビジネスマナー＆Microsoft 365活用術」を提供開始～ビジネスパーソンとして必要なスキル習得をサポート～ 2023年12月05日 ニュースリリース マイクロメイツ、「コールセンターのプロが教える 電話応対スキル向上ガイド」を提供開始 ～コールセンターや社内外の問い合わせ窓口における 教育負担軽減と電話応対品質維持・向上を支援～ もっと見る マイクロメイツとはABOUT MICROMATES 私たちマイクロメイツは、お客さまのIT投資効果を最大にするための各種サービスを一気通貫で提供しています。 基幹システムの導入などの際に、お客さまのご要望をヒアリングし、適切な教育計画の提案から、各種教育コンテ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインのアイデアが豊富！最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ
