JavaScriptで作られたページはGoogleにインデックスされるの?
Google検索エンジンはどこを見ているの?ソースとDOMの違いWebページには"ソース"と"DOM...
2024年11月7日
ブログ
Web制作
2016年12月14日
現状のCSSではaタグを持つ親要素のdivにスタイルを定義することができません。
今回は同じ要素のボックス(div)が複数並び、あるボックスでは子要素にaタグが無し、あるボックスでは子要素にaタグ有りの場合、
aタグの有りのdivに対してhover設定する方法をご紹介。
結論から言うと、jQueryを使って、aタグが含まれるdivに対してcalssを付与します。
例:divの中にaタグがある場合classでlinkを付与。
jsは下記のように記述します。
[js]
$(function(){
$("div:has(a)").addClass("link");
});
[/js]
次にcssは下記のように記述します。
[css]
.link:hover {
background: #f1f1f1;
transition: All 0.5s ease;
}
[/css]
なぜ今回このような対応が必要になったかと言うと、スマホでの閲覧が増えたことにより、クリック領域を広くする必要がありました。
今まではテキストや画像に対してリンクを設置すればよかったが、今時ではaタグを含む、親要素に対してクリック領域を設定することが主流です。
そこで、問題になったのが、cssだけの設定だと、aタグが無いdivに対してもhoverのアクションが発生し、どれにリンクがあってどれにリンクが無いのか分かりづらいです。
今回の対策により、解決することができました。
また、:has(selector)を使えば、サムネイルなどの画像が有るパターン、無いパターンでスタイルの調整も簡単にできますね。
JavaScriptで作られたページはGoogleにインデックスされるの?
Google検索エンジンはどこを見ているの?ソースとDOMの違いWebページには"ソース"と"DOM...
2024年11月7日
共有レンタルサーバーが引き起こすリスク!IPブラックリスト問題とその解決策
新規契約したサーバー、ドメインなのにサイトが表示されない!!今回このような状況に陥ったので、原因究明...
2024年8月30日
本日、 1人が閲覧しました
© 2024 WEBLIC LLC