ネット上によく出ている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>
よろしくお願いいたします。
No.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>
ORUKA1951さん。文字サイズがかわりました!!!!
大きさが変わったときは感動しました。
ORUKA1951さんが言うとおり、CSSの書き方やHPの作り方がわからないのに、見よう見まねで行ったのがいけなかったと思います。
このソースを素に構造を理解していこうと思います。
本当に本当にありがとうございました。
感謝いたします。
No.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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
お礼が遅くなり、スミマセンでした。
教えていただいたソースを貼り付けて行ってみるのですがやはり駄目でした。
教えて頂いたソースを素にCSSやjsについて勉強してみようと思います。ありがとうございました。
No.3
- 回答日時:
>やはり、文字の大きさは変わりません。
ご教授いただけないでしょうか?javasciptの前に、ブラウザの表示メニューから代替スタイルシートを選択した場合に変わりますか?
それが変わらないと、javascriptでも変えられません。単に標準スタイルシートを書き換えているだけですから。。
small.css,big.css,miediam.cssは用意されましたか?
お礼が遅くなり、スミマセンでした。
教えていただいたソースを貼り付けて行ってみるのですがやはり駄目でした。
教えて頂いたソースを素にCSSやjsについて勉強してみようと思います。
ありがとうございました。
No.2
- 回答日時:
<!-- 原理主義の爺さんは今日も相変わらずだな(笑) -->
<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>
No.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-html4 … )」以来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>
この回答への補足
ありがとうございました。確かに知識がないのに行うのは無理かもしれません・・・・。掲載してあったソースを貼り付けて(_は消去して)動かしてみたのですがやはり、文字の大きさは変わりません。ご教授いただけないでしょうか?
よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssファイルの名称付け
-
ディレクトリ構成【「common」...
-
cssで、ボタンのテキスト部分を...
-
サイトを作る時のcssファイルは...
-
jspにcssを反映させるには
-
スタイルシート(CSSスタイル)...
-
Wordpress CSS ウィンドウサイズ
-
DWのブレイクポイント別のcss指...
-
外部CSSの読み込みがうまくでき...
-
bootstrapで、snsのアイコンの...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
Illustratorで作成、pngで保存...
-
ペイント3Dのテキストサイズ変更
-
Excel VBAで文字列の可視長を得...
-
入力規則のリストの文字の大き...
-
HTMLでHGPゴシックEを表現する...
-
リストの前後の行間をなくす方...
-
EXCEL VBA 印刷プレビューダイ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssファイルの名称付け
-
jspにcssを反映させるには
-
ディレクトリ構成【「common」...
-
cssが反映されません
-
複数のhtmlで同じcssファイルを...
-
サイトを作る時のcssファイルは...
-
Dreamweaver のテンプレートで...
-
cssで、ボタンのテキスト部分を...
-
ドキュメントルートより上の階...
-
スタイルシート(CSSスタイル)...
-
定数の定義とかはできますか?
-
ブラウザでプレビューでCSSが反...
-
エクセルファイルにCSSを読み込...
-
HTMLの CSSのファイルというの...
-
ワードプレスで太字が反映され...
-
wgetコマンドの精度と取得階層数
-
cssでiPhone SEで文字が小さす...
-
WindowsとMacで違うCSSを読み込...
-
一部のページにデフォルトCSSを...
-
HTMLで上手くサイトに反映されない
おすすめ情報