【体験Next.js&TypeScript】Material UIを使ってデザインを整える（全5回）

動画解説

解説動画の中で使っているコードを確認したい場合は、このページの後半でまとめている参考資料の中の「解説で使っているサンプルコード(GitHub)」から確認できます。

【Part1】Material UIを使うための事前準備

【Part2】モバイル用のヘッダー&メニュー実装

【Part3】PC用のヘッダー&メニュー実装

【Part4】Post一覧の見た目をGridで整える

【Part5】Cardを使ってデザインを整える

参考資料

• Next.js
  • Custom ‘App’（_app.jsについて書かれているページ）
  • Custom ‘Document’（_document.jsについて書かれているページ）
  • useRouter
  • next/link
• Material UI
  • トップページ
  • Installation
  • Server Rendering（Next.jsのサンプルコードのリンクが書かれているページ）
  • Drawer
  • App Bar
  • Material Icons
  • Hidden
  • Divider
  • Typography
  • Grid
  • Container
  • Card
  • Paper
  • makeStyles
  • createStyles
• React
  • リストと key（Reactでリスト表示を行うときに「key」を設定する理由）
• 解説で使っているサンプルコード(GitHub)
• Unsplash Source（画像のランダム表示で使っているサービス）

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか？

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

• Webエンジニアになりたいけど何から学習を始めれば良いかわからない
• 今まで独学で頑張ってきたけど、独学に限界を感じてきた
• プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る