North Detail / ノースディテール

BLOG ブログ

ブログ
CATEGORY
TECH

カスタムデータ属性(data-*)の値をattrしてみる@css・js

カスタムデータ属性(data-*)を使用してゴニョゴニョした完成物

この棒グラフは弊社サイトへの ブラウザ別アクセス割合 です。
※モーションを見逃した方はお手数ですがリロードをお願いいたします

上記棒グラフの作成方法を、内容的には『棒グラフ自体の表示』『棒グラフ数値の表示』ついでなので『目盛り表示』について、ザックリと解説したいと思います。

まずベースとなる html 構造は下記になります。

<ol>
  <li>
    <dl>
      <dt>chrome</dt>
      <dd><p data-chart="63"></p></dd>
    </dl>
  </li>
      ・
      ・
      ・
</ol>

コンセプトは見ての通り【𝓣𝓗𝓔・𝓢𝓲𝓶𝓹𝓵𝓮】です。
棒グラフ部分をアニメーションさせたかったので、dd タグ内に p タグを入れ子にしていますが、本来なら下記のようにしたかったくらいです。
<dd data-chart="63"></dd>

この p タグ内に設定したカスタムデータ属性(data-*)を用いて『棒グラフ自体の表示』『棒グラフ数値の表示』を置換して行います。
本来であれば javascript を使用せず css のみで完結したかったのですが、今現在カスタムデータ属性(data-*)から css 内プロパティの値を、ゴニョゴニョすることが出来ないので『棒グラフ自体の表示』に関しては javascript にて css をDOM操作しております。
あくまでも私個人の予想ですが、近い将来必ず【カスタムデータ属性(data-*)から css 内プロパティの値をゴニョゴニョ】できるようになると思っております。

※SEO 的に考えれば pタグの中に普通に『63%』と書くべきですが…
今回はカスタムデータ属性(data-*)をゴニョるのがメインなのでスルーしてください

棒グラフ自体の表示

$("p").each(function(){
  chart = $(this).data("chart");
  $(this).css('width', chart + '%');
});

p タグ内に書かれた data-chart の値を、その p タグ自体の width としてDOM操作しております。
例:data-chart="50" なら、その p タグ自体の長さは 50%

あとは親要素の dd タグに、アニメーション表示は1秒間で、タイムラグは1秒を基準として、各リスト毎に0.75秒づつ増加するように設定しております。

@for $i from 0 to 5{
  li:nth-child(#{$i + 1}){
    dd{
      animation:chartBar 1s #{($i * .75) + 1}s 1 forwards;
    }
  }
}
@keyframes chartBar{
  0%{width:0;}
  100%{width:82.3333%;}
}

棒グラフ数値の表示

意外と知らない方が多いかと思いますが、css でも attr が使えます。
attr とは『アトリビュート(attribute)』 の略で、直訳すると『属性』ですが IT 用語的には主に『属性の値を取得する』的な意味合いで使用している気がします。
例えば title や href などの属性値を取得して疑似要素として表示したり、今回の棒グラフ数値のように、カスタムデータ属性(data-*)の値を取得して疑似要素として表示したりできます。

具体的なソースコードと表示例

カスタムデータ属性(data-*)の値を表示してみる(今回の棒グラフ数値表示例)

<p data-chart="63"></p>

p::after{
  content:attr(data-chart) "%";
}
実際の表示
63%

リンク先URLを表示してみる

<ul>
  <li><a href="https://www.smartvalue.ad.jp/">株式会社スマートバリュー</a></li>
  <li><a href="https://www.northdetail.co.jp">株式会社ノースディテール</a></li>
</ul>

a::after{
  content:"(URL:"attr(href)")";
  font-size:10px;
}
実際の表示

目盛り表示(オマケ)

ぶっちゃけ今回の記事内容からすると無関係な『目盛り表示』なのですが、地味に一番実装に悩み、時間をかけてしまったので『オマケ』として解説しておきます。
レスポンシブ(フルリキッド)対応する『棒グラフ表示エリア』を10等分する罫線を表示…
これって何気に難しくないですかね?
こんなことに悩むの私だけかしら…w

要素が多ければ疑似要素を使用すれば済む話ではありますが、今回のテーマは【𝓣𝓗𝓔・𝓢𝓲𝓶𝓹𝓵𝓮】なので、罫線を表示するためだけに要素を増やすのは本末転倒です。
で、最終的な実装は下記の通り『グラデーション背景』です。

li:{
  background:linear-gradient(90deg, #000 2%, #fff 3%);
  background-size:10%;
  background-position:0;
}

ベタ塗りの横グラデーションを、黒2%幅(これが罫線になるヤーツ):背景色98%幅で設置し、あとは background-size で分割、background-position で開始位置を調整し表示するというカラクリですね。

ちなみに今回の棒グラフ表示例では、各リスト毎に背景色を変えているので、実際には下記のような【まどろっこしく面倒臭そうなゴリゴリ系scss】的な書き方になっております。

@for $i from 0 to 5{
  li:nth-child(#{$i + 1}){
    background:linear-gradient(90deg,
    #000 2%, rgba(255 - ($i * 30),255 - ($i * 30),255 - ($i * 30),1) 3%);
    background-size:8.25%;
    background-position:1% 0;
    dt{
      background:rgba(255 - ($i * 30),255 - ($i * 30),255 - ($i * 30),1);
    }
  }
}

まとめ

先日、情報が古くなっていたりしたらアレなので、シレ~っと直しとこかなぁ~的なノリで、自身のブログ記事を読み返してみました。

本当に今更でアレなのですが…
確実に『本文』よりも『オマケ』にチカラが入っている傾向にありますね…良くも悪くも。
私自身はそんな気は1mmもないのですが 確信犯 に見えますね。

いっそのこと、開き直って、技術とかまるで関係ナッシングな
【超オマケ記事】の作成を検討中です( ̄^ ̄)ゞ

nanba
WRITER:nanba
高い技術力を誇る『NorthDetail』内では珍しい『チカラワザ系コーダー』
主な記事 一覧へ

一覧へ

IS 501383 / ISO 27001