# data 属性を使って CSS を当てる

既存のプロジェクトで、JavaScript を使って、 グラフと同時に関連するテキストを表示していました。

# SEO 対策

問題なく動いていたのですが、 Google のクローラーが JavaScript によって、 生成された Webページ を正常にロードできていないかもしれない ということを知りました。

そのままにしておくと SEO 的には良くないので、 JavaScript で生成していたテキストを サーバーサイドレンダリングすることにしました。

# 実装

グラフ描画の実装では、 data属性 を渡して JavaScript で処理を行っていました。

そこで、テキスト部分だけを JavaScript を使わずにグラフの描画時に利用していた data属性 を用いることにしました。

具体的な実装は、以下のようになりました。

<!-- sample.vue -->

<template lang="pug">
.sample
  .sample-text(data-size="12") 12pxのフォント
  .sample-text(data-size="18") 18pxのフォント
  .sample-text(data-size="36") 36pxのフォント
  .sample-text(data-size="15") 15pxのフォント
  .sample-text(data-size="8") 8pxのフォント
</template>

<style lang="scss" scoped>
.sample {
  padding: 30px 0;
  color: #ffffff;
  text-align: center;
  background: #2c3e50;

  $font-sizes: 8, 12, 15, 18, 36;

  @each $size in $font-sizes {
    &-text[data-size="#{$size}"] {
      font-size: #{$size}px;
      margin-bottom: #{$size / 2}px;
    }
  }
}
</style>

上記のコンポーネントを呼ぶと、下のようになります。

12pxのフォント
18pxのフォント
36pxのフォント
15pxのフォント
8pxのフォント

他にもっと良い書き方があると思うので、 分かり次第修正します。

# 参考