スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サムネ画像に何とか内枠を付けたかったので無理やり付けてみた

はじめに。
もう覚え書きも良いところな内容となります。
そしてかなり強引な内容となります。
と言うかHTMLやCSSってPCじゃなくてもできるじゃん! ってなりますが。
それでも良ければお進みください。

昔々遠い未来(2017年元日現在)に189個のサムネイルが並ぶプライベート専用のWebページがありました。
そこのWebページのサムネイルに無理やり内枠を付けるためにCSSをつついてみました。
ですがどれだけbox-shadowをつついてみても画像の裏側にしか内枠が付けれませんでした。
そこでいい感じに閃いた(キレた)管理人は透明な画像を上から重ねることにしました。
そんなお話です。

「いいですよやってやろうじゃないですか!」
IEとFirefoxの2ブラウザで確認作業を行いながら3時間ほどCSSに頭を悩ませていたIVNOだが、たかがCSS3にこれ以上は相手にしていられないと、内枠を作るためGIMPを起動させた。
内枠修正
1分で内枠を完成させたIVNOは、これを表示させるためにHTMLの改変を行うことにした。

<section><div><div>
<a><img src="" alt="" />タイトル4</a>
<a><img src="" alt="" />タイトル3</a>
<a><img src="" alt="" />タイトル2</a>
<a><img src="" alt="" />タイトル1</a>
<div></div>
</div></div>
</section>

しかし問題はどこを改変すべきかとなる。
前提条件として、内側に入っているものは外側にあるものより上に来る。
つまり<a>より<img>のほうが上に来る仕様となっている。
そのためどれだけ<a>に細工を行おうと<img>の裏に潜り込まれてしまうし、<img>に細工しても同じだ。
であるならば、あとから表示されるものは上に来ると言う仕組みを積極的に活用すべきと判断した。
しかし手入力はあまりにも面倒であったため、メモ帳等にある一括置換機能を利用して作業を行った。

<section><div><div>
<a><img src="" alt="" /><span>タイトル4</span></a>
<a><img src="" alt="" /><span>タイトル3</span></a>
<a><img src="" alt="" /><span>タイトル2</span></a>
<a><img src="" alt="" /><span>タイトル1</span></a>
<div></div>
</div></div>
</section>

こうすることで理論上は<span>が上に表示されることとなる。
<a>、<img>、<span>すべてにdisplay: block;と指定し、ブロックレベル要素にした。
その上で<a>と<img>にposition: relative;、<span>にposition: absolute;を設定した。
作成した画像を<span>にbackgroundで貼り付け、no-repeatを付与して繰り返しを防止し、テキストはpaddingを使ってずらした。
表示させてみるとIEもFirefoxも正常に反応していたため、ようやく溜飲を下げることに成功した。

残り1分で2017年。
皆様良いお年を。
それではまたネタを思いついた頃にお会いしましょう。

コメント

非公開コメント
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。