【プロフィールページ改修第3回】CSS開発の準備 - スマレジエンジニアyushiのブログ

引き続き、プロフィールページを作成していきます。

yushi-dev.hatenablog.com

技術スタックは下記の通りです。

nuxt.js
SCSS
Tailwind CSS

今回は、CSS開発のための様々な準備を行います。

tailwindcssの導入

今回は、tailwindcssを使ってみます。

以前の別の開発ではbulmaを使いました。
bulmaの利点の１つとしては、すぐ使えるようなコンポーネント...例えばボタン、モーダル、ページネーションといったものが用意されていることがあります。
これはWebアプリなどで素早く機能を実装していきたいような開発では大きな長所ですが、逆にHP制作のような細かくデザインしたいケースでは、あまり生かせません。

tailwindの場合は、単にCSSを書くのを楽にする、というような向きが強いのかなと思っており、今回の開発において採用してみました。

nuxtにおけるinstallは、下記のように行いました。

yarn add -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init

(nuxt.config.js)
export default {
  ...
    buildModules: [
      ...
+      '@nuxtjs/tailwindcss',
      ...
    ],
    ...
}

SCSSの導入

いつも通りSCSSを入れます。

他の選択肢としては、例えばSassなどもありますが、僕はまだCSSに慣れていないので、記法がCSS自体に近いSCSSを採用しました。

yarn add -D sass sass-loader@10 fibers

nuxtにおいてグローバル変数を登録するための、@nuxtjs/style-resourcesも導入します。

yarn add -D @nuxtjs/style-resources

fontの設定

Google fontsで良さそうなfontを探してみました。

結局エンジニアっぽく、Red Hat Monoというfontを選びました。terminalで見慣れた感じです。

fonts.google.com

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono&family=Zen+Kaku+Gothic+Antique&display=swap');

* {
  font-family: 'Red Hat Mono', 'Zen Kaku Gothic Antique', monospace, sans-serif;
  text-align: center;
  font-size: 16px;
}