本日は、京都レストランのスマートフォン向けWebページの実装作業を進めました。
まず、npx create-next-app を使用して Next.js のテンプレートを作成し、
GitHub 上に kyoto-restaurant-mobile というリポジトリを作成して push しました。
初期状態をコミットとして残し、ここから実装を進めていく形にしています。
次に、global.css を作成し、サイト全体で共通となるスタイルを設定しました。
具体的には、テキストカラー・背景カラー・ヘッダー用のカラーを CSS 変数として定義しています。
また、body に min-width: 320px を指定することで、iPhone SE などの小さな端末から最新のスマートフォンまで、さまざまな横幅に対応できるようにしました。
続いて、layout.tsx を設定しました。
ここでは Google Fonts の Shippori Mincho を読み込み、全体で利用できるようにしています。
和食・京都らしい雰囲気に合うフォントをベースに、今後のデザイン実装を進めていく予定です。
その後、components/Header.tsx と components/Hero.tsx を実装しました。
Header では店舗名を表示し、Hero セクションではキャッチフレーズとサブキャッチフレーズを配置しています。
Hero セクションについては、画面サイズに関係なくブロック自体が横方向の中央に来るよう、flex や mx-auto を使ってレイアウトを調整しました。
本文テキストは左揃えを維持しつつ、全体として中央に配置される形を意識しています。
スマートフォン表示については、Chrome の DevTools を使った確認に加え、今後は実機での表示確認も行う予定です。
明日は、トップページに写真を配置するところから作業を再開したいと思います。