※ ChatGPTを利用し、要約された質問です(原文:フォントサイズを変更するボタンについて)
JQUERYでフォントサイズを変更するボタンの注意点
このQ&Aのポイント
JQUERYでフォントサイズを変更するボタンを導入したが、CSSのimportantのような事はJQUERYではできない。
WEBのプロは閲覧者にサイズを決めてもらうべきと考え、フォントサイズ変更ボタンの使用は減少傾向にある。
読みやすさを重視する場合は、フォントサイズを固定したままにすることが推奨される。
JQUERYでフォントサイズを変更するボタンを導入したのですが、CSSでフォントサイズを指定していると変更ボタンを押しても変更しません。
下記のようなソースなのですが、CSSのimportantのような事はJQUERYでは出来ないのでしょうか?
優先順位はCSSより低いのでしょうか?
<script type="text/javascript" src="js/jquery.textresizer.min.js"></script>
<script>
$(function(){
$("h1+ul+ul a").textresizer({
target: "#contentsleft,#contentsright,.copyright,address",type: "fontSize",// サイズ指定方法
sizes: [ "13px", "15px", "20px"],// フォントサイズ
selectedIndex: 1 // 初期表示
});
});
</script>
また、最近あまり見なくなったのですが、WEBのプロは閲覧者にサイズは決めてもらったほうが良いのでもう今後は使わない方向に行っているのでしょうか?
お礼
下記サイトですが問題なく文字の大きさは変更できるのに、CSSでフォントサイズを指定したときのみ変わりません。 http://sample1.digi2.jp/kindergarten/index.html ("h1+ul+ul a")こちらは下記のようになっているのであっていると思います。 <div class="headinside"> <h1> 福岡市中央区認可保育園 </h1> <ul> <li><a href="http://sample1.digi2.jp/kindergarten/plan.html" title="サイトマップ" class="headinside"></a></li> <li class="hnav"><a title="交通アクセス" href="http://sample1.digi2.jp/kindergarten/plan.html"></a></li> <li class="hnav"><a title="交通アクセス" href="http://sample1.digi2.jp/kindergarten/plan.html"></a></li> </ul> <ul> <li>文字サイズ変更</li> <li><a href="#"><img class="font" src="images/baseimg/fontmin1.png" alt="フォントサイズ小" /></a></li> <li class="hnav"><a href="#"><img class="font" src="images/baseimg/fontmid1.png" alt="フォントサイズ中" /></a></li> <li class="hnav"><a href="#"><img class="font" src="images/baseimg/fontlar1.png" alt="フォントサイズ大" /></a></li> </ul> <ul>
補足
* { } ここではなく、直接セレクタの所に記載したところ出来ました。 優先順位が*は一番低いのにJQUERYのボタンを押したときに*が優先される理由がよくわかりませんでした。 もしお分かりになりましたら教えてください。