![見出し画像](https://assets.st-note.com/production/uploads/images/159114702/rectangle_large_type_2_434124c0e0e6178d3f2ceb9a843727b5.png?width=1200)
2024/10/24 【学習記録】アウトプット・ポートフォリオ進行状況
学んだこと(復習も含める)
TailwindCSS
flexクラス:要素をフレキシブルボックスレイアウトのコンテナとして設定する
子要素を自動的に調節して、利用可能なスペースを効率的に使用する。
子要素を簡単に並べられる。
画面サイズに合わせて自動調節をしてくれる。
子要素の縦や横の配置を簡単に制御できる。
flex-lox:子要素を縦方向(列)に配置するためのクラス
親要素を縦型のコンテナにする。
子要素を上から下の順に並べる。
モバイル画面など、縦長のレイアウトを作るのに適している。
ポートフォリオの進行状況
ポイントを表示する機能のレイアウトを作成する。
「日別獲得ポイント数」機能のカレンダービューのコンポーネントをインポートをする。(途中)
![](https://assets.st-note.com/img/1729776612-OoVNurUwHa1G4nEFclLYxf0y.png?width=1200)
![](https://assets.st-note.com/img/1729752865-lJoVa2uTPdnF6EHcx09ZYQb7.png)
![](https://assets.st-note.com/img/1729776635-uBe9T5GgOiscbkhRa8AyJWLt.png)
今日も8時間進めた!
余白・サイズ・テキストフォント・アイテムの配置など少しずつ基本的なTailwindCSSの書き方を思い出してきている✨️
思い通りのレイアウトにするのに少し時間がかかったけど、できるまでが楽しい!
ただ、今の自分に大事なことは、完璧主義にならないこと💦
デザインになると、凝ってしまうからある程度区切りをつけてどんどん進めなくちゃ!