【メモ】タグに独自属性を設定してjQueryで取得する

独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP

独自データ属性は、名前空間に属さない属性で、その名前は文字列 “data-” で始まり、ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。 (中略) すべての HTML 要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。

使用例

Ippei Suzuki
これを取得するには、 関数data()を使うと便利です。
$('#userName').data('userId');

注意

data()は、もともとは要素にデータを付与しそれを取得するための関数で、HTMLのパースとは関係がありません。付与されたデータはjQueryのキャッシュデータとして保存されます。一方で属性を取得する関数attr()の方は、キャッシュは利用をせずHTMLを読みに行くので、この2つを同時に使うと混乱します。具体的には、atr()で更新したデータがdata()で取得出来ないなど。
$('#userName').data('userId'); //1234
$('#userName').attr('data-userId', '5678');
$('#userName').data('userId'); //1234 ← キャッシュを読み込む
$('#userName').attr('data-userId'); //5678 ← 属性を見る
その辺りは気をつけて上手いこと処理してやる必要があるようです。

参考

独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP jQueryのdata-*属性キャッシュ仕様と対策

続きを読む

Flickrの貼り付けコードがまた変わってた

Flickr Google Photos も始まって、いよいよオワコンのさらに一歩先へまったなしのFlickrですが、それでも一回アーカイブされた写真てのはなかなか動かせないもんで、今でもFlickrを使ってます。個人的には別にFlickrで十分なんですけど、あんまり不人気だとサービス終了するとか言い出しかねなくてびくびくしてます。まあそれはGoogleだって同じですけどね。

続きを読む

CSSで指定出来る色名

05_02.jpg CSSにおける色の指定はこれまですべて「#ff0000」形式で統一してきました。 理由は、

  • 「色名指定」では柔軟な設定が出来ない(一段階濃くとか)
  • ブラウザに解釈を任せたくない
で、特に設定の柔軟性については、コーディングしている統合環境の補完で「aqua」「black」「brue」などの17色しか表示されないのもそう考える理由の1つになっていました。でも、違うのね、もっとたくさん指定出来る色名あるのね、というのが今回の本題です。いまさらですが知りませんでした。 参考になるサイトはたとえばこちら。 CSS/HTML色見本 全部で140色もの色名が色見本・RGB値と共にリストアップされています。これを見て自分がよく使っていた色が「OrangeRed」とか「DarkRed」で指定出来るんだと解ってちょっと目鱗でした。自分程度の柔軟性なんて、既に設定されている範囲の中でしかなかったです。なんとまあ。 数字を細かく調整して柔軟に設定した色って、後で忘れちゃうことが結構あるんですよね……作業の効率を考えたら「色名」で設定する方のもありかなあと。特にCSSに不慣れな人が参画するプロジェクトにおいては、色を「色名」で指定すると見通しが良くなって良いのではないかなと思います。色コードやRGB値で表示される色を想像しろと言っても厳しいものがありますし。 そんなことを考えて、最近は、文字色や背景色をできる限り「色名」で指定するようにしています。

続きを読む

【作業メモ】 水曜どうでしょうのHTMLが変わった件への対応

水曜どうでしょうのオフィシャルサイトのデザインがクリスマスバージョンに変わっていますが、 それに合わせて?HTMLソースが若干、変更になりました。 いつぞやの変更では、本文がきっちりとdivでくくられて、 もう非常に取得しやすい感じになりまして、かなり安心しておったんですが、 ここへ来てtable多用&CSSって何?それ美味しいの?っていうソースに戻りまして、    _,._ んもー   ( ・ω・) って感じ。 まぁ、色々と事情はあるでしょうから仕方のないことなんですけどね。 ただ色とか絵とか変えるのってCSSで一発でいけると思うし、 そっちのが楽だと思うんだけどなーどんだけ手作りなんだろ。謎です。 以上、愚痴でしたヽ(´ー`)ノ

続きを読む

RSSを勝手に作る視点から見た、良いサイト。

RSSを配信してなかったり、配信されてるRSSが役立たずだったりしたときに、 自分が使う用にRSSを作ってみたりしてるわけですが。

『RSSを配信していないサイト』の例

『RSSが役立たずなサイト』の例

続きを読む

【メモ】 ラジオボタン/チェックボックスを文字列で選択する。

ラジオボタンとか、チェックボックスってありますよね。 こんなやつ。

好き 嫌い どうでもいい 連絡下さい
文字列をクリックすることでこれを選択するのってよく見掛けるけど、 アレどうやるんだろう…と思ってたんだけど、 もの凄く単純なことだったんですね…最近知りました。 …あれ、俺だけ? 妙に恥ずかしいので、恥ずかしまぎれにメモっとく。

続きを読む

フォントサイズの調整 – DOCTYPEの話。

あるサイトを作っていて、フォントサイズを、それまでのピクセル固定から、 相対的な設定に変更してみたのだけど。 IEで見ると、ある程度の大きさで見られるのに、 FireFox(ないしはGecko)でちぇっくすると、 豆粒みたいになって見にくくて仕方がない…ってことがあった。 理由がよく分からなかったので、しばし放置していたのだけど、 ふと思い立って調べてみたら、 『互換モード』と『標準モード』のお話だった。

続きを読む