タグ

2019年1月28日のブックマーク (2件)

  • CSS Grid Layout を極める!(場面別編) - Qiita

    0. はじめに この記事では、CSS Grid Layoutの基は知っているという前提で、いろいろな場面を想定して更なる使い方を書いていきたいと思います。 この記事は4部構成の中の 場面別編 です。 CSS Grid Layout を極める!(基礎編) CSS Grid Layout を極める!(場面別編) ←これ 作成中:CSS Grid Layout を極める!(アルゴリズム編) 作成中:CSS Grid Layout を極める!(番外編) トラックの大きさを柔軟に指定したい (grid-template-rows / grid-template-columns) トラックの幅・高さの指定は grid-template-rows / grid-template-columns で行いました。 基礎編では px を主に使いましたが、他にも様々なものが使えます。そして、以下で挙げる値は自

    CSS Grid Layout を極める!(場面別編) - Qiita
  • CSS Gridを使ったレスポンシブ対応の基本レイアウト

    2022年4月27日 CSS 以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか?前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します! ↑私が10年以上利用している会計ソフト! CSSグリッドの基の書き方は動画で確認! 基的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう! 2カラム まずは基の2カラム。CSSグリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう! 可変幅 2カラム カラムを画面の幅に合わせて伸

    CSS Gridを使ったレスポンシブ対応の基本レイアウト