Web

「2022年のモダンCSS改」を試してみました

投稿日:

新しいCSSプロパティが紹介されている 2022年のモダンCSS改 – Speaker Deck という記事(?)を読みました。

興味深かったので、そこで紹介されていたCSSプロパティを試すWebページを作成してみました。

ページリンク 説明
上下左右中央寄せ(CSS)
  • 上下左右方向の中央寄せ。
scroll-behavior を試す
  • 特定のボックス内のスクロールの動きを指定する。
  • 瞬時の移動、もしくは滑らかなスクロールか。
scroll-margin-top を試す
  • フラグメント(#)付きリンクでスクロールする際のオフセット(ずれの大きさ)を設定できる。
  • 画面上部に固定されたヘッダ領域がある場合などに便利。
backdrop-filter を試す
  • 背景画像に対して、ぼかしなどのフィルターを掛ける。
text-align-last を試す
  • 特定の要素内の最終行での文字の配置方法を指定する。
  • 「最終行」は、「要素の幅に対して十分な量の文字がない可能性がある」という意味で特殊であり、それ以外の行と区別して扱うと便利である。
overscroll-behavior-y を試す
  • 特定の要素上で、スクロール操作した際の挙動を指定する。
  • その要素内のスクロールと、その外部のスクロールとを扱う。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Chrome

Chrome のタブをグループ分けして使う

Chrome ブラウザのタブをグループ分けしながら使う手順を紹介します

Web

Mastodon(OStatus) を参考にして、理想の標準情報発信プラットフォームを考えてみました

話題の Mastodon を参考にして、私の理想とする情報発信プラットフォームについて考えてみました。 Mastodonとは? 見た目は、Twitterとほとんど同じサービスです。しかし、Twitte …

Web

sizes属性のデフォルト値は 100vw である

sizes属性のデフォルト値は 100vw です。

HTML

HTML とは?

HTML とは何かについて説明します。

Let's Encrypt

Let’s Encrypt: ホスト名毎に証明書を分けて発行する

ホスト名毎に証明書を分けて発行すると便利です。