{"id":436,"date":"2025-03-15T14:40:32","date_gmt":"2025-03-15T05:40:32","guid":{"rendered":"https:\/\/torakappa-site.com\/?p=436"},"modified":"2026-02-23T16:07:50","modified_gmt":"2026-02-23T07:07:50","slug":"bem%e3%81%aemodifier%e3%82%92-data-%e5%b1%9e%e6%80%a7%e3%81%a7%e7%ae%a1%e7%90%86%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/torakappa-site.com\/?p=436","title":{"rendered":"BEM\u306eModifier\u3092 data- \u5c5e\u6027\u3067\u7ba1\u7406\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"\n

class\u304c\u3044\u3063\u3071\u3044\u3067\u30b3\u30fc\u30c9\u304c\u8aad\u307f\u306b\u304f\u3044<\/h2>\n\n\n\n

\u30dc\u30bf\u30f3\u306e\u57fa\u672c\u7684\u306a\u30b9\u30bf\u30a4\u30eb\u3092\u66f8\u3044\u3066\u3001Modifier\u3067\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308d\u3046\u3068\u601d\u3063\u3066\u3053\u3093\u306a\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

<a href="#" class="c-button c-button-small c-button--icon">\u30dc\u30bf\u30f3<\/a><\/code><\/pre><\/div>\n\n\n\n
.c-button {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  max-width: 350px;\n  padding: 10px 20px;\n  color: white;\n  text-align: center;\n  background-color: #065da3;\n\n  \/\/\u30b5\u30a4\u30ba\uff08\u5c0f\uff09\n  &--small {\n    max-width: 200px;\n  }\n\n  \/\/\u30a2\u30a4\u30b3\u30f3\u753b\u50cf\u4ed8\u304d\n  &--icon {\n    &::before {\n      position: absolute;\n      top: 50%;\n      right: 10px;\n      display: block;\n      font-family: "Font Awesome 5 Free";\n      font-weight: 900;\n      content: "\\f061";\n      transform: translateY(-50%);\n    }\n  }\n}<\/code><\/pre><\/div>\n\n\n\n
HTML\u306bclass\u304c\u3044\u3063\u3071\u3044\u3067\u8aad\u307f\u306b\u304f\u3044\uff01<\/strong><\/p>\n\n\n\n
\uff08\u3053\u308c\u3050\u3089\u3044\u306a\u3089\u3001\u6c17\u306b\u306a\u3089\u306a\u3044\u65b9\u304c\u307b\u3068\u3093\u3069\u3060\u3068\u601d\u3044\u307e\u3059\u304c\u2026\uff09<\/p>\n\n\n\n
\u9055\u3046\u66f8\u304d\u65b9\u306f\u306a\u3044\u304b\u8abf\u3079\u3066\u3044\u304f\u3046\u3061\u306b\u3001\u30ab\u30b9\u30bf\u30e0\u30c7\u30fc\u30bf\u5c5e\u6027\u3092\u4f7f\u3063\u305f\u65b9\u6cd5\u304c\u3042\u308b\u3053\u3068\u3092\u77e5\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\u30ab\u30b9\u30bf\u30e0\u30c7\u30fc\u30bf\u5c5e\u6027\u3092\u4f7f\u3063\u3066\u3001Modifier\u3092\u7ba1\u7406\u3059\u308b<\/h2>\n\n\n\n
\u30ab\u30b9\u30bf\u30e0\u30c7\u30fc\u30bf\u5c5e\u6027\u3092\u4f7f\u3063\u3066\u3001\u5148\u307b\u3069\u306e\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u63db\u3048\u307e\u3057\u305f\u3002class\u306e\u6570\u304cModifier\u306e\u6570\u3060\u3051\u5897\u3048\u306a\u3044\u306e\u3067\u3001\u7279\u306bHTML\u304c\u3059\u3063\u304d\u308a\u3057\u305f\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
<a href="#" class="c-button" data-size="small" data-icon="arrow">\u30dc\u30bf\u30f3<\/a><\/code><\/pre><\/div>\n\n\n\n
.c-button {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  max-width: 350px;\n  padding: 10px 20px;\n  color: white;\n  text-align: center;\n  background-color: #065da3;\n\n  \/\/ \u30b5\u30a4\u30ba\uff08\u5c0f\uff09\n  &[data-size="small"] {\n    max-width: 200px;\n  }\n\n  \/\/ \u30a2\u30a4\u30b3\u30f3\u753b\u50cf\u4ed8\u304d\n  &[data-icon="arrow"]::before {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    display: block;\n    font-family: "Font Awesome 5 Free";\n    font-weight: 900;\n    content: "\\f061";\n    transform: translateY(-50%);\n  }\n}\n<\/code><\/pre><\/div>\n\n\n\n
\u30ab\u30b9\u30bf\u30e0\u30c7\u30fc\u30bf\u5c5e\u6027\u3092\u4f7f\u3063\u305f\u30e1\u30ea\u30c3\u30c8<\/h2>\n\n\n\n
Modifier\u306e\u5f79\u5272\u3092\u30ab\u30b9\u30bf\u30e0\u30c7\u30fc\u30bf\u5c5e\u6027\u306b\u79fb\u3059\u3053\u3068\u306b\u3088\u308a\u3001class\u304c\u5897\u3048\u308b\u4e8b\u3092\u9632\u3050<\/strong><\/p>\n\n\n\n
\u30ab\u30b9\u30bf\u30e0\u30c7\u30fc\u30bf\u5c5e\u6027\u306e\u5f62\u5f0f\u304b\u3089\u3001\u3069\u306e\u8981\u7d20\u306b\u3069\u3093\u306a\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u304b\u304c\u5206\u304b\u308a\u3084\u3059\u3044<\/strong><\/p>\n\n\n\n
<!-- data-size="small" \u2192 \u30b5\u30a4\u30ba\u306b\u95a2\u3059\u308b\u5909\u66f4 -->\n<!-- data-icon="arrow" \u2192 \u30a2\u30a4\u30b3\u30f3\u306b\u95a2\u3059\u308b\u5909\u66f4 -->\n<a href="#" class="c-button" data-size="small" data-icon="arrow">\u30dc\u30bf\u30f3<\/a><\/code><\/pre><\/div>\n\n\n\n
\u4ed6\u306b\u3082\u30e1\u30ea\u30c3\u30c8\u306f\u3042\u308b\u306e\u3067\u3059\u304c\u3001\u30ab\u30b9\u30bf\u30e0\u30c7\u30fc\u30bf\u5c5e\u6027\u306e\u5f62\u5f0f\u304b\u3089\u3001\u8981\u7d20\u306b\u4e0e\u3048\u308b\u5f71\u97ff\u3092\u63a8\u6e2c\u3057\u3084\u3059\u3044\u306e\u304c\u826f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
class\u304c\u3044\u3063\u3071\u3044\u3067\u30b3\u30fc\u30c9\u304c\u8aad\u307f\u306b\u304f\u3044 \u30dc\u30bf\u30f3\u306e\u57fa\u672c\u7684\u306a\u30b9\u30bf\u30a4\u30eb\u3092\u66f8\u3044\u3066\u3001Modifier\u3067\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308d\u3046\u3068\u601d\u3063\u3066\u3053\u3093\u306a\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u307e\u3057\u305f\u3002 HTML\u306bclass\u304c\u3044\u3063\u3071\u3044\u3067\u8aad\u307f\u306b\u304f\u3044\uff01 \uff08\u3053\u308c\u3050\u3089\u3044\u306a\u3089\u3001\u6c17\u306b […]<\/p>\n","protected":false},"author":1,"featured_media":442,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[29],"class_list":["post-436","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding-blog","tag-css"],"_links":{"self":[{"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts\/436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=436"}],"version-history":[{"count":3,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts\/436\/revisions"}],"predecessor-version":[{"id":439,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/posts\/436\/revisions\/439"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=\/wp\/v2\/media\/442"}],"wp:attachment":[{"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/torakappa-site.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}