fm recipe page

フロントエンドメンター - レシピページソリューション

これは、フロントエンドメンターのレシピページチャレンジのソリューションです。フロントエンドのメンターの課題は、現実的なプロジェクトを構築することで、コーディングスキルを向上させるのに役立ちます。

目次

• 概要
  • 挑戦
  • スクリーンショット
  • リンク
• 私のプロセス
  • で構築されています
  • 私が学んだこと
  • 継続的な開発
  • 有用なリソース
• 著者
• 謝辞

概要

挑戦

このプロジェクトのブリーフは、レシピページを構築し、次の資産から始めて、できるだけデザインに近づけることでした。

• モバイルおよびデスクトップレイアウト用のJPEG設計ファイル
• フォント、色などのスタイルガイド。
• 最適化された画像資産
• 変数および静的フォントファイル
• 事前に書かれたコンテンツを持つHTMLファイル

スクリーンショット

リンク

• フロントエンドメンターソリューション
• GitHubリポジトリ
• ライブサイト

私のプロセス

で構築されています

• セマンティックHTML5マークアップ
• CSSカスタムプロパティ
• モバイルファーストワークフロー

私が学んだこと

このソリューションには、私にとって新しい3つのものが含まれています。

• スタイリングリストマーカー
• スタイリングHTMLテーブル
• メディアクエリを使用します

レシピページには、準備時間と材料を備えた2つの順序付けられていないリストと、指示のある順序付けられたリストが含まれています。

順序付けられたリストでは、 ::marker擬似要素を使用してカウンターをスタイリングしました。

. instructions li :: marker {
  font-weight : 700 ;
  color : var ( --brown-800 );
}

順序付けられていないリストのリストマーカーのスタイリングは、もう少し挑戦的でした。モバイルレイアウト用のJPEGデザインファイルでは、マーカーはテキストの最初の行の隣に置かれませんが、リストアイテムのテキストコンテンツが2行にラップする場合、垂直に中央に配置されます。擬似要素の::beforeカスタムマーカーを使用して、マーカーをFlexBoxに配置しました。

. unordered {
  list-style : none;
  padding-left : 0 ;
}

. unordered li {
  display : flex;
  align-items : center;
  gap : 1.75 rem ;
  padding-left : 0.25 rem ;
}

. unordered li :: before {
  content : "•" ;
  font-weight : 700 ;
}

より良いアクセシビリティのために、HTMLの<ul>要素でrole="list"を使用しました。それがなければ、 list-style: none 。また、スクリーンリーダーはアイテムの数などの情報を発表しなくなります。

継続的な開発

画像の最適化を学ぶ必要があります！現在、このプロジェクトの最大のファイルは、このREADMEのために取ったスクリーンショットです。フォントファイルを最適化する方法を学びました。これで、スクリーンショットのファイルサイズは、結合されたすべてのフォントファイルのサイズよりも大きくなります。

有用なリソース

• Web.deのMichelle Barkerによるクリエイティブリストスタイリング - この記事は、順序付けられたリストと順序付けられていないリストの両方のリストマーカーをスタイリングする方法を把握するのに役立ちました。
• MDNのスタイリングテーブル - この記事は、基本的なテーブルスタイリングテクニックの良い復習です。

著者

• Frontend Mentor -@SabineEmden
• マストドン - @sabineemden

謝辞

このプロジェクトでは、Josh ComeauのCSSリセットを使用しています。

このプロジェクトで使用されているフォントファミリは、若いセリフと衣装です。フォントは、オープンフォントライセンスの下でライセンスされています。