https://ishadeed.com/article/grid-layout-flexbox-components/
CSSグリッドとFlexboxの違いと使い分け方を解説した記事です。記事タイトルは「グリッドはレイアウトのため、Flexboxはコンポーネントのため」となっています。
具体的な使用例と細かい解説がとても参考になります。CSSグリッドとFlexboxを組み合わせて使う例や、古いブラウザ用にCSSグリッドが使えない環境ではFlexboxが適用される記述方法も紹介しています。
図1 CSSグリッドとFlexboxの違いと使い分け方
https://polypane.app/blog/the-complete-guide-to-css-media-queries/
CSSのメディアクエリに関する完全ガイドです。メディアクエリについてそんなに説明する内容はないだろうと思って読み進めたんですが、知らないことがいろいろありました。
解像度、画面の縦横比、ダークモードかどうか、タッチデバイスかどうかを判断する記述方法も紹介しています。
また、現在いくつかのブラウザでだけ実装されているメディアクエリ機能も興味深い内容でした。
図2 CSSメディアクエリの完全ガイド
https://www.smashingmagazine.com/2020/06/website-stressing-out-visitors/
ウェブサイトが訪問者にストレスをかけないためのヒントを紹介しています。
自然の写真や自然の色を元にしたカラーパレットを使う
予測可能なリズムをデザインで作る
余計なノイズを取り除く
図3 ウェブサイトが訪問者にストレスをかけないためのヒント
https://www.webdesignerdepot.com/2020/06/20-unmissable-websites-june-2020/