こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

HPの文字の大きさを変えるCSSがうまくいきません

ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。
初心者なので、かわかり易く教えていただると助かります。 尚、styleswitcher.jsはダウンロード済です。

ソースは、
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="style1.css" title="style1">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2">
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3">
<script type="text/javascript" src="styleswitcher.js"></script>
<style type="text/css">
style1.css
body {font-size: 100%;}
style2.css
body {font-size: 80%;}
style3.css
body {font-size: 120%;}
</style>
<title></title>
</head>
<body>
<a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a>
<a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a>
<a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a>
<br>
<br>
テスト<br>
</body>
</html>

よろしくお願いいたします。

投稿日時 - 2013-06-20 08:37:36

QNo.8141637

すぐに回答ほしいです

質問者が選んだベストアンサー

もう一度だけ、最初から
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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

投稿日時 - 2013-06-25 13:52:44

お礼

ORUKA1951さん。文字サイズがかわりました!!!!
大きさが変わったときは感動しました。
ORUKA1951さんが言うとおり、CSSの書き方やHPの作り方がわからないのに、見よう見まねで行ったのがいけなかったと思います。
このソースを素に構造を理解していこうと思います。
本当に本当にありがとうございました。
感謝いたします。

投稿日時 - 2013-06-26 11:43:22

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.4

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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

 

投稿日時 - 2013-06-21 11:55:36

お礼

お礼が遅くなり、スミマセンでした。
教えていただいたソースを貼り付けて行ってみるのですがやはり駄目でした。
教えて頂いたソースを素にCSSやjsについて勉強してみようと思います。ありがとうございました。

投稿日時 - 2013-06-25 09:19:18

ANo.3

>やはり、文字の大きさは変わりません。ご教授いただけないでしょうか?
javasciptの前に、ブラウザの表示メニューから代替スタイルシートを選択した場合に変わりますか?
 それが変わらないと、javascriptでも変えられません。単に標準スタイルシートを書き換えているだけですから。。
small.css,big.css,miediam.cssは用意されましたか?

投稿日時 - 2013-06-20 17:27:09

お礼

お礼が遅くなり、スミマセンでした。
教えていただいたソースを貼り付けて行ってみるのですがやはり駄目でした。
教えて頂いたソースを素にCSSやjsについて勉強してみようと思います。
ありがとうございました。

投稿日時 - 2013-06-25 09:17:54

<!-- 原理主義の爺さんは今日も相変わらずだな(笑) -->


<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はどこにどう書いてどう適用されるのか。それくらいはしっかり勉強しましょう。

投稿日時 - 2013-06-20 11:58:48

補足

初心者なのでスミマセン!お手数かけます。
以下のようにソースを変えてみたのですがやっぱり駄目で、どこに問題があるのかわかりません。やはり無理なのでしょうか?

<!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>

投稿日時 - 2013-06-20 16:33:28

ANo.1

 そんなところにはまるより、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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

投稿日時 - 2013-06-20 10:29:25

補足

ありがとうございました。確かに知識がないのに行うのは無理かもしれません・・・・。掲載してあったソースを貼り付けて(_は消去して)動かしてみたのですがやはり、文字の大きさは変わりません。ご教授いただけないでしょうか?
よろしくお願いいたします。

投稿日時 - 2013-06-20 16:37:32

あなたにオススメの質問