U-NEXT DESIGN

Setup

node環境が必要です

インストール

npm i

開発環境の起動

npm start

ヒント

色変数

global.css内でCSS変数を定義しています。color: var(--color-main); のように使用してください。透明度を変更したい場合は color: color-mix(in srgb, var(--color-main) 80%, transparent); のように使用できます。

budouX

文字組みライブラリのgoogle/budouxをグローバルにimportしています。以下のように記述すると、デバイス幅に応じて最適な位置で文字が改行されます。

<p>
    <budoux-ja>
        あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
        またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう
    </budoux-ja>
</p>

.lottieファイルの利用

Lottieアニメーションを利用できます。ただし.jsonではなく.lottie形式でご利用ください。

Tip

こちらから変換できます。

.lottieファイルは/public/lottie配下に保存してください。

<dotlottie-player autoplay loop src="/lottie/cat.lottie"></dotlottie-player>

こんな感じで使用できます。