技術ブログ
投稿日：2018年3月28日 更新日：
HTML5のカスタムデータ属性について。
HTML5ではタグにdata-*とすることで任意の値を持たせることができます。
例として下記のような使用法が挙げられます。
・ hoverした時にツールチップを表示する
ホバーした時に表示されるツールチップを独自データ属性とCSSだけで作る方法
・ テーブルなどで行自体にリンクをさせる
ちなみに値を変更する時などは画面上とjQuery内部で値の持ち方が変わるようで基本$(セレクタ).attr()で取得するのが安全のようです(あるいは生のJavaScriptを使うなど)
執筆者：matsumoto
関連記事
携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …
フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど
通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-662094 …
画面系小ネタposition:sticky+datalist(プルダウン+自由入力)
画面系の小さい小ネタなど。 Contents1 position:sticky2 datalist(プルダウン+自由入力) position:sticky ヘッダーに関して画面をスクロールすると、付い …
主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …
UIまで手が回らないプログラマのための画像加工サービス＆ツール紹介など
本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …
2024/04/11
2024/03/24
2024/02/05
2024/01/20
2023/12/31