skillup

技術ブログ

デザイン

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

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

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

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

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

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

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

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

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

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

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

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

-デザイン
-

執筆者:


comment

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

関連記事

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …

no image

キャッチ画像の扱いについて

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …

no image

ドロップダウンリスト

本日はヘッダーメニューとかで見られるドロップダウンリストについて。 bootstrapを使った方法は下記に。 http://skill-up-engineering.com/?p=1157 通常のHT …

no image

PDFテンプレートの活用

PDFのテンプレートの活用について。 PDFを出力するプログラムはいろいろありますが、今回はすでにあるPDFをテンプレート化できるライブラリについて。 Contents1 FPDI2 ソース3 参考リ …

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …