imgタグにdata要素を入れるだけでfigureタグで囲みキャプションを追加してみる

本来figureタグは、本文中の参照図表などにつけるタグなのですが、今回はわかりやすいようにfigureを使っています。別にdivでブロックを作ってidやclassで代用しても良いと思います。

やりたいこととしては、今までのimgタグにキャプションとなる文字を入れて画像に重ねて表示しようということです。この時、data-xxxxとして、xxxxの内容で色を分けたりできないだろうか?と言う事をやっています。

例を見てもらえればわかるように、画像のサイズが異なっているのにも対応しています。とりあえず見た目的には画像のサイズを合わせるほうが良いのですが、仮にサイズが違う場合はどうだろうと言う内容も含んでます。

html

htmlはこのようになっています。本来であれば、

で画像を表示するわけですが、元々そうなっているところに、data-xxxを入れているだけです。サイズの指定はしていません。つまりは、画像のオリジナルサイズのままということです。

jQuery

jQueryで行っていることは、imgのサイズを調べてfigureタグで囲こみ、imgの下にキャプション用のブロックを挿入するということをやっています。この時、もしdata-xxxがない場合はキャプションはもちろん表示されません。表示されないだけでfigureでは囲まれます。
このfigureのタグを何かしらのブロックで代用すれば色々変更することもできます。

この部分では、idがtestのブロックの中で、imgタグを見つけると言う事をしています。で、画像それぞれに対してeachで処理を行います。次に、

この部分は、data-xxxがundefinedあるいは、falseでない場合、と言う感じで使います。つまり、imgタグにdata-xxxと記載されていない場合は処理されません。
わかりやすいようにひとつずつ条件式を書いていますが、例えば別で関数を作って、配列にした条件をその関数に送って判別し返ってきた値で条件を判別しても良いと思います。

ここでは、wrapつまり、ラップする=囲むと言うことで、_imgをfigureタグで囲むと言う意味合いになります。では_imgはなんでしょうかと言うと、その前の文で、

という表記をしています。これは、eachでimgタグを探した時、imgタグには識別する何かがあるわけではないですから、順番の回ってきた該当する要素を表すために$(this)と言うのに代入しているわけです。中身は、それぞれのimgタグとその中身になります。console.logを入れてあるのでコメントアウトを消して、各ブラウザのconsoleから中身を見て確かめて下さい。

この部分では、画像の横幅と縦幅を調べて、画像を囲んだfigureタグにサイズやらをcssで追加しています。画像のサイズとfigureタグのサイズが同じになり、後で追加するキャプションが画像のサイズとリンクするというわけです。

この部分は、キャプションの部分になります。imgタグの中にdata-xxxがあった時、imgタグの下にdivでブロックを作り、classを指定します。更にその中身には、imgタグのdata-xxxで指定した文字が入ることになります。

ここで、dataの扱いについてですが、jQueryでdata-xxxの内容を拾いたい時は、

こんな感じで拾えます。ハイフンの後が識別できるようになっているわけです。なので、もしdata-akbであった場合は、

で判別できるというわけです。

背景の色だけを変えた.test2を用意して、

と言う感じにすると、data-skeの場合は、.testと.test2が適用されるという感じになります。

css

まずキャプションの部分のcssは上記のようになっています。ここで重要なのは、figureの中にimgとdiv.testがあって、figureとimgのサイズは同じです。width:100%で横幅をfigureの幅いっぱいにして、bottom:0にしているわけですから画像の下にキャプションの帯が表示されるのはイメージしてもらえると思います。

ただし、ここには注意点がありまして、width:100%の時にpaddingを設定するとパディングの設定分、widthがはみ出ることがあるんです。widthがpxだと大丈夫かも知れませんが%の場合は、おそらくパディングの数値を維持するために横幅が伸びるんだろうと思うのですが、そんな時は、box-sizing:border-boxが必要になります。もしかすると、ブラウザによっては-mozであったり-webkitを頭に付けないといけないかも知れません。

box-sizingをブロックに指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されるわけです。なのでその幅と高さの範囲でpaddingが設定できるようになります。上記のcssでは、paddingの右側に0.8remといわゆる文字1つ分のスペースを入れているのですが、box-sizingを付けない場合、キャプションの帯は0.8rem分おそらくは右にはみ出ることだろうと思います。

z-indexが10になってますが、1より大きければ何でも良いだろうと思います。もしかすると不必要かも知れません。何枚かブロックを重ねてそれを表示する時にはブロックの重なり順を指定するのに利用して下さい。


さて、こんな感じで例のようにサイズが違う画像に対して、data-xxxを入れるだけでfigureを足してキャプションを入れることができました。実はこれ、あまり汎用性が無いように思うんです。無いとは思うのですが、例えば何かしらのページがあってそのページ内にその内容がわかるように画像があるとした時(イメージで言うとwikipediaのような感じのページ)、data-xxxのxxxの部分をどうするかだけ考えて、キャプションを入れられるので、場合によっては使えるのかも知れません。

ただ最近のブログやCMSなどの場合は、予め設定できるようになっていて出力する時にこういうのも勝手にやってくれるので、もし使えるとしたらいわゆる旧式のhtmlに対して、何かしら手を加える時だけでしょうね。

実際に作業したわけではないんですが、これを思いついたのは、例えば「ギターを弾き語れ!」のページで画像を入れた時いちいちタグを打つのが面倒なのと、いちいち作業をした場合に表示に統一が取れない場合などがあるので、どうかなぁと思った次第です。data-xxxのxxxでその画像がどういうものか、ファイル名だけでは何だっけ?と思う場合もなんとなしにわかるかなぁと。
案外テキストエディターで色々やっていると、その画像がどんなものかいちいち開くのが煩わしいことがあるんですよ。なので、その識別用にとふいに思って即席で作った感じです。

スポンサーリンク

シェアする

フォローする