ブックマーク / zenn.dev/tonkotsuboy_com (2)

  • CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する

    2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列(グリッド)を入れ子にして、親行列の行や列に子行列を整列させることが可能です。 この記事では、Subgridの基から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。 前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め 複雑な行列の入れ子と、subgrid

    CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する
    hkmn
    hkmn 2023/09/14
  • 2021年から開発の現場で使える3つの便利CSS - aspect-ratio, gap, is()

    ブラウザは日々進化しています。2021年もブラウザには多くの新機能が追加されました。 私はCSSの新機能を1年かけてチェックしてきましたが、その中でもとりわけ便利だと思った3つの機能を紹介します。いずれも、2021年に全モダンブラウザ(Chrome、Firefox、Microsoft Edge、Safari)で使えるようになったもので、日々の開発をラクにしてくれることでしょう。 動画や画像のアスペクト比を指定できるaspect-ratioプロパティ aspect-ratioプロパティとは、ボックスのアスペクト比(幅と高さの比率)を指定するプロパティです。 構文

    2021年から開発の現場で使える3つの便利CSS - aspect-ratio, gap, is()
    hkmn
    hkmn 2021/12/14
    “より、単一行レイアウトでも気兼ねなくFlexboxが使えるようになり、助かっています。 デモはこちら。ボックス間の隙間が16pxになっています。”
  • 1