こんにちは！
ブログサイトは1年生で制作しましたが、今回自主制作として、デザインはあまり変えずに使用する技術を変えてもう一度作ってみました。いらないかなと思った機能などは省いて作ったので前のブログよりシンプルになった部分はありますが、なるべく再現できるように頑張って作りました。逆にデザインに関しては、前よりもcssなどの知識が増えたため少し変えている部分もあります。その他にもCMSなども変わっているため、作っているときはとても新鮮な気持ちで作業を進めることができました。
そしてこの記事では主に、どういった技術を使ったかなどを紹介していきます。
挑戦したこと
課題で作ったブログはCMSにwordpressを使用していました。今回はnext.jsで作ったので、相性の良いmicroCMSを使いました。
next.jsでの構築は、ポートフォリオサイトでもやったときと同じように本を参考に作りました。そのため、ポートフォリオのときよりはスムーズに制作できたかなと思います。ここまでは今までも使用した技術ですが、今回初めて挑戦したことは、Tailwind CSSを使用したことです。
Tailwind CSSとは、ユーティリティファーストのCSSフレームワークで、クラス属性に直接CSSスタイルを適用することができます。たくさん用意されているユーティリティクラスを書いていけばデザインが変わっていくので、開発が効率的になります。
今回僕は、このTailwind CSSを勉強しようと思い、デザインがもとから作ってあるブログサイトをもう一度作り直すことにしました。
Tailwind CSSを使ってみて
今回の制作でTailwind CSSに挑戦してみて、率直に感じたことは、クラス名を覚えるのが少し大変だったということです。これまでのCSSの書き方とは違い、HTMLに直接スタイルを付けていく方法は、初めてだと少し大変に感じました。しかし、慣れてくるとデザインの調整を簡単に行うことができるようになり、便利に感じました。
そして、制作を進めていく中ですごいなと感じたのが、ユーティリティクラスの豊富さです。何かやりたいデザインがある時に、自分で調べたりAIに聞いたりなどしていくと、ほとんどユーティリティクラスで実装することができて驚きました。
さいごに
今回、Tailwind CSSを使うことができてとても勉強になりました。作業の効率化がTailwind CSSのメリットだと感じたので、今後の制作でも積極的に取り入れていきたいと思います。もう一度ブログサイトを作ることができてとても楽しかったです。
