解説用のアプリとGitHub
GitHub
あの日奪われた傘の行方を僕たちはまだ知らない
雨の日に傘を奪われたことがある人が嘆くだけのアプリです。
Rails 7.0.5
Tailwind CSS 3.3.2
導入方法
まず、好きなフォントをGoogle Fontsで探します。
解説用に２種類用意しました。
DotGothic16
Noto Serif Japanese
Google Fontsで探す。
URLを開いてもらうとこの画面のようになると思います。赤い丸で囲まれた部分をクリックします。
次に下記の画像のように、右上にこのようなボタンがあると思いますのでクリックします。
下記の画像のようなのが出現すると思います。
この二つを使ってTailwindCSSに導入することになります。
三番目のです。
この画像で必要な部分は、DotGothic16とsans-seriです。
Railsアプリのapplication.html.erb
<html>
<head>
#省略
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap" rel="stylesheet">
#省略
</head>
<body>
<%= yield %>
</body>
</html>
余計な部分は省略しますが、head内に取得したlinkを記述します。ここまでは同じ作業なので同時に行います。
tailwind.config.js
長いですが省略するよりわかりやすいと思うので全て載せてあります。
module.exports = {
content: [
'./app/views/**/*.html.erb',
'./app/helpers/**/*.rb',
'./app/assets/stylesheets/**/*.css',
'./app/javascript/**/*.js',
'./app/javascript/**/*.jsx'
],
theme: {
extend: {
fontFamily: {
robo: ['DotGothic16', 'sans-serif'],
umbrella: ['Noto Serif JP', 'serif']
}
}
},
plugins: [require("daisyui")],
daisyui: {
themes: ["winter"],
},
theme:
extend:
fontFamily:
の三つを自分で書き足してください。
robo: ['DotGothic16', 'sans-serif']
umbrella: ['Noto Serif JP', 'serif']
この二つについて解説します。
robo:やumbrella:に関しては、自分が好きな名前をつけて問題ありません。
Noto Serif JPのフォントのように間が空いている場合は、開けなくても動きますがそのまま空けておくべきです。
'sans-serif'や'serif'はもしも'DotGothic16'が表示されなかった場合に代わりに表示されてくれるフォントです。左から順番に試してくれるので書いておくことをお勧めします。
また、一つのフォントだけを導入したい場合は下記のようにするとできます。
基本的に一種類の場合は","はなくて大丈夫です。
//省略
theme: {
extend: {
fontFamily: {
umbrella: ['Noto Serif JP', 'serif']
}
}
},
//省略
お好きな場所にて
<div class="font-umbrella">フォントが変わよ〜</div>
font-＋フォント名で変更されると思います。
おわり
縦書きの方法
CSSで書く場合は、https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode
このサイトなどを参考にして書くことになると思いますが、Tailwind CSSではこのクラスが用意されていないので自分で作成する必要があります。
方法１ 直接書く。
<div class="[writing-mode:vertical-rl]">
縦書きいいよね
</div>
直接書いてしまう方法。公式のカスタムスタイルについてのページ
Tailwind CSSは[]で囲めばTailwind CSSに用意されていない物でも使うことができます。
この方法の欠点としてはそのまま書いてしまうことになるので、長い場合は場所をとってしまいますし、何度も使用する場合は面倒です。
方法２ プラグインを利用する。
公式のプラグインについてのページ
公式に書いてあるように、tailwind.config.jsに記述します。
module.exports = {
content: [
//省略
],
theme: {
//省略
},
plugins: [
function({ addUtilities }) {
const newUtilities = {
'.vertical': {
writingMode: 'vertical-rl',
},
}
addUtilities(newUtilities)
},
require('daisyui'),
require('tailwindcss-hero-patterns'),
],
daisyui: {
//省略
},
}
複数のプラグインを利用している場合でもわかりやすいように全体を載せてありますが、大事な部分は以下の部分です。
function({ addUtilities }) {
const newUtilities = {
'.vertical': {
writingMode: 'vertical-rl',
},
}
addUtilities(newUtilities)
},
'.vertical'
この部分はHTMLで使用するクラス名になるので、自分で設定します。次に、中身を記述したら完了です。
次にHTMLに作成したクラスを実装します。
<div class="vertical">
縦書きいいよね
</div>
おわり