ネット上によく出ている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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssファイルの名称付け
-
ワードプレスで太字が反映され...
-
FC2 ホームページを別の人が編...
-
サイトを作る時のcssファイルは...
-
Dreamweaver のテンプレートで...
-
styleでtype="text/css"以外っ...
-
ドキュメントルートより上の階...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
PDFファイルを開かずに印刷...
-
教えてください。
-
入力規則のリストの文字の大き...
-
テーブル内の文字サイズを変更...
-
font-family の記載方法
-
alertで、アイコンの変更、又は...
-
Illustratorで作成、pngで保存...
-
VBAでListViewのフォントを変更...
-
Accessレポートでの改ページ
-
VBのRichTextBoxの文字色変更
-
オプションメニューの中の文字...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssファイルの名称付け
-
サイトを作る時のcssファイルは...
-
ディレクトリ構成【「common」...
-
jspにcssを反映させるには
-
ブラウザでプレビューでCSSが反...
-
cssで、ボタンのテキスト部分を...
-
cssは複数作る?
-
Dreamweaver のテンプレートで...
-
スタイルシート(CSSスタイル)...
-
エクセルファイルにCSSを読み込...
-
定数の定義とかはできますか?
-
ドキュメントルートより上の階...
-
複数のhtmlで同じcssファイルを...
-
一部のページにデフォルトCSSを...
-
cssが反映されません
-
アップロードすると、スタイル...
-
cssファイルを階層の異なるHTML...
-
範囲指定印刷での位置(css)
-
CSSの読み込み開始までラグがあ...
-
WindowsとMacで違うCSSを読み込...
おすすめ情報