投稿日：2020-12-08T22:20:07+09:00

CSSで限りなくゴールドに近づける

どうも7noteです。単色では再現が難しいゴールド。

単色でゴールドをやろうとしても・・・

単色でゴールドは結構難しいです。というか無理。

グラデーションでゴールドにする
div {
  background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}
シルバーなら・・・
div {
  background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);  
}
まとめ

ホームページの製作依頼を受けるときに、たまにゴールドを使いたいという要望が出たりするので、作り方は覚えておくといいかも。

参考
https://1-notes.com/css-text-metal-design/
https://encycolorpedia.jp/ffd700

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-08T18:00:36+09:00

使いやすい日付入力を考えて実験して実装して終えて

本記事は「DeNA Advent Calendar 2020」の9日目となります。

使いやすい日付入力を目指して取り組んだ開発過程と、そこで得た知見を紹介します。

手間のかかるUI

日付入力はもともとSP(スマートフォン)サイトで使っていましたが、PCサイトでも利用することになりました。
それが今回開発することになったきっかけです。

修正前は、input[type="date"] で実装しており、日付入力時にカレンダーUIが表示されていました。
カレンダーUIは入力に手間がかかるため、PCだけではなくSPも含めて見直すことにしました。

SP PC

Demo

Code

入力方法の選定

開発する前にどういうUIが日付入力として良いのかを考えました。
思いついたのが「テキスト入力」と「セレクトボックス」です。

「使いやすい＝早く入力できる」と考え、どちらがより早く入力できるかを実験することにしました。

キーボードの種類

SPでテキスト入力する場合はキーボードによって使いやすさが変わりそうです。
実験の前に、 type属性 を変えてキーボードを見比べてみました。

日付入力に必要なのは数字だけです。数字が一番入力しやすそうな type="tel" を今回選びました。(ソースコード的には少し気持ち悪いが)

type="text" type="number" type="tel"

Demo

テキスト入力 vs セレクトボックス

「テキスト入力」と「セレクトボックス」の入力時間を計測してみました。
すると、SPもPCも「テキスト入力」の方が入力時間が早いことが分かりました。

「使いやすい＝早く入力できる」なので、今回は「テキスト入力」で作ることにしました。

SPテキスト入力 SPセレクトボックス PCテキスト入力 PCセレクトボックス

6秒 11秒 5秒 8秒

Demo

ブラッシュアップ

日付入力のUIは「テキスト入力」に決めたので本格的な実装に移ります。
ここではブラッシュアップしていった過程を記載します。

全角数字での入力

ここまでの実装では半角数字しか入力できませんでした。
しかし、PCでは全角数字で入力する可能性もあります。

全角入力から半角入力に切り替えるにも時間を使うため、PC利用者のために全角数字の入力もできるようにしました。

修正前(半角数字に切り替えて入力) 修正後(全角数字のまま入力)

11秒 8秒

Demo | Full width numbers

Code

入力欄の移動をサポート

日付を入力していると、「年」から「月」へ、「月」から「日」へ、入力欄の移動に時間がかかっていそうでした。

試しに入力欄の移動を自動でおこなって計測したところ、SPもPCも入力時間を短縮することができました。

修正前 SP 修正後 SP 修正前 PC 修正後 PC

6秒 3秒 5秒 3秒

Demo | Automatically move focus

Code

SPキーボードの最適化

これまで type属性 で数字が入力しやすいキーボードを選択していましたが、inputmode属性 でブラウザのキーボードを選択できることを知り、試してみました。

type属性 vs inputmode属性

type="tel"指定時のキーボードと、inputmodeで数字が入力しやすそうなキーボードを並べてみました。すると、type="tel"よりinputmode="numeric"のキーボードの方が数字入力に適していることがわかりました。(ソースコード的にも少し幸せ)

type="tel" inputmode="tel" inputmode="numeric" inputmode="decimal"

Demo

inputmode属性の対応状況

気になるinputmode属性のブラウザの対応状況です。Can I use...によると少し赤が目立ちますが、主要なSPブラウザは対応しています。

また、WHATWGによると、inputmode属性をサポートしていない場合は、typeやpattern属性からキーボードを決定すると記載があるため、そこをサポートしておけば問題なさそうです。

念のため、inputmodeが対応していないSPのSafariを確認してみたところ許容できるキーボードとなっていました。もちろんPCブラウザでも問題ないことは確認しています。

SP Safari 12.1

Demo

Code

使いやすい日付入力

今回の開発を通して、利用者に使いやすい日付入力を提供するためには、下記のポイントをおさえることが大切だと学びました。

ポイント

・入力方式はテキスト入力にする
・ SPでは数字が入力しやすいキーボードを選択する
・ PC利用者のために全角数字でも入力できるようにする
・年の入力が終わったら月へ、月が終わったら日へ、フォーカスを自動で移動させる

完成

そして、完成したものがこちらです。

SP PC

3秒 3秒

Demo

Code

本記事が日付入力だけではなく、入力項目に対してどういう入力方法が適切なのかを考えたり、SPの場合はどの入力キーボードが適切なのかを見直すきっかけになれば幸いです。

最後に

この記事を読んで「面白かった」「学びがあった」と思っていただけた方、
よろしければ Twitter や facebook、はてなブックマークにてコメントをお願いします！
また DeNA 公式 Twitter アカウント @DeNAxTech では、
Blog記事だけでなく色々な勉強会での登壇資料も発信してます。ぜひフォローして下さい！

Follow @DeNAxTech

SPテキスト入力	SPセレクトボックス	PCテキスト入力	PCセレクトボックス

6秒	11秒	5秒	8秒

修正前(半角数字に切り替えて入力)	修正後(全角数字のまま入力)

11秒	8秒

修正前 SP	修正後 SP	修正前 PC	修正後 PC

6秒	3秒	5秒	3秒

SP	PC

3秒	3秒

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-08T15:21:25+09:00

今日から始める負担にならないWAI-ARIA

WAI-ARIAとはなにか

「Web Accessibility Initiative - Accessible Rich Internet Applications」の略で、「ウェイ・アリア」と読みます。
WAI-ARIAをつかえば、HTMLだけでは不足しているセマンティクス（意味）を属性で補完することができ、支援技術（スクリーンリーダーなど）を通じて、障害をもつ人に対し適切な情報を伝えられるようになります。

WAI-ARIAの注意点

あくまでも「必要な場合のみ使用する」技術です。
HTML5タグのセマンティクスで解決できるのであれば、HTMLで対応するのが基本です。

WAI-ARIAのつかいかた

決められた「属性」をHTMLタグに追記して使用します。
以下、すぐにでも導入が可能で効果が期待できそうな項目を挙げてみました。
（その他、詳細については参考サイトをご覧ください。）

ランドマーク

role="**"

要素の「役割」を定義します。
たとえば「フレームワークの仕様でdivタグしか使えない」といったような、適切なHTMLが使用できないときにも有効です。
まずは大きなレイアウト要素から使い始めてみるのがわかりやすいかもしれません。
設定するとスクリーンリーダーで「ナビゲーションランドマークサンプル」と読み上げられます（※<nav>サンプル</nav>でも同様の音声になります）。
index.html

<div role="navigation">サンプル</div>
キーボードのアクセシビリティ

tabindex="**"

tabindex属性を使えば、aタグやbuttonタグなどのようなキーボード操作（タブキーによるフォーカス移動など）を可能にします。
属性値に0を指定すると、文書のソース内の順序でフォーカスを持たせることができます。
index.html
<div class="btn" tabindex="0">ボタン</div>
文字列の定義

aria-label="**"

要素に「ラベル付けする文字列」を定義できます。
インラインSVGにはalt属性がないのでaltの代わりとして利用できます。
index.html
<button aria-label="閉じる" class="js_btn">X</button>
<svg role="img" aria-label="画像の説明">...</svg>
UIコントロール

aria-expanded="**"
aria-controls="**"
aria-hidden="**"
aria-selected="**"
aria-checked="**"
など

クリックやマウスオーバーで開閉するようなUI操作時に使用します。
JavaScriptによりユーザー操作にあわせてaria属性値を適宜変更します。
「CSSと密結合」させることにより、挙動や状態が理解しやすいコードになります。
index.html

<button aria-expanded="false" aria-controls="drawer">ボタン</button>
<div id="drawer" aria-hidden="true" class="drawer">ドロワー</div>
index.html

<button aria-expanded="true" aria-controls="drawer">ボタン</button>
<div id="drawer" aria-hidden="false" class="drawer">ドロワー</div>
style.css
.drawer[aria-hidden="true"] {
  display: none;
}
実装効率化の一例

jQueryのtoggleClassのようなメソッドを用意しておくと、コードが簡略化しWAI-ARIAによる実装コストが下がります。

See the Pen jQuery Plugin to toggle WAI-ARIA . by p_toro (@p_toro) on CodePen.

WAI-ARIAのまとめ

支援技術（スクリーンリーダーなど）を通じて、障害をもつ人に対し適切な情報を伝えられる。

必要な場合のみ使用する。基本的にはHTML5のタグで対応。HTMLで対応するのが基本。

つかいどころを理解し効率よく利用することで、それほど作業工数を上げることなく導入が可能。

それでは、WAI-ARIAを活用した良いアクセシビリティライフを！

参考サイト

WAI-ARIAの基本 - ウェブ開発を学ぶ | MDN

Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳

WAI-ARIAを活用したフロントエンド実装 | 第1回 role属性、aria属性の基礎知識 | CodeGrid

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-08T01:20:23+09:00

HTMLでブラウザにGoogleMapを表示させる

はじめに

本記事は駆け出しエンジニアの第一歩！AdventCalendar2020 ８日目の記事です。
プログラミングを始めて３ヶ月の初学者ですが、アウトプットの練習も兼ねて、Qiita初投稿します。

HTMLでGoogleMapを表示させる

①まずはブラウザに表示させたい場所をGoogleMapで検索します

②施設の詳細情報が表示されるので検索フォームの左側にあるハンバーガーメニューをクリックします

③「地図を共有または埋め込む」をクリックします

④画面中央に共有が出てくる為、「地図を埋め込む」をクリックします

⑤「HTMLをコピー」をクリックし、コードをコピーします

※地図のサイズはコード左側の『中』をクリックすると「小」「中」「大」「カスタムサイズ」から変更できます

⑥コピーしたコードをHTMLファイルに貼り付け、保存します

今回は「大」「中」「小」3つのサイズを貼ってみました

⑦ブラウザで確認すると地図が表示されます

最後に

今回の記事はつい最近聞いたことを参考に書きました。
まだ難しいことは書けないですが、今後も少しずつアウトプットをしていきたいと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-08T01:11:53+09:00

【メモ】backgroundの使い方

background

背景(画像)は以下の設定で行う
sample.html.erb
<body>
  <div class="top_wallpaper">
|
|
|
sample.css
.top_wallpaper{
  background-image: url(/wallpaper-new.jpg);
}
【CSS】
・該当するクラスに対し"background-image"を使用

書き方

・background-image: url(/xxx.yy)
　・/:フォルダの場所("/"のみの場合publicフォルダが自動的に適用)
　・xxx:ファイル名
　・yy:拡張子名

　 Tweet
Qiitaで続きを読む

投稿日：2020-12-08T00:37:10+09:00

マジミラ2020プロコンで使用したものまとめ2（文字の装飾）

概要

相生葵の Advent Calendar 2020 8日目の記事です。

初音ミク「マジカルミライ 2020」プログラミング・コンテストに参加したので使用したもののまとめ記事です。
再生はこちらでできます。
コードはこちらにあります。

目次

構造

配置

文字色

名詞から星を出す

名詞の回転と文字の拡大

1. 構造

構造は以下のようにしました。
index.html
  <body>
    <div id="contents">
      <div id="text">
        <div> 
          <div> 
            <span> 
            </span> 
          </div>
        </div>
      </div>
    </div>
  </body>
「id="text"」の div要素の下に歌詞を作成するようにしました。
phrase（フレーズ）ごと、word（単語）ごと、一文字（chara）ごとにそれぞれ装飾や動きを入れられるように入れ子にしています。

2. 配置

歌詞のテキストが中央にくる＋中央ぞろえ＋単語で改行しないように調整しました。
index.css
#text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}

/*phrase要素*/
#text > div {
    text-align: center;
}

/*word要素*/
#text > div > div {
    display: inline-block;
}
#text

ここでtextのdiv要素が画面の中央にくるように調整しています。

要素設定値意図

position absolute 他の要素によって位置が変わらないようにする

top 50% id="text"のdiv要素を上から50%の位置を起点にする

left 50% id="text"のdiv要素を左から50%の位置を起点にする

transform translateY(-50%) div要素の縦幅の半分分上にする

translateX(-50%) div要素の縦幅の半分分左にする

図解では、以下のページが分かりやすかったです。
CSSで要素を上下や左右から中央寄せする7つの方法の「7.transform」というところ

参考

CSSで要素を上下や左右から中央寄せする7つの方法

#text > div /*phrase要素*/

ここでテキスト（実際にはword要素のdiv）が中央ぞろえになるようにしています。
「text-align: center」の機能そのままです。

#text > div > div /*word要素*/

ここでは、div要素が自動で改行されてしまうので word（単語）ごとに改行されないようにword（単語）のdiv要素をブロック要素にしています。
「display: inline-block」の機能そのままです。

2. 文字色

文字の色については、基本的には色の指定と縁取りをしているだけです。
TextAliveAPIで品詞が判別できたので、名詞の場合は色を少し変えるようにしました。
index.css
body{
    color:#00ced1;
}

span{
    text-shadow: 
    2px  2px 1px #003366,
   -2px  2px 1px #003366,
    2px -2px 1px #003366,
   -2px -2px 1px #003366,
    2px  0px 1px #003366,
    0px  2px 1px #003366,
   -2px  0px 1px #003366,
    0px -2px 1px #003366;  
}

.noun_text {
    color: #40e0d0;
}
品詞は単語ごとなので、word要素のdivにつけるようにしています。
index.js
let isNoun = word.pos === "N"; //名詞かどうか
if(isNoun){
  wordDiv.classList.add("noun_text");
}
bodyのタイプセレクタよりも「noun_text」のclassセレクタの方が優先されるので、名詞の色は「noun_text」で指定した色になります。

3. 名詞から星を出す

星のエフェクト用のクラスを用意して、名詞の場合はクラスをつけるようにしました。
index.css
.text_particle {
    position: absolute;
    left: 25%;
    color: #e6b422;
    text-shadow: none;
}

.text_particle_anim_0 {
    animation: textParticle 0.5s ease-out forwards;
}

.text_particle_anim_45 {
    animation: textParticle45 0.5s ease-out forwards;
}

.text_particle_anim_225 {
    animation: textParticle225 0.5s ease-out forwards;
}

@keyframes textParticle {
    0% {
        opacity: 0;
        font-size: 0px;
        transform: translate(0, 0%)
    }
    20% {
        opacity: 0.8;
        font-size: 30px;
        transform: translate(0, -20%)
    }
    100% {
        opacity: 0;
        font-size: 40px;
        transform: translate(0, -100%)
    }
}

@keyframes textParticle45 {
    0% {
        opacity: 0;
        font-size: 0px;
        transform: translate(0, 0%)
    }
    20% {
        opacity: 0.8;
        font-size: 30px;
        transform: translate(-20%, -20%)
    }
    100% {
        opacity: 0;
        font-size: 40px;
        transform: translate(-100%, -100%)
    }
}

@keyframes textParticle225 {
    0% {
        opacity: 0;
        font-size: 0px;
        transform: translate(0, 0%)
    }
    20% {
        opacity: 0.8;
        font-size: 30px;
        transform: translate(20%, 20%)
    }
    100% {
        opacity: 0;
        font-size: 40px;
        transform: translate(100%, 100%)
    }
}
index.js
let isNoun = word.pos === "N"; //名詞かどうか
if(isNoun){
  setParticle(wordDiv, 0);
  setParticle(wordDiv, 45);
  setParticle(wordDiv, 225);
}

const setParticle = (wordDiv, animNum) =>{
  const span = document.createElement("span");
  span.innerHTML = "★";
  span.classList.add('text_particle');
  let className = 'text_particle_anim_' + animNum;
  span.classList.add(className);
  wordDiv.appendChild(span);
}
エフェクトのspan要素の位置

wordのdiv要素直下に入れているので以下のようになります。
  <body>
    <div id="contents">
      <div id="text">
        <div> 
          <div> 
            
            <span>み</span>
            <span>く</span>
            <span>さ</span>
            <span>ん</span>
            <span class="text_particle text_particle_anim_0">★</span>
            <span class="text_particle text_particle_anim_45">★</span>
            <span class="text_particle text_particle_anim_225">★</span>
          </div>
        </div>
      </div>
    </div>
  </body>
cssの共通要素

アニメーションは3種類用意しました。
3種類共通になるものを「text_particle」クラスに定義しています。
.text_particle {
    position: absolute;
    left: 25%;
    color: #e6b422;
    text-shadow: none;
}
各パラメータについては以下です。

要素設定値意図

position absolute 他の要素によって位置が変わらないようにする

left 25% 単語の半分の位置にくるようにする

color #e6b422 黄色で上書き

text-shadow none 縁取りなしで上書き

left:25%について

エフェクトのspan要素の位置を見るとわかるように星の位置は単語要素の最後にあります。
そのまま表示すると「みくさん★」になります。
（absoluteなので、「み」に重なってもよさそうですが次の文字の位置に出ていました）
そのため、leftで位置を調節しています。

25%になったのは、調節していったら25%が単語の中央にくる位置だったからです。
「みくさん★」の位置にあるときの、「★」の位置は「left:100%」の位置で「left:0%」が「み」の位置でした。
単語の中央の「く」と「さ」の間にもっていきたいので、37%くらいの位置が中央になりそうですが謎です。

cssのアニメーション要素

3種類ありますが、値を入れ替えただけのものなので一つだけ見ます。
.text_particle_anim_0 {
    animation: textParticle 0.5s ease-out forwards;
}

@keyframes textParticle {
    0% {
        opacity: 0;
        font-size: 0px;
        transform: translate(0, 0%)
    }
    20% {
        opacity: 0.8;
        font-size: 30px;
        transform: translate(0, -20%)
    }
    100% {
        opacity: 0;
        font-size: 40px;
        transform: translate(0, -100%)
    }
}
各パラメータについては以下です。

text_particle_anim_0

要素意図

textParticle 「textParticle」アニメーションを指定

0.5s 時間を0.5秒で指定

ease-out イージングのease-outを指定

forwards 終了時点の効果をそのままにする

keyframes textParticle

要素 0% 20% 100% 意図

opacity 0 0.8 0 初めは透明で、早めに濃くなり、その後また薄くなっていく

font-size 0px 30px 40px 初めは見えず、早めに30pxになり、その後40pxまで徐々に大きくなる

transform translate(0, 0%) translate(0, -20%) translate(0, -100%) 初めは初期の位置で、-20%の位置まではサッと上昇し、その後は少しずつ上にいく

設定値は値を変えながら再生して調節しているので感覚です。
残りの2つのアニメーションは「transform」を変更して、星が移動する方向を変えています。

js
let isNoun = word.pos === "N"; //名詞かどうか
if(isNoun){
  setParticle(wordDiv, 0);
  setParticle(wordDiv, 45);
  setParticle(wordDiv, 225);
}
名詞であれば、パーティクルを作成するようにしています。
1つの単語から3つのパーティクルを出すので、3回パーティクルを作成するメソッドを呼び出しています。
const setParticle = (wordDiv, animNum) =>{
  const span = document.createElement("span");
  span.innerHTML = "★";
  span.classList.add('text_particle');
  let className = 'text_particle_anim_' + animNum;
  span.classList.add(className);
  wordDiv.appendChild(span);
}
このメソッドでは、星のパーティクルオブジェクトの作成を行っています。
「wordDiv」と「animNum」を引数にして、wordのdivとアニメーションの指定を外部から指定できるようにしました。

参考

CSS Particle Effects

4. 名詞の回転と文字の拡大
#text > div > div {
    animation: showLyrics 0.1s ease-out forwards, moveLyrics 100s infinite linear;
}

@keyframes showLyrics {
    0% {
      font-size: 0px;
    }
    100% {
      font-size: 50px;
    }   
}

@keyframes moveLyrics {
    0% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(180deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}
word要素のdivにアニメーションを指定しています。
ここでは、「showLyrics」と「moveLyrics」の2つを設定しています。

各パラメータについては以下の通りです。

showLyrics

文字サイズを0～50pxにだんだん大きくしています。
アニメーションの時間は「0.1」秒と短くして、はじけるような動作を意図しました。

moveLyrics

文字の回転をしています。
一定の速度で0度～360度まで動きます。
時間は「100」秒にし、ゆっくり回転するようにしました。

要素	設定値	意図
position	absolute	他の要素によって位置が変わらないようにする
top	50%	id="text"のdiv要素を上から50%の位置を起点にする
left	50%	id="text"のdiv要素を左から50%の位置を起点にする
transform	translateY(-50%)	div要素の縦幅の半分分上にする
	translateX(-50%)	div要素の縦幅の半分分左にする

要素	設定値	意図
position	absolute	他の要素によって位置が変わらないようにする
left	25%	単語の半分の位置にくるようにする
color	#e6b422	黄色で上書き
text-shadow	none	縁取りなしで上書き

要素	意図
textParticle	「textParticle」アニメーションを指定
0.5s	時間を0.5秒で指定
ease-out	イージングのease-outを指定
forwards	終了時点の効果をそのままにする

要素	0%	20%	100%	意図
opacity	0	0.8	0	初めは透明で、早めに濃くなり、その後また薄くなっていく
font-size	0px	30px	40px	初めは見えず、早めに30pxになり、その後40pxまで徐々に大きくなる
transform	translate(0, 0%)	translate(0, -20%)	translate(0, -100%)	初めは初期の位置で、-20%の位置まではサッと上昇し、その後は少しずつ上にいく

　 Tweet
Qiitaで続きを読む

20201208のHTMLに関する記事は6件です。

CSSで限りなくゴールドに近づける

どうも7noteです。単色では再現が難しいゴールド。

グラデーションでゴールドにする

シルバーなら・・・

まとめ

使いやすい日付入力を考えて実験して実装して終えて

手間のかかるUI

入力方法の選定

キーボードの種類

テキスト入力 vs セレクトボックス

ブラッシュアップ

全角数字での入力

入力欄の移動をサポート

SPキーボードの最適化

type属性 vs inputmode属性

inputmode属性の対応状況

使いやすい日付入力

ポイント

完成

最後に

今日から始める負担にならないWAI-ARIA

WAI-ARIAとはなにか

WAI-ARIAの注意点

WAI-ARIAのつかいかた

ランドマーク

キーボードのアクセシビリティ

文字列の定義

UIコントロール

実装効率化の一例

WAI-ARIAのまとめ

参考サイト

HTMLでブラウザにGoogleMapを表示させる

はじめに

HTMLでGoogleMapを表示させる

①まずはブラウザに表示させたい場所をGoogleMapで検索します

②施設の詳細情報が表示されるので検索フォームの左側にあるハンバーガーメニューをクリックします

③「地図を共有または埋め込む」をクリックします

④画面中央に共有が出てくる為、「地図を埋め込む」をクリックします

⑤「HTMLをコピー」をクリックし、コードをコピーします

※地図のサイズはコード左側の『中』をクリックすると「小」「中」「大」「カスタムサイズ」から変更できます

⑥コピーしたコードをHTMLファイルに貼り付け、保存します

今回は「大」「中」「小」3つのサイズを貼ってみました

⑦ブラウザで確認すると地図が表示されます

最後に

【メモ】backgroundの使い方

background

書き方

マジミラ2020プロコンで使用したものまとめ2（文字の装飾）

概要

目次

1. 構造

2. 配置

#text

参考

#text > div /*phrase要素*/

#text > div > div /*word要素*/

2. 文字色

3. 名詞から星を出す

エフェクトのspan要素の位置

cssの共通要素

left:25%について

cssのアニメーション要素

text_particle_anim_0

keyframes textParticle

js

参考

4. 名詞の回転と文字の拡大

showLyrics

moveLyrics

日付別

タグ一覧

#text > div /phrase要素/

#text > div > div /word要素/