文字の書体＆サイズを変更する方法。

質問

HP製作支援系のサイトを検索したのですが、
解決策が見つからなかったのでこちらにて質問致します。

テキスト系のサイトを作ろうと思っています。
閲覧者の方が自由に書体やフォントサイズを変更できるような記述を探していたところ、

---------------------------------------------------

↓フォントサイズ変更

<select onchange="document.body.style.fontSize=this.value;">
<option value="12pt">12pt</option>
<option value="11pt">11pt</option>
<option value="10pt" selected>10pt</option>
<option value="9pt">9pt</option>
<option value="8pt">8pt</option>
</select>

↓書体変更

<select onchange="document.body.style.fontFamily=this.value;">
<option value="Osaka" selected>Osaka</option>
<option value="ＭＳ ゴシック">MSゴシック</option>
<option value="ＭＳ 明朝">MS明朝</option>
</select>

---------------------------------------------------

といった同フレーム内の文字を変化させる記述を見つけました。

しかし、問題があります。
<b>　<i>　<a href="***">　等のタグならば問題なく変更が適応されましたが、
<table>　<input>　<textarea>　等のタグになると変更が適応されず変化がありません。

変化の適応されないタグで囲まれた中の文章も適応させるには、
どのように記述を変更すればよいのでしょうか？
もしくは変化させる事は不可能なのでしょうか？

将来的には別フレームでも同一の動作ができるようにしたいと思っております。

ご回答、よろしくお願い致します。

回答No.1

Dpop · ベストアンサー

Web屋です。OkWebの様なサイトを設計, 構築する仕事をしています。

> document.body.style.fontSize

などは、body環境下のフォントサイズを変更しているに過ぎず、
目的を実現される事とは少し違いがある様な気がします。

静的HTMLだけで実現しようとすると、かなり大変ですが、
スタイルシートを切り替えて利用する。と言う方法が本流だと思います。

動的HTMLを利用するのであれば、スタイルシートを切り替えて利用するか、
その利用者(セッション)専用のスタイルシートを(一時的に)作成し、
動的に切り替える機能を用意すれば良いでしょう。

静的HTMLだけで実現するのであれば、各ページ単位に、
フォントサイズ, フォントファミリーを変えたスタイルシートを読み込ませた
ページを用意して、それぞれ相互にアンカーで結ぶと言う手法になると思います。

個人的には、ページの内容を読み込んで、フォントサイズ, フォントファミリーを変更した、
HTMLファイルを生成するスクリプトを書いて、ページの内容が変わったり、
ページが追加される度に、対応ページを生成しなおす。
と言う手法を取ると思います

不明な点があれば、再度質問してください。

お礼

丁寧な説明、本当にありがとうございます。

しかし、まだ不慣れな世界なので用語が並ぶと途中で分からなくなってしまいます。
出来れば具体的な記述(コピーペーストして使えると嬉しいです)をまじえて、もう一度ご回答頂けませんでしょうか？

お手数ですが、よろしくお願い致します。

回答No.3

Dpop

Dpop です。

まず、スタイルシートを指定して、各種タグのフォントサイズなどを変更するのには、

body, th, td, input, textarea {
font-size: 14px;
font-family: Osaka;
}

の様な表記を行えば可能です。
フォントサイズなどの影響を与えたいタグがあれば、列挙すれば良いでしょう。

次に、利用者にフォントサイズやフォントファミリーを選択されるためには、
スタイルシートの置き換えが必要になります。
スタイルシートを置き換えるためには、基本的にはスタイルシート毎に、
別々のHTMLファイルを用意して挙げる必要がでてきます。
複数のHTMLファイルを用意して、それぞれ相互にリンクすれば、
利用者の都合に併せて、フォントサイズやフォントファミリーを変更させる事ができます。

しかし、これは実際には現実的ではありません。
そのため、CGI などを利用して、スタイルシートの内容を書き換えたページを、
利用者毎に見せると言う方法を取ると良いでしょう。

この様に、静的HTML(HTMLをテキストエディタや、
ホームページ作成ソフトを利用して作成したもの。)で困難な事でも、
動的HTML(CGIやPHPなどによって、その場でHTMLを作成する方法。)なら、
簡単にできると言う事がたくさんあります。
また、動的HTMLを利用する場合、閲覧者毎に設定した内容をクッキーに保管し、
他のページを閲覧した際に、前回設定したクッキー情報に併せて、表示内容を変更する。
と言う事が可能になるので、静的HTMLで実現するより、よりユーザーインターフェースは向上するでしょう。
a_s さんの JavaScript + スタイルシート方式でも、
ページが変わると設定された内容はクリアされてしまうので、実はあまり実用的では無いのです。

ただし、この方法を取るためには、CGI や PHP が利用できる環境が必要になります。
CGI(Perlを使用したCGI)が利用可能な環境があるのであれば、
スクリプト例を提供する事もできます。(少々、お時間を頂く事になるとは思いますが。)

動的HTMLを利用する方法であれば、フレーム分けを行う場合でも、
各フレームの内容が、利用者毎に設定したサイズで表示される様になります。
ただし、クッキーを利用する場合には、利用者がブラウザの設定でクッキーを利用する様にして頂く必要があるのですけどね。

不明点があれば、再度ご質問下さい。

お礼

＞利用者がブラウザの設定でクッキーを利用する様にして頂く必要がある

との事でしたので、今回は諦めようと思います。
折角解説して頂いたのに申し訳ございません。

Dpopさんのお陰でサイト作りの視野を広げる事が出来ました！

わかりやすい説明、ありがとうございました。

回答No.2

cyokokichi

JSSを使えば、<textarea>は変更できますよ。但しIEでのみしか確認はしていません。

例えば、こんな感じです。
document.f.sample.style.color = "#000000";

JSSはCSSの"-"がなく、CSSの"-"後の文字が大文字になると思えば、その他はCSSの感覚で書けますよ。

以前試したときは、IEでは、ほとんどのタグで通用したとおもいました。

ご参考になれば・・・

参考URL：

http://www.zspc.com/stylesheets/jss/

お礼

丁寧なご回答、本当にありがとうございます。

JSSという物を知り、視野を広げる事が出来ました。
サイト作りで参考にさせて頂きます。

記述を使っての説明がわかりやすく、理解しやすかったです。