laravel8+vue3+tailwindcssでフロント作成(初心者)

未分類


デザインをやった事がないバックエンドエンジニアよりのエンジニアが初めてフロントもコーディングする事になったので、忘却録として

環境は下記の通り

  • laravel8
  • inertia
  • vue3
  • jetstream
  • tailwindcss

初心者なので、bootstrapや、vuetify等のマテリアルコンポーネントをガリガリ使ってそれっぽいのを作ってみようかと思ったのですが・・・

vue3にまだ対応してない・・・と言う事でtailwindcssを活用する必要があるみたいです。

できたらbootstrapかvuetifyをつかってみたかったのですが、使えないと言う事で、それっぽいサイトtailwindcssでそれっぽく作るパターンが無いか検索した所

「tailblocks」と言うサイトが便利でした。

https://tailblocks.cc/

下記も参考になります。

https://www.tailwindtoolbox.com/

vue3でフロント作成する際に困った時に参考になれば

tailwindcssで作ったレイアウトをリアルタイムで確認する。
下記のサイトでデザインを組むとすぐに反映して確認できます。

https://play.tailwindcss.com/

どんなデザインにするか・・・

フラットデザイン
マテリアルデザイン
フラットデザイン2.0

等、webサイトを作る上で基本となる。デザインのパターンがあるみたいです。

フラットデザインがiphone等で使われているフラットなデザインで、その後流行したのが2014年からgoogleが提唱したマテリアルデザインX,Y,Z(奥行)の奥行を付けて押せるところはわかるデザインにしたり、物理法則にしたがってスワイプできたりする等のパターンになってるのがマテリアルデザインみたいです。

GridとFlex

レスポンシブルデザインを組み込む時にGridとFlex