skillup

技術ブログ

デザイン

data- HTML5のカスタムデータについて

投稿日:2018年3月28日 更新日:

HTML5のカスタムデータ属性について。

HTML5ではタグにdata-*とすることで任意の値を持たせることができます。

いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ

例として下記のような使用法が挙げられます。

・ hoverした時にツールチップを表示する

ホバーした時に表示されるツールチップを独自データ属性とCSSだけで作る方法

・ テーブルなどで行自体にリンクをさせる

少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする

ちなみに値を変更する時などは画面上とjQuery内部で値の持ち方が変わるようで基本$(セレクタ).attr()で取得するのが安全のようです(あるいは生のJavaScriptを使うなど)

[jQuery] data属性を動的に変更する場合の注意点

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

no image

WordPressのカリキュラムを考える

WordPressを触っていますが、ちょっと体系的に覚える必要がありそう。 結構長い間、触ってきましたが、体系立てて覚えていないのでいざこの処理は?ときかれると案外迷います。 例えば0から初心者に教え …