WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。独自データ属性、カスタムデータ属性、data-role属性・・・と色々な呼ばれ方をする、html5で追加されたオリジナルの属性をつくれる素敵な仕組み!「href」はリンク先、「id」「class」は名前を付けられる、「src」はファイルの場所を指定する・・・オリジナルで属性を作って一体なんのためになるの??jQueryで値が取得できるのです。JSであれこれする時に、$(this)の親要素に隣接する〇〇要素の子要素の~とか、display:none;で必要な値を隠したり、本来必要のない属性を使ってみたり・・・なんてことはありませんか?それがたったひとつ?無限に作れる属性で解決できます。記述はとっても簡単です。data-cc=”123′′></div>data-〇〇=”値”このように〇〇の部分は自分で決めることができます。その値は全角もOK!→title属性をつけなくてもすみますね。先頭に#や.をつけてもOK!→クリックされたら$(this)の△△属性の値と#を結合して・・・なんてことが不要に!簡単に目的の要素のidやclassを指定ができ、記述がとても少なくすみますね。数値もOKです!→idやclassでは先頭に数字、もちろん数字だけなんてつけられないので、ぐっと幅が広がりますね。jQueryでの値の取得は簡単です。$(“#box”).attr(“data-aa”);これで取得できる値は「全角」ですね。便利な独自データ属性。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。関連記事javascriptの便利なライブラリについてオブジェクト(配列)や文字列の処理は自作の作成した場合、時間を要してしまします。そこで、これらの処理をおこなう際に便利なJavascriptライブラリを紹介します。その3:一目で印象に残るアニメーション背景を作成!web制作をされている方ならば、サイトを訪れてくれた人を少しでも長く引き留めたいと思われると思います。やって見てくれる人の興味をひけるのか。今からjQueryを使ってみようと思っている方必見。...レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。ブロック要素の高さを揃えるJavaScriptはいくつかあります。その中でも行ごとの高さを変えたい場合に便利な「fixHeight.js」をご紹介します。いうのはコーディングをする際によく使う手法ですよね。WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。