2021年2月第4週号 1位は，Z-indexとスタッキングコンテキストについてのビジュアルガイド，気になるネタは，ソーシャルオーディオアプリClubhouseが800万ダウンロード超え，2021年2月前半に急増 - Gihyo Jp

utaksate.blogspot.com

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2021年2月15日～21日の間に見つけた記事のベスト5です。

1. Understanding Z-Index in CSShttps://ishadeed.com/article/understanding-z-index/

Z-indexとスタッキングコンテキスト（重ね合わせコンテキスト）についてのビジュアルガイドです。

入れ子の要素の場合，フォルダの階層のように重ね合わせが適用されることや，スタッキングコンテキストがどのような場合に新たに作られるかなどを細かく解説しています。

この記事の作者Ahmad Shadeedさんの記事はいつもためになるものばかりなんですが，かわいいイラストの入ったおしゃれなページなのは珍しいなと思いました。

図1　Z-indexとスタッキングコンテキストについてのビジュアルガイド

2. Design Trends 2021https://www.uxpin.com/studio/blog/design-trends-2021/

2021年のデザイントレンドは，見た目が魅力的である以上のことをしないといけないそうです。

以下の6つの項目でまとめていました。

• エシカル（倫理的な）デザインへの注目の高まり
• よりコントラストをつけてユーザーの注意を引く
• 遊び心
• シュールレアリスム
• 多様性を増やす
• コードに基づくデザイン

エシカルやダイバーシティといった最近よく聞くようになった言葉は，デザインとも無関係ではないことがわかりました。

図2　2021年のデザイントレンド

3. How to Create a Shrinking Header on Scroll Without JavaScript | CSS-Trickshttps://css-tricks.com/how-to-create-a-shrinking-header-on-scroll-without-javascript/

Webページの上部に固定されているヘッダの高さが，スクロールすると狭くなる効果をCSSのみで実装しています。

position:stickyを設定した要素を入れ子にすることで，スクロールすると子要素の高さで固定されるというテクニックを使っています。

図3　高さが小さくなる固定ヘッダをCSSのみで実装

4. CSS transitions and hover animations, an interactive guidehttps://www.joshwcomeau.com/animation/css-transitions/

CSSトランジションを使って，ホバー時にアニメーションするボタンの作り方を解説しています。

ボタンのアニメーションは単純なのですが，タイミング関数によるイージングや，CPUとGPUのレンダリング処理のタイミングのずれを修正する方法など，細かいところまで踏み込んだ解説になっていて参考になります。

図4　CSSトランジションを使ったホバーアニメーションのガイド

5. Glyphs - The Complete Icon Design Systemhttps://glyphs.fyi/

編集可能でオープンソースのアイコンセットです。1つのアイコンにアウトライン，塗りつぶし，カラーなど5つの種類があり，さらに太さや色を変更できます。

アイコンはFigmaで開くかSVGでダウンロードするかを選べ，SVGのコードをコピーすることも可能です。Figmaで開ける編集可能なアイコンセットも用意されています。

図5　編集もできるアイコンセット

そのほか，最近の記事の中から，気になるニュース記事を紹介します。

Let's block ads! (Why?)

からの記事と詳細 ( 2021年2月第4週号 1位は，Z-indexとスタッキングコンテキストについてのビジュアルガイド，気になるネタは，ソーシャルオーディオアプリClubhouseが800万ダウンロード超え，2021年2月前半に急増 - Gihyo Jp )
https://ift.tt/3koP9yC