モバイルファースト＆レスポンシブなサイトの作成手法を、ステップ・バイ・ステップでマスターする！

本書では、モバイルファースト＆レスポンシブで、サンプルサイトを制作していく過程を実際に操作しながら学んでいきます。
サイトはパーツ単位で作成し、章ごとに1つのパーツを作成していきます。

Chpater1　ヘッダー
Chpater2　ヒーロー
Chapter3　画像とテキスト
Chpater4　記事一覧
Chapter5　フッター
Chapter6　記事
Chapter7　プラン＆フッター
Chapter8　ナビゲーション

それぞれのパーツの作成にあたっては、パーツのレイアウトを実現するCSSの選択肢を示し、場面に応じて適切なものを選択して、作成していきます。
章末には他の選択肢やそのバリエーションをまとめて解説していますので、デザインやレイアウトの技を幅広く身につけることができるでしょう。
HTMLは最新の「HTML Living Standard」に準拠し、CSSでは従来から活用されてきたメディアクエリの他、Flexbox、CSS Gridなどのレイアウトのコントロール、CSS関数を使いこなします。

「本書では、新しいHTML&CSSに沿った形で『レスポンシブWebデザイン』を見直し、ページを作成しながらさまざまな選択肢を比較検討していきます。
サンプルのページを作成するばかりでなく、ページを実現するためのバリエーションを増やして、これからのWeb 制作に活用していただければと思います。』（著者「はじめに」より）

演習用ファイルがダウンロードできますので、ぜひ本書で最新のHTML&CSSコーディングを体感してください。

【特典付き】
・特典PDF『HTML&CSS　簡易リファレンス』
本書のサポートサイトから入手してください。

Introduction　イントロダクション
Setup　下準備
Chpater1　ヘッダー
Chpater2　ヒーロー
Chapter3　画像とテキスト
Chpater4　記事一覧
Chapter5　フッター
Chapter6　記事
Chapter7　プラン＆フッター
Chapter8　ナビゲーション

作って学ぶ　HTML＆CSSモダンコーディング

Reactベースのフレームワーク、Next.jsによるWeb構築の基本と実践を、ステップバイステップで学べる本。 
 本書は、これまでHTML&CSSを使ってきたものの、Reactにはちょっと手を出せなかった方を対象に、実際にブログを作成しながら、Next.jsを使ってサイトを構築できるようになることを目指しています。 
Next.jsはReactの環境が簡単に整い、サイトも構築でき、静的生成やサーバーサイドレンダリングも試せます。学ぶ環境としても、経験を積む環境としても、そして実務のための環境としてもバランスよく整っているといえます。 
Next.jsの基本的な機能が理解できることはもちろん、Reactの基本やReactでのCSSの扱いもしっかり解説しています。

●構成 
Chpater1　ReactとJSX 
Chpater2　コンポーネント 
Chapter3　CSS Modulesとスタイル 
Chpater4　レイアウトのスタイル 
Chapter5　画像とアイコン 
Chapter6　メタデータ 
Chapter7　外部データの利用 
Chapter8　記事データの表示 
Chapter9　動的なルーティング 
Chapter10　React Hooks（フック） 

●本書で制作するサンプルサイトについて 
本書ではNext.jsを使用して、ブログサイトをステップ・バイ・ステップで構築していきます。Next.js、React、JavaScript、CSS Modules、styled-jsxの活用方法や設定をわかりやすく見ていくため、ミニマルでシンプルなデザインにしてあります。Figma のデザインデータとして、デザインシステム（コンポーネント＆デザイントークン）もセットで用意していますので、実装時の参考にしてください。記事データの管理にはヘッドレスCMSのmicroCMSを利用します。

Chpater1　ReactとJSX
Chpater2　コンポーネント
Chapter3　CSS Modulesとスタイル
Chpater4　レイアウトのスタイル
Chapter5　画像とアイコン
Chapter6　メタデータ
Chapter7　外部データの利用
Chapter8　記事データの表示
Chapter9　動的なルーティング
Chapter10　React Hooks（フック）

作って学ぶ　Next.js/React　Webサイト構築

GatsbyJSで実現する、高速＆実用的なサイト構築


「高速化＆最適化」「メタデータ対応」「SPAやPWAへの対応」など、これからのWebサイトに求められる要素に対応するための、静的サイトジェネレーターの活用書。 
本書は「GatsbyJS（Gatsby）」を使って、「ReactやJavaScript（ECMAScript）に自信が無くても、実用レベルのWebサイトを構築できるようになる」ことを目標にしています。サンプルサイトを制作しながら、ステップ・バイ・ステップで解説していきます。 
Gatsbyへのアプローチ方法は色々と考えられますが、本書ではHTML&CSSで作成したベースとなるページを元に、サンプルのサイトを作成していきます。 
書籍の構成として、大きく2部構成になっています。 
「イントロダクション」では、今どきのWebサイトに求められることや、静的サイトジェネレータの解説、Gatsbyについてまで解説しています。 
「第1部　基本的なWebサイトの構築」では、トップページとアバウトページを作成し、基本的なWebサイトを構築します。それぞれベースとなるページを元に形にしていき、画像の最適化、高速化、メタデータの設定、PWA化などの設定を行います。 
「第２部　ブログの構築」では、ブログを構築して、第１部で作成したサイトに記事ページと記事一覧ページを追加します。各ページはベースとなるページを元に、外部からコンテンツデータを読み込んで形にしていきます。第１部と同様に画像の最適化などの設定も行います。 
巻末の「APPENDIX」では、gatsby-imageを簡単に扱えるようにする方法、Googleアナリティクスの設定、gatsby-plugin-sitemapプラグインによるサイトマップ作成、Internet Explorer11への対応など、Gatsbyに関する便利なトピックを紹介しています。 

本書に沿って実際に手を動かして作っていくことで、「GatsbyJS」の主要機能と使い方をマスターできることでしょう。 
また、GitHub、Netlify、Contentful、GraphQL、React、Node.jsなど、制作に関わるさまざまなツールや技術も適宜使用していきます。 
ぜひ本書で、これからのWeb開発を体感してみてください。 
なお、本書のサンプル制作で使用する素材、プロジェクトデータ、コンテンツデータはダウンロード可能です。 

【特典】 
以下の2つの特典PDFをダウンロードできます！ 
・セットアップPDF：Node.js、GitHub、Netlify、Contentfulなど開発環境の準備などをまとめたPDF。 
・microCMS対応ガイド：ブログの記事管理にヘッドレスCMSのmicroCMSを利用する方法をまとめたPDF。

イントロダクション
INTRO 1　今どきのWebページ&Webサイトに求められること
INTRO 2　CMSの利用と問題
INTRO 3　静的サイトジェネレータ（SSG）という選択
INTRO 4　Gatsbyという選択
INTRO 5　Gatsbyを学ぶために
INTRO 6　制作するサンプルについて

第1部　基本的なWebサイトの構築
Chapter1　ページの作成
STEP 1-1　下準備
STEP 1-2　トップページを編集してみる
STEP 1-3　JSX
STEP 1-4　トップページを取り込む
STEP 1-5　画像の表示
STEP 1-6　CSSを適用する
STEP 1-7 できあがったサイトを公開してみる

Chapter2　画像の最適化
STEP 2-1　Gatsbyで画像を扱うための準備
STEP 2-2　画像を最適化した設定に置き換える
STEP 2-3　Fragmentに置き換える
STEP 2-4　残りの画像も最適化した設定に置き換える
STEP 2-5　gatsby-imageで画像を切り抜いて表示する
STEP 2-6　SVGをインライン化する
STEP 2-7　背景画像をgatsby-imageで表示する
STEP 2-8　staticの画像を削除する
STEP 2-9　パフォーマンスを確認する

Chapter3　パーツのコンポーネント化
STEP 3-1　ページを増やす準備
STEP 3-2　ヘッダーをコンポーネント化する
STEP 3-3　フッターをコンポーネント化する
STEP 3-4　レイアウトコンポーネントを作成する

Chapter4　ページを増やす
STEP 4-1　アバウトページを作成する
STEP 4-2　Font Awesomeでアイコンを表示する
STEP 4-3　フッターのSNSメニューをアイコンで表示する
STEP 4-4　リンクを設定する
STEP 4-5　404ページを作成する

Chapter5　メタデータの設定
STEP 5-1　基本的なメタデータの追加
STEP 5-2　メタデータの値
STEP 5-3　ページごとにメタデータの値を変える
STEP 5-4　ページのURLを明示する
STEP 5-5　OGPを追加する
STEP 5-6　OGP画像を追加する
STEP 5-7　PWA対応
STEP 5-8　アクセシビリティやSEOのスコアを確認する


第2部　ブログの構築
Chapter6　ブログのコンテンツを用意する
STEP 6-1　コンテンツの管理方法
STEP 6-2　ブログの構造
STEP 6-3　Contentfulの準備
STEP 6-4　GraphQLでContentfulのデータを扱うための準備

Chapter7　ブログの記事ページを作成する
STEP 7-1　記事ページを作成する
STEP 7-2　記事のタイトルを表示する
STEP 7-3　記事の投稿日を表示する
STEP 7-4　記事のカテゴリーを表示する
STEP 7-5　記事のアイキャッチ画像を表示する
STEP 7-6　記事の本文（リッチテキスト）を表示する
STEP 7-7　リッチテキスト内の見出しにアイコンを付ける
STEP 7-8　リッチテキスト内の画像を表示する
STEP 7-9　リッチテキスト内の改行を
に変換する

Chapter8　ブログの記事ページを自動生成する
STEP 8-1　記事ページを自動生成する
STEP 8-2　前後の記事へのリンクを設定する
STEP 8-3　記事ページのメタデータを設定する

Chapter9　ブログの記事一覧ページを作成する
STEP 9-1　記事一覧ページを作成する
STEP 9-2　記事のタイトルを表示する
STEP 9-3　記事のアイキャッチ画像を表示する
STEP 9-4　リンクを設定する
STEP 9-5　メタデータを設定する
STEP 9-6　１ページの記事の表示数を変える
STEP 9-7　複数ページに分けた記事一覧ページを生成する
STEP 9-8　ページネーションを追加する
STEP 9-9　ナビゲーションメニューに記事一覧へのリンクを追加する
STEP 9-10　トップページに最新記事を表示する


Chapter10　カテゴリーページの作成
STEP 10-1　カテゴリーページを作成する
STEP 10-2　ページネーションなしでカテゴリーページを生成する
STEP 10-3　カテゴリーページの見出しとメタデータを設定する
STEP 10-4　ページネーションを元に戻す
STEP 10-5　カテゴリーページにアクセスできるようにする
STEP 10-6　パフォーマンスを確認する


APPENDIX
APPENDIX A　gatsby-imageを簡単に扱えるようにする
APPENDIX B　Googleアナリティクス
APPENDIX C　サイトマップ
APPENDIX D　RSS
APPENDIX E　Google Fonts
APPENDIX F　IE11対応

順位	3位
総合点	192点
Googleの検索結果での点数	185点
Twitterでの点数	7点

【Gatsby.js】作って学ぶ　Next.js/React　Webサイト構築の評価
🗓️2022-07-22更新

Gatsby.js分野での評価

【Gatsby.js】作って学ぶ Next.js/React Webサイト構築の評価🗓️2022-07-22更新

Gatsby.js分野での評価？

【Gatsby.js】作って学ぶ　Next.js/React　Webサイト構築の評価
🗓️2022-07-22更新

Gatsby.js分野での評価