文字サイズ変更ボタンの制御について
- 文字サイズ変更ボタンで文字サイズが思うように制御できない場合があります。
- 文字サイズ変更ボタンを配置する際、指定したサイズに変更されない場合があります。
- 標準サイズへの戻り方によって、元々のサイズと異なるサイズになることがあります。
- ベストアンサー
文字サイズ変更ボタンでサイズが思うように制御できません
文字サイズ変更ボタンを配置して、下記のhtmlで大中小に変えられるようにしています。 <div><a id="fsize_l" onclick="document.body.style.fontSize='130%'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ 大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='100%'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ 中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='70%'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ 小" width="29" height="25" /></a></div> 元々の文字サイズは％で制御しているのですが、大→中（＝標準）に戻した時、元々のサイズとは異なるサイズになってしまいます。 どうしてでしょうか？ 標準サイズを100％とし、中サイズも100％と記述しています。
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは ＞元々の文字サイズは％で制御している <body style="font-size:120%">のようにしているのですか？ それとも<div style="font-size:120%">のようにしているのですか？ 後者の場合だと<body>のフォントサイズ(何も変えていなければ100％）に対してのパーセンテージですから元に戻りますが 前者の場合だともともとが120％であるのに対して100％にするので20％減のフォントサイズになります <body style="font-size:120%"> <div> あああ </div> </body> → 20％減のフォントサイズになる <body> <div style="font-size:120%"> あああ </div> </body> → 元のサイズ(120％）で表示される
関連するQ&A
- 文字サイズを変更できない
web制作していて、文字サイズ変更の機能をつけました。 * * * * * * * * * * * * * * * * <div id="fsize"> <div><a id="fsize_l" onclick="document.body.style.fontSize='large'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ 大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='small'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ 中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='x-small'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ 小" width="29" height="25" /></a></div> </div> * * * * * * * * * * * * * * * * IEとfirefoxで確認したところ、問題なくサイズ変更されていたんですが、制作を進めていったら、いきなり変更しない箇所がでてきてしまいました。 全体のフォント指定はemでやっています。 何が原因なのでしょうか？ 言葉足らずな部分があるかもしれませんが、どうぞよろしくお願いします。
- ベストアンサー
- HTML
- 文字サイズ変更のjavascriptが動かない
現在、サイトを文字サイズ変更できるようにトライしているのですが、javascriptは全くの初心者なのでよくわかりません。 ページによって動かないので、何がいけないのかアドバイスお願いします！ 動くのは http://○○.jp/○○.html 動かないのは http://○○.jp/○○/○○.html のページです。 以下の記述は動かない方に設定しているものです。 ************* javascript ************* function imgver(num){ var element =document.getElementById("fontSize"); var writeHtml = ''; if( num == 0){ writeHtml +='<!-- --><li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><!--'; writeHtml +=' --><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><!--'; writeHtml +=' --><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li><!-- -->'; } else{ writeHtml +='<!-- --><li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><!--'; writeHtml +=' --><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><!--'; writeHtml +=' --><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li><!-- -->'; } element.innerHTML = writeHtml; } ************* html ************* <ul id="fontSize"><!-- --><li><a href="javascript:void(0)" onclick="font('16px');imgver(0)"><img src="../common/l.png" alt="大" width="25" height="26" border="0" /></a></li><!-- --><li><a href="javascript:void(0)" onclick="font('12px');imgver(1)"><img src="../common/m.png" alt="中" width="25" height="26" border="0" /></a></li><!-- --><li><a href="javascript:void(0)" onclick="font('9px');imgver(2)"><img src="../common/s.png" alt="小" width="25" height="26" border="0" /></a></li><!-- --></ul> ******************************************** 画像は表示されるのですが、全く動きません。 よろしくお願いします！
- 締切済み
- JavaScript
- CSSでロールオーバーボタン。IEで表示されるようにするには？
CSSでロールオーバーボタンを作っています。 Firefoxだと問題なく表示されるのですが、IEだとロールオーバーしてくれません。 どのように修正すればよいのでしょうか？ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { font-family: ＭＳ Ｐゴシック, Osaka, ヒラギノ角ゴ Pro W3; color: #FFFFFF; background-color: #c5003f; background-image: url(../images/bg.jpg); background-repeat: no-repeat; margin:0; padding:20px; } #fsize { float:right;} #fsize div { margin:0; } #fsize a { display:block; background-repeat:no-repeat; } #fsize a img { border:none; } #fsize_l { background-image:url(../images/b_fsize_l_f2.jpg); float:left; } #fsize_m { background-image:url(../images/b_fsize_m_f2.jpg); float:left; } #fsize_s { background-image:url(../images/b_fsize_s_f2.jpg); float:left; } #fsize a:hover { background-color:#FFFFFF; } #fsize a:hover img { visibility:hidden; } --> </style></head> <body> <div id="fsize"> <div><a id="fsize_l" onclick="document.body.style.fontSize='large'"><img src="../images/b_fsize_l.jpg" alt="*" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='small'"><img src="../images/b_fsize_m.jpg" alt="*" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='x-small'"><img src="../images/b_fsize_s.jpg" alt="*" width="29" height="25" /></a></div> </div> </body> </html>
- ベストアンサー
- HTML
- javascriptで文字サイズ変更-cssが効かない
こちらのサイトのスクリプトを使用してやってみています。 http://www.nrym.org/storeroom/neta/01_fontsize/ line-heightを各サイズで指定したいのと、このスクリプトでは縮小率拡大率％指定になっているのですが、これをピクセル指定にしたいのです。 そこで下記のように書き換えました。 fontchanger.js ------------------------------------------ show: function() { var id = this.id; document.writeln([ '<div id="' + id + '">', '<img src="moji.gif" width="50" height="20" alt="文字の大きさ" class="moji" />', '<a href="javascript: void(0);" id="' + id + '-small" title="文字を小さくする"><img src="moji_s.gif" width="20" height="20" alt="小" class="moji" /></a>', '<a href="javascript: void(0);" id="' + id + '-medium" title="文字を標準に戻す"><img src="moji_m.gif" width="20" height="20" alt="中" class="moji" /></a>', '<a href="javascript: void(0);" id="' + id + '-large" title="文字を大きくする"><img src="img/size_l.gif" width="20" height="20" alt="大" class="moji" /></a>', '</div>' ].join("\n")); Event.observe($(id + '-small' ), 'click', this.onClickSmall.bind(this)); Event.observe($(id + '-medium'), 'click', this.onClickMedium.bind(this)); Event.observe($(id + '-large' ), 'click', this.onClickLarge.bind(this)); }, onClickSmall: function(e) { this.change('10px' ); }, onClickMedium: function(e) { this.change('12px'); }, onClickLarge: function(e) { this.change('14px'); } }; css ------------------------------------------------- body{ font-size:12px; line-height:14px; } #fffsss{ width:100px; margin:0; padding:0; } #fontChanger{ } #fontChanger-small{ font-size:10px; line-height:12px; } #fontChanger-medium{ font-size:12px; line-height:14px; } #fontChanger-large{ font-size:14px; line-height:16px; } html ------------------------------- <div id="fffsss"> <script type="text/javascript"> <!-- FontChanger.start('js/fontChanger'); //--> </script> </div> ----------------------------------------------------- これがサイズは変更できるのですが、cssが効きません。 line-heightを指定できて、単位は全てピクセルにするにはどうしたらいいでしょうか？よろしくお願い致します。
- ベストアンサー
- JavaScript
- 文字のサイズ変更について
ホームページ作成初心者です。 javaにてホームページの文字サイズを制御しています。 Javaは <script type="text/javascript"><!-- fsize = 12; function sizesetpt(val){ document.body.style.fontSize = val + "px"; var tds=document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].style.fontSize = val + "px"; } } //--> </script> という風に書いています。 HTML内に <form action=""> <img src="image/small.gif" width="28" height="28" onclick=""sizesetpt(10)"> <img src="image/middle.gif" width="28" height="28" onclick=""sizesetpt(12)"> <img src="image/big.gif" width="28" height="28" onclick=""sizesetpt(14)"></form> と書いています。 一応問題無く動いていますが、可能であれば 「今は小サイズの文字で見ていますよ」というのがわかるように 小サイズ表示になっている時には文字小のボタン画像を別の画像に変更したいと思っています。 （例） 白地に黒字の「小」ボタン（画像）を押す ↓ ページが文字小サイズ表記になる ↓ その時はボタンは黒地に白字の「小」ボタン（画像）になっている そのような操作はできるのでしょうか？ もし出来るのであればやり方をお教え頂けると助かります。 イメージとしては以下のサイトのような感じです。 もっと複雑なjavaやCSSを使うのでしょうか？ http://www.n-kankyo.com/ よろしくお願いします。
- 締切済み
- JavaScript
- IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
- リストを一行にせずに横並びにする方法
リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか？ ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>
- 締切済み
- HTML
- アップロードするとレイアウトが崩れる
前にも質問させていただいたのですが、まだ解決していません。 FC２でアップロードはできたのですが、HTMLがデスクトップ上ではちゃんとみれたのに、 サーバーにアップしたら表示されません。 FFFTPでアップロードする際になにか作業をしないといけないことがあるのかわからないのですが・・・。HTMLのどこを変えたら他の方からもホームページが見れるのかわからないので、 HTMLの中身を一部追記するので、どの部分を変えたらいいのか教えて下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="root/css/top.css" rel="stylesheet type="text/css"> <title>パーティ専門アイス本舗</title> </head> <body link="#61503e" vlink="#61503e" alink="#aaaa"> <div id="wrapper"> <div id="header"> <p>パーティ専門アイス本舗は、パーティや記念日などに便利な2リットルサイズの業務用アイスを販売しています。数あるフレーバーからお好きなセットをお選びください。</p> <h1><img src="root/images/logo_ice.gif" width="450" height="60" /></h1> <p id="kaimono"><a href="#"><img src="root/images/idx_btn_cart.gif" width="180" height="30" alt="kaimono" /></a></p> <ul id="menu_navi"> <li><img src="root/images/gnavi_btn01.jpg" width="158" height="25" alt="home" /></li> <li><img src="root/images/gnavi_btn02.jpg" width="158" height="25" alt="syouhin" /></li> <li><img src="root/images/gnavi_btn03.jpg" width="159" height="25" alt="kaimono" /></li> <li><img src="root/images/gnavi_btn04.jpg" width="159" height="25" alt="shiharai" /></li> <li><img src="root/images/gnavi_btn05.jpg" width="158" height="25" alt="faq" /></li> <li><img src="root/images/gnavi_btn06.jpg" width="158" height="25" alt="mailmagazine" /></li> </ul> </div><!-- //header --> <div id="page_body"> <div id="side"> <div id="kensaku"> <form method="post" action="http://test.com/text.cgi"> <p>商品名や種類で検索</p> <p><input type="text" name="kensaku" size=20"></p> <p id="kensaku_form"><input type="submit" value="検索"></p> </form> </div> <p id="tokushu"><a href="#"><img src="root/images/Untitled-5_03_03.jpg" width="180" height="120" alt="tokushu" /></a></p> <div id="prodact_side"> <div class="section1"> <p><img src="root/images/idx_menu_ph01.jpg" width="63" height="35" alt="apple" /></p> <p class="right"><a href="#"> ストロベリー</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph02.jpg" width="63" height="35" alt="ugi" /></p> <p class="right"><a href="#"> 宇治抹茶</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph03jpg.jpg" width="63" height="35" alt="chocoship" /></p> <p class="right"><a href="#"> チョコチップ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph04.jpg" width="63" height="35" alt="berugi" /></p> <p class="right"><a href="#"> ベルギーチョコ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph05.jpg" width="63" height="35" alt="cookie" /></p> <p class="right"><a href="#"> キャラメルクッキー</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph06.jpg" width="63" height="35" alt="banira" /></p> <p class="right"><a href="#"> バニラ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph07.jpg" width="63" height="35" alt="pain" /></p> <p class="right"><a href="#"> パイナップル</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph08.jpg" width="63" height="35" alt="apple" /></p> <p class="right"><a href="#"> アップル</a></p> </div> <div class="section1"> <
- 締切済み
- HTML
- 画像のフェードインについて・・・。
現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- ベストアンサー
- その他([技術者向] コンピューター)
- 画像のフェードインについて・・・。
以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） こういうことに関してはまったくの素人です・・・。 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- 締切済み
- JavaScript
