Nuxt.js + Vuetify デフォルトフォント変更の仕方

以下の記事はVuetify バージョン1の話なのでご注意を。
バージョン2ではstylusではなくてSASSを使っているのでまったく方法が異なります。続きは一番下で。

 
オフィシャルの説明ではさっぱりわからなかったのでメモです。

純粋なNuxtではassetsの中にcssファイルを作って、nuxt.config.jsで読み込めばスタイルシートが使えるはずなのですが、困ったことにVuetifyはデフォルトでstylusを使うのだそうで反応しません。

stylusって何だよと調べてみるとSassと同じようなスタイルシートの記法だそうで、$ほにゃららで上書き設定を入れなければいけないのだそうです。

面倒ですね〜。
ちなみにVuetify2.0でSASSに移行するそうです。

デフォルト値はこちら。
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_variables.styl
※Vuetifyのバージョンが2に上がったのでリンク切れしてます。

でもどこにどのファイルを置いて、何を書けばいいのかオフィシャルの解説ではさっぱりでした。

まずassetsディレクトリに「stylus」というフォルダを作ります。
その中に「main.styl」というファイルを作り以下のようにコードを書きます。

/assets/stylus/main.styl

// main.styl
$body-font-family = 'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', 'Hiragino Maru Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'HG丸ゴシックM-PRO', 'HGMaruGothicMPRO' !important;

@require '~vuetify/src/stylus/main.styl'

nuxt.config.jsのcssのところに「~/assets/stylus/main.styl」を追加します。

  css: [
    '~/assets/style/app.styl', '~/assets/stylus/main.styl'
  ],

こんな感じ。
とりあえずこれでデフォルトフォントは変更できました。

 
【追記 2019/08/30】
Vuetifyの最新のアップデートが9時間前になってました。
これを書いている間にもいじってるみたいです。

バージョンが2に上がってNuxtのほうも対応したようです。
一番上にも書きましたが、stylusからSASSに変わってデフォルトフォントの変更の仕方も変わりました。

ここにあるとおりにすれば簡単に変更できます。
ただしデフォルトではrun buildしてNODE_ENVがproductionの時しか効かないです。

run devのときにも反映させたかったのですが、現時点ではちょっと無理と判断し、デフォルトフォントを変えるのではなくてdefault.vueのdivタグでstyleを指定することにしました。

こんな感じです。
/layouts/default.vue

<template>
  <v-app>
    <div id="fontSetting">
      <nuxt />
      <div>テスト中</div>
      <v-footer>
        <v-icon size="16">mdi-copyright</v-icon>
        {{ new Date().getFullYear() }} hogehage Inc.
      </v-footer>
    </div>
  </v-app>
</template>

<script>
export default {};
</script>

<style>
#fontSetting {
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro",
    "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "HG丸ゴシックM-PRO", "HGMaruGothicMPRO";
  font-size: 50px;
}
</style>

これで一応フォントは変えられます。

Nuxt.js: Bulma + Buefy で共通cssファイルを作る方法

どこにも載ってなかったので実験して突き止めました。

/assets/css/

の中に任意の新しいファイルを作って保存すると、それだけでエラーになってました。
なので、

/assets/style/main.css

など、assetsディレクトリにBulmaと当たらないディレクトリを一つ掘りまして、テキトーなファイルを新たに作り、そこに共通スタイルシートを書きます。

で、nuxt.config.jsのcssに設定を追加しておけば、おk。

css: ['@assets/css/main.scss', '@assets/mycss/style.css'],

あ、余談ですが、BulmaとBuefyの英語読みは、

バルマ
ビュフィー

です。
決してブルマではありませんw

発音に困ったらGoogleに読ませるといいですよ。

CSS: headerとfooterを固定する方法

cssはどんどん進化してるんですね〜。
昔はいろいろいじくった記憶があるのですが。

body {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}

今はこれだけ。
UIコンポーネントなんていらないな〜。

CSS:ウィンドウの幅に合わせて設定を変更する

CSSの@media screenを使う時、HTMLファイルに直書きするタイプとCSSファイルに書くタイプと2つあるので自分用に備忘録です。
ウィンドウの幅に合わせて読み込むCSSファイルを分けてしまう場合は、HTMLのヘッダに

<link rel="stylesheet" href="css/sm.css" media="screen and (max-width: 700x)">
<link rel="stylesheet" href="css/pc.css" media="screen and (min-width: 701px)">

と書いてしまえばいいのですが、CSSファイルの中でさらにスマホ用、タブレット用で細かく分けたい時があったりします。
その場合は最近よく見かける入れ子の書き方にすればおk。

@media screen and (max-width:360px) {
	#hoge .hage{
		margin:0;
	}
}

@media screen and (min-width:361px) {
	#hoge .hage{
		margin:10px;
	}
}

 
電車に乗っていると本当によく見かけるようになったタブレットですが、この前コンビニで7インチのSH-06FでEdy決済をしたら、店員さんに「それ電話もできるんですか? 大きくていいですよね」となんだか詳しく聞かれるという出来事がw

「SH-06Fは7インチで大きく見えますが、ジーパンの後ろポッケにも入るんですよ」と言ったら本当に買おうとしていてビビリました。

iPhone SEはそれほど人気がないことがわかり、4インチじゃ小さくなってきたのかもしれませんね。

作る方はいろいろなサイズに対応しないといけないので面倒なのですが。。。

CSS:○番目の子要素、最初・最後の子要素だけ設定する方法

HTML5になってから随分と便利になったものだな〜と日々感心しているのですが、その中でも「これは便利!」と思ったCSSです。
以前ならJavaScriptでチマチマと書いていたのですが、今はCSSだけで書けるんですね〜、スゴいです。

指定した子要素だけに設定をしたいなら、

タグ:nth-child(n)

子要素のうち最初と最後だけに設定をしたいなら、

タグ:first-child
タグ:last-child

と書けば実現できます。

例えば動的サイトで<li>タグを使っていて、上下に区切り線を入れたい場合、しかもそのリストの数が可変だったりするとちょっと面倒くさいです。

(例)HTML

<ul>
	<li>あ</li>
	<li>い</li>
	<li>う</li>
</ul>
<ul>
	<li>hoge</li>
	<li>hage</li>
</ul>

スタイルシートをこんな風にしてしまうと、

<style>
ul{
	margin:0 0 20px 0;
	padding:0;
}

li{
	list-style-type:none;
	border-top:solid 1px;
}
</style>

CSS 子要素-1
一番下のラインだけなくなってしまうので一番下にだけ下線の設定を追加します。

li:last-child{
	border-bottom:solid 1px;
}

CSS 子要素-2
では、2番目の上の線だけ外してみると、

li:nth-child(2){
	border-top:none;
}

CSS 子要素-3
こんな感じになります。
CSSだけで出来るようになるとは! とても便利です。