https://css-tricks.com/three-css-alternatives-to-javascript-navigation/
JavaScriptを使ったハンバーガーメニューの代替となる3つの案を紹介しています。
メニューを別ページで用意する
水平スクロールするメニュー
CSSのみのハンバーガーメニュー
1は、メニューボタンを押すとメニューページにページ遷移するという意味です。閉じるボタンを押すと元のページに戻るためにJavaScriptが必要となる場合があります。
2はメニューの項目が多くない場合に、ハンバーガーメニューを使わず横スクロールでメニューを選べるようにする案、3はJavaScriptを使わずCSSだけでハンバーガーメニューを実装する案で、それぞれのコードの例も紹介しています。
図1 JavaScriptを使ったハンバーガーメニューの代替3案
https://1linelayouts.glitch.me/
CSS Gridを使ったレイアウトテクニックを10個紹介した記事です。ひとつだけFlexboxを利用しています。
タイトルにある「1行」は、CSSが全てで1行というわけではなく、ポイントとなっているプロパティが1行という意味でした。
ページ内のプレビュー部分は右下をつまんでサイズ変更できますし、CSSのコードは変更して確認できるようになっています。
図2 CSS Gridを使ったレイアウトテクニック
https://polypane.app/blog/css-breakpoints-used-by-popular-css-frameworks/
各種CSSフレームワークのブレークポイントをまとめた記事です。
Bootstrap、Foundation、Tailwind CSSなどメジャーなフレームワークでのブレークポイントのサイズをピクセル数で確認できます。
レスポンシブデザインの複数サイズでの表示チェックがまとめてできるPolypaneが提供する記事です。Polypaneでフレームワークのブレークポイントに合わせた表示チェックができるための設定ファイルがダウンロードできます。