データ属性の使いどころ

投稿日 2023年6月6日
更新日 2023年11月4日
著者くまだ
カテゴリー Web制作

どうも、くまだです。

データ属性の活用についてのメモ。

データ属性とは

データ属性とは下記のように、data-○○と記述するとdata属性として設定できます。

<h2 class="p-title" data-en="about">〇×について</h2>

データ属性でcontentの内容を適用

例えばセクションタイトルのサブタイトルをデータ属性で切り替え。

  <h2 class="p-title" data-en="about">〇×について</h2>
  <h2 class="p-title" data-en="service">サービス</h2>

.p-title {
  position: relative;
  font-size: 20px;
  display: block;
  text-align: center;
  z-index: 1;

  margin-top: 40px;
}

.p-title::before{
  z-index: -1;
  position: absolute;
  content: attr(data-en);
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: skyblue;
  font-size: 40px;
  display: block;
  text-transform: uppercase;

}

疑似要素の部分で、content: attr(data-en); の部分でデータ属性を指定しています。HTML側のデータ属性を書き換えればいいので、CSS側の修正は不要になります。

データ属性でスタイルを適用

スタイルの指定をクラスでやることはあると思いますが、データ属性でもスタイル指定できます。

  <section class="p-section" data-bg="orange">
    <h2 class="p-title" data-en="about">〇×について</h2>

  </section>
  <section class="p-section" data-bg="green">
    <h2 class="p-title" data-en="service">サービス</h2>

  </section>

.p-title {
  position: relative;
  font-size: 20px;
  display: block;
  text-align: center;
  z-index: 1;


  margin-top: 40px;
}

.p-title::before{
  z-index: -1;
  position: absolute;
  content: attr(data-en);
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: skyblue;
  font-size: 40px;
  display: block;
  text-transform: uppercase;

}

.p-section {
  padding: 40px;
  height: 200px;

}

.p-section[data-bg="orange"] {
  background: rgb(238, 192, 106);
}
.p-section[data-bg="green"] {
  background: rgb(223, 255, 174);
}

データ属性だと既存のクラス名とかぶらないのがメリット。

データ属性で状態切り替え

JavaScriptでデータ属性の状態を切り替えてハンバーガーメニューの開閉表示。

  <div class="l-container">
    <header class="l-header p-header">
      <div class="p-header__inner">

        <h1 class="p-header__title">
          <a href="">ロゴ</a>
        </h1>
        <div class="p-header__hamburger">
          <button class="c-hamburger" data-open="">
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
        <nav class="p-header__nav p-nav" data-open="">
          <div class="p-nav__inner">
            <ul class="p-nav__list">
              <li class="p-nav__item">
                <a href="#" class="p-nav__link">メニュー</a>
              </li>
              <li class="p-nav__item">
                <a href="#" class="p-nav__link">メニュー</a>
              </li>
              <li class="p-nav__item">
                <a href="#" class="p-nav__link">メニュー</a>
              </li>
              <li class="p-nav__item">
                <a href="#" class="p-nav__link">メニュー</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>
    <main>
      メインコンテンツ
    </main>

  </div>


 ul,li {
  list-style: none;
}

p {
  margin :0;
}


a {
  text-decoration: none;
}

main {
  padding-top: 72px;
  background: skyblue;
  height: 1200px;
}

.l-header {
  display: block;
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 72px;
  background: #fff;
}


.c-hamburger {
  position: relative;
  width: inherit;
  height: inherit;
  margin: 0;
  border: 1px solid lightblue;
  background: lightblue;
  cursor: pointer;
}


.c-hamburger span {
  display: block;
  position: relative;
  left: 50%;
  width: 30px;
  height: 2px;
  transform: translateX(-50%);
  background: #fff;
  transition: all 0.4s;
}


.c-hamburger span:nth-of-type(1) {
  top: -4px;
}


.c-hamburger span:nth-of-type(2) {
  top: 1px;


}


.c-hamburger span:nth-of-type(3) {
  top: 6px;


}


.c-hamburger .c-hamburger__text {
  display: block;
  top: 12px;
  background: transparent;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}


.c-hamburger[data-open="true"] span:nth-of-type(1) {
  top: 0;
  transform: translateX(-50%) rotate(225deg);
}


.c-hamburger[data-open="true"] span:nth-of-type(2) {
  opacity: 0;
}


.c-hamburger[data-open="true"] span:nth-of-type(3) {
  top: -4px;
  transform: translateX(-50%) rotate(-225deg);
}

.p-header__nav {
  display: flex;
  z-index: 10;
  position: absolute;
  top: 0;
  right: -100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: transparent;
  font-weight: 700;
  opacity: 0;
  transition: 0.6s;
}


@media screen and (min-width:768px) {
  .p-header__nav {
    position: static;
    height: 100%;
    opacity: initial;
    align-items: flex-end;
  }
}


.p-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
  padding: 13px 20px;
}


.p-header__title {
  width: 100%;
  max-width: 120px;
  height: 48px;
  background: lightgray;
}


.p-header__title a {
  display: block;
  width: 100%;
  height: auto;
}


.p-header__title a img {
  height: 100%;
}


.p-header__hamburger {
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  width: 95px;
  height: 100%;
}


@media screen and (min-width:768px) {
  .p-header__hamburger {
    display: none;
  }
}


.p-header__nav[data-open="true"] {
  position: fixed;
  top: 0;
  right: 0;
  background: lightblue;
  opacity: 1;
  transition: 0.6s;
}

.p-nav {
  padding-top: 72px;
  padding-bottom: 72px;
}
@media screen and (min-width:768px) {
  .p-nav {
    padding-top: 16px;
    padding-bottom: 16px
  }
}
.p-nav__list {
  display: block;
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  background: lightblue;

}

@media screen and (min-width:768px) {
  .p-nav__list {
    display: flex;
    background: #fff;
    padding-right: 0;

  }
}

.p-nav__item {
  position: relative;
  width: 100%;
}

.p-nav__link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px;
  text-align: center;
}

document.addEventListener("DOMContentLoaded", function () {
    const hamburger = document.querySelector('.c-hamburger');
    const nav = document.querySelector('.p-header__nav');

    hamburger.addEventListener('click', function () {
        if (hamburger.getAttribute('data-open') === 'true') {
            hamburger.removeAttribute('data-open');
            nav.removeAttribute('data-open');
        } else {
            hamburger.setAttribute('data-open', 'true');
            nav.setAttribute('data-open', 'true');
        }
    });
});

getAttribute()はでデータ属性を取得、removeAttribute()はでデータ属性の削除、setAttribute()はでデータ属性の設定です。

if文で初期化のために最初にデータ属性を削除し、elseでデータ属性をtrueでセット。あとはCSSでデータ属性がtrueのときハンバーガーメニューが開くように調整すればいいです。

      if (hamburger.getAttribute('data-open') === 'true') {
            hamburger.removeAttribute('data-open');
            nav.removeAttribute('data-open');
        } else {
            hamburger.setAttribute('data-open', 'true');
            nav.setAttribute('data-open', 'true');
        }

この他にもJavaScriptでデータ属性を取得して利用したりできますが、そちらはネタがないので割愛。

ここまで読んでくださりありがとうございました。

この記事を書いた人

くまだ

記事一覧

ウェブサイト

2024年4月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30