- ベストアンサー
HPの文字の大きさを変えるCSSがうまくいかない問題について
- HTMLのフォントサイズを変えるCSSがうまく適用されない問題について解決方法を教えてください。
- 初心者でもわかりやすい、HPの文字サイズを変更する方法を教えてください。
- ソースコードのstyleswitcher.jsを利用して、HPの文字の大きさを変える方法がうまくいかない問題について何か解決策はありますか？
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
もう一度だけ、最初から 1) HTMLをテキストエディタにコピーペーストして、適当なフォルダにtest.htmlで保存する。 2) 三種類のスタイルシートを [mediam.css] @charset "Shift_JIS"; body{font-size:2em;} [small.css] @charset "Shift_JIS"; body{font-size:0.8em;} [big.css] @charset "Shift_JIS"; body{font-size:2em;} を同じ場所に作ったstyleSheetフォルダーに入れる。 3) ブラウザで表示させて、表示メニューからスタイルを選択してjavascriptを使用しなくても変更されることを確認 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta http-equiv="Content-Script-Type" content="text/javascript"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rel="stylesheet" href="./styleSheet/mediam.css" type="text/css" id="mystyle"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./styleSheet/small.css" title="小さな文字"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./styleSheet/big.css" title="大きな文字"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./styleSheet/mediam.css" title="標準サイズ"> ＿<link rel="START" href="../index.html"> <script type="text/javascript"> <!-- ＿function styleCange(cssfile) {document.getElementById('mystyle').href = cssfile;} // --> </script> <style type="text/css"> <!-- html,body{margin:0;padding:0;} p{text-indent:1em;} ul.changeStyle,ul.changeStyle li{list-style:none;margin:0;padding:0;text-align:center;} ul.changeStyle li{width:6em;display:inline-block;} --> </style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<ul class="changeStyle"> ＿＿＿<li><a href="javascript;" onclick="javascript:styleCange('./styleSheet/small.css'); return false;">サイズ小</a></li> ＿＿＿<li><a href="javascript;" onclick="javascript:styleCange('./styleSheet/big.css'); return false;">サイズ大</a></li> ＿＿＿<li><a href="javascript;" onclick="javascript:styleCange('./styleSheet/mediam'); return false;">標準サイズ</a></li> ＿＿</ul> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2への補足への説明です。 まず、No.1で示した回答サンプルを理解しなさい!!!!。 それが出来ないならそのままコピーペーストして使うべきです。その説明まで要望しても、それはあなたの身には付きません。勉強と一緒、公式や答えを知ってもテストには役立たないでしょ。 クリックすると、./styleSheet/big.cssの値などをstyleChange()に渡していますね。styleChangでは、受け取った値をcssfileの値として、mystyleというIDを持つ要素(Element)を見つけて、その要素のhref属性の値をcssfileに代入しています。 <link rel="stylesheet" href="./styleSheet/mediam.css" type="text/css" id="mystyle"> ↓ <link rel="stylesheet" href="./styleSheet/big.css" type="text/css" id="mystyle"> に変更されます。標準スタイルシートへのパスが変わる。 よって、決して、No.2の補足で示されたようなものにはならないはずです。 もともとは、下記のような単純なHTMLです。 この状態で、スタイルが表示メニューから変更できることを確認してください。 そして、No.1の例と見比べて、No.1で示したサンプルを追加する。 物事には順番があります。その順番に従うのが一番の早道です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta http-equiv="Content-Script-Type" content="text/javascript"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rel="stylesheet" href="./styleSheet/mediam.css" type="text/css"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./styleSheet/small.css" title="小さな文字"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./styleSheet/big.css" title="大きな文字"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./styleSheet/mediam.css" title="標準サイズ"> ＿<link rel="START" href="../index.html"> <style type="text/css"> <!-- ul.changeStyle,ul.changeStyle li{list-style:none;margin:0;padding:0;text-align:center;} ul.changeStyle li{width:6em;display:inline-block;} --> </style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
お礼が遅くなり、スミマセンでした。 教えていただいたソースを貼り付けて行ってみるのですがやはり駄目でした。 教えて頂いたソースを素にCSSやjsについて勉強してみようと思います。ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞やはり、文字の大きさは変わりません。ご教授いただけないでしょうか？ javasciptの前に、ブラウザの表示メニューから代替スタイルシートを選択した場合に変わりますか？ それが変わらないと、javascriptでも変えられません。単に標準スタイルシートを書き換えているだけですから。。 small.css,big.css,miediam.cssは用意されましたか？
お礼
お礼が遅くなり、スミマセンでした。 教えていただいたソースを貼り付けて行ってみるのですがやはり駄目でした。 教えて頂いたソースを素にCSSやjsについて勉強してみようと思います。 ありがとうございました。
- play_with_you
- ベストアンサー率37% (112/301)
<!-- 原理主義の爺さんは今日も相変わらずだな（笑） --> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> これがおかしいです。 なんでこうなったか分からないけど、紹介サイトのコピペでもしたんかな？ おそらく 「style1.css」というファイルに「body {font-size: 100%;}」と書く 「style2.css」というファイルに「body {font-size: 80%;}」と書く 「style3.css」というファイルに「body {font-size: 120%;}」と書く という説明をしている記述をだったのでしょうね。 それを踏まえて紹介サイトを見直し、やり直して見てください。 ※コピペで「動けばいい」という考え方そのものは否定しませんが、 それにしたって最低限レベルの知識はつけないと今回みたいな妙な失敗をします。 CSSはどこにどう書いてどう適用されるのか。それくらいはしっかり勉強しましょう。
補足
初心者なのでスミマセン！お手数かけます。 以下のようにソースを変えてみたのですがやっぱり駄目で、どこに問題があるのかわかりません。やはり無理なのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>デフォルト：小のサンプル フォントサイズ変更（大・中・小）</title> <script type="text/javascript" src="styleswitcher.js"></script> <link href="css/14.css" rel="stylesheet" type="text/css" title="Default" media="medium" /> <link href="css/11.css" rel="alternate stylesheet" type="text/css" title="Mid Font" media="small" /> <link href="css/16.css" rel="alternate stylesheet" type="text/css" title="Large Font" media="large" /> </head> <body> <ul> <li>フォントサイズ：</li> <li class="small"><a href="#" onclick="setActiveStyleSheet('Default'); return false;">小</a></li> <li class="medium"><a href="#" onclick="setActiveStyleSheet('Mid Font'); return false;">中</a></li> <li class="large"><a href="#" onclick="setActiveStyleSheet('Large Font'); return false;">大</a></li> </ul> <p>test</p> </body>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そんなところにはまるより、HTMLやスタイルシートの基礎を押さえるほうが先のような気がします。javascriptで関数を呼び出しても相手がいないし・・ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> じゃなくて、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> のstrictで作成しましょう。どちらも標準モードで起動しますが、さすが「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」以来12年経つので、いくらなんでも。 ★<br>は原則使いません。 ★a要素は行内要素ですから<body>下には書けません。 ★javascriptが利用できないユーザーのためにalternate stylesheetも書いておきましょう。(書いてありますね。) ★javascript自体は数行ですみます。 ※./styleSheet内に三種類のスタイルシートを用意しておく。 ※タブは＿に置換してある。 ※こんなことより、HTMLやCSSの基礎をきちんと学びましょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta http-equiv="Content-Script-Type" content="text/javascript"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rel="stylesheet" href="./styleSheet/mediam.css" type="text/css" id="mystyle"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./styleSheet/small.css" title="小さな文字"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./styleSheet/big.css" title="大きな文字"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./styleSheet/mediam.css" title="標準サイズ"> ＿<link rel="START" href="../index.html"> <script type="text/javascript"> <!-- ＿function styleCange(cssfile) {document.getElementById('mystyle').href = cssfile;} // --> </script> <style type="text/css"> <!-- ul.changeStyle,ul.changeStyle li{list-style:none;margin:0;padding:0;text-align:center;} ul.changeStyle li{width:6em;display:inline-block;} --> </style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<ul class="changeStyle"> ＿＿＿<li><a href="javascript;" onclick="javascript:styleCange('./styleSheet/small.css'); return false;">サイズ小</a></li> ＿＿＿<li><a href="javascript;" onclick="javascript:styleCange('./styleSheet/big.css'); return false;">サイズ大</a></li> ＿＿＿<li><a href="javascript;" onclick="javascript:styleCange('./styleSheet/mediam'); return false;">標準サイズ</a></li> ＿＿</ul> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
補足
ありがとうございました。確かに知識がないのに行うのは無理かもしれません・・・・。掲載してあったソースを貼り付けて(＿は消去して)動かしてみたのですがやはり、文字の大きさは変わりません。ご教授いただけないでしょうか？ よろしくお願いいたします。
お礼
ORUKA1951さん。文字サイズがかわりました！！！！ 大きさが変わったときは感動しました。 ORUKA1951さんが言うとおり、CSSの書き方やHPの作り方がわからないのに、見よう見まねで行ったのがいけなかったと思います。 このソースを素に構造を理解していこうと思います。 本当に本当にありがとうございました。 感謝いたします。