レシピサイト
レシピをまとめて閲覧するために制作しました。
| 目標 | 献立を考える時間を短縮する。 ページ遷移の少ないサイトを作る |
| 目的 | お気に入りのレシピを一覧で見たい |
| 工程 | デザイン・コーディング・レスポンシブ対応 |
| 作業ボリューム | トップページ、記事詳細ページ、プライバシーポリシー |
| 自作素材 | サイトマップ・アイキャッチ画像・文章 |
| ターゲット | 自分 |
| カラー | 暖色 |
デザイン
デザイン制作日数：2日
ラフをノートで手書きした後、Figmaでデザインを書き起こしました。
ベースカラー/フォント
ベースカラーは黄色、トップページのフォントは柔らかい印象のZen Maru Gothicを使用しました。
記事詳細は文字が多いので、読みやすいNoto Sans JPを使用しました。
素材
| 背景画像 | 商用フリー素材サイトOKUMONO |
| ロゴ | Canva |
コーディング
制作日数：7日
PHP
参考書：水野史人『WordPressユーザーのためのPHP入門』
トップページ内でコンテンツを完結させるために、サブクエリを使って取得したデータを加工しました。(idを付与する、hrefにurlではなく#とカテゴリーのスラッグを付与するなど)
CSS
参考書：『HTML&CSSとWebデザイン-実践編』
参考サイト：CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 – coliss
GridレイアウトとFlexboxを利用し、メディアクエリで幅を指定しなくても自動で変化するようにしました。
JavaScript
参考サイト：JavaScriptの.createElement() でYouTube動画をモーダルで表示-DUB DESiGN
上記のサイトを応用して、「記事一覧をクリックすると、モーダルの埋め込み要素<iframe>の中に詳細記事が表示される」という仕組みを作ることができました。