目的
- TypeScript の練習。Web でよく利用される処理を実装し「汎用パーツ」にまとめる。
- Pug・SCSS の練習とデザインの勉強。色々な Web ページでいいなと思ったコンポーネントをトレースして一覧できるようにする。
作業方法
- 画像はフリーのプレースホルダー画像に差し替える
- そのままトレースするのでなく、効率的な書き方ができないか試す。また、クラス名・SCSS 変数も自分で考える
- 参考にした Web ページは各コンポーネントの「Notes」タブに記載
各コンポーネントについて
ページ下部のタブを切り替ることで、以下の情報を確認できます。
- HTML
⇒View と Context を元に出力された HTML
- View
⇒Pug を利用した View
- Context
⇒Pug に渡すデータ(※ページによってはデータがない場合もあります)
- Assets
⇒ 関連する TypeScript、SCSS ファイル(※セレクトボックスで表示ファイルを切り替えできます)
- Note
⇒ コンポーネントについての説明や参考にしたサイト情報
GitHub URL
https://github.com/zakzakst/parts