【北行庵】  HOME旅行記一覧
HTML|小技
文字の大小ボタン、効果を拡大

検索エンジンと検索サービスの相関表
TITLE と META 記述法
フレームページの検索ロボット対策
Amateur SEO
検索ロボット用サイトマップの設置
表示の乱れ? ブラウザ対策を
文字の大小ボタン、効果を拡大

◇◆◇

はじめに
文字サイズ変更ボタンの Javascript はテーブル内テキストに無効、ご存知でしたか?
ブラウザ対策をしながら、古いページの手直をした。文字サイズを大・中・小から選べるボタンが設置してあったが、テーブル外では効果があってもテーブル内には無効だった。これまで気付かなかったが、その例を以下に示します。

単純なテーブル2つと文字サイズ変更ボタンがある。その着色されたテーブル(上)はHTMLのテーブルを設置しただけであり、文字サイズ変更ボタンではテーブル内の文字サイズは変わりません。この例ではサイズ固定のため初期サイズ「中(12pt)」を指定してあります。
くどいが、当サイトで使用中の文字サイズ変更 Javascript はテーブル内テキストに効果を及ぼさない。何んらかの方法でテーブル外で有効な文字サイズをテーブル内の文字サイズに引き渡す必要がある。それが命題です。
2番目(下)のテーブルは小技を使ったもので、ボタンで文字サイズが変わります。文字サイズ変更ボタンをクリックするとテーブル内の文字サイズが変わるので試して下さい。初期値(現在の表示サイズ)は「中(12pt)」です。 ・・・・・、どうでしたか?


簡単な方法
検索エンジンで調べたら、同じ問題を投げかけた人達が意外にも多くいました。たまたま読んだ数ページでは、答えを書き込んだ人達がコンピューターの詳細を知っているらしく、説明や方法はHTMLやCSSの範囲を超えた少なくとも1レベル高いテクニカルなもの、に思えました。読んでも分からない。付け焼刃の難しい勉強は無理です。で、自分で考えることにした。

答えは簡単に見つかった。

  1. <body>等にスタイルシートで文字の初期サイズを指定する。例えば、
    body { font-size: 12pt }
  2. スタイルシートでテーブルの構成タグに文字サイズを直接付ける。
    table { font-size: 100% } ← この指定のみで十分のようです。
    tr { font-size: 100% } ← 設定しなくともよい、ようです。
    td { font-size: 100% } ← 設定しなくともよい、ようです。
  3. これで該当ページの全てのテーブル内は文字の初期サイズ 12pt で表示される。文字サイズ変更ボタンの「大」が押されたらテーブル内テキストも「大」で表示される。
  4. もしテーブル内テキストをテーブル外テキストとは違ったサイズにしたい時は、フォント・サイズのパーセント値を変更すればよい。例えば、 font-size: 90% なら小さめのテキストになり、font-size: 110% ならば大きめのテキストになる。テーブル3タグの内、1個のみの変更です。もちろんテーブル内で別途にサイズ指定することもできる。

体験談です(2014.01.31 記)。表示1ページ全体を1つのテーブルで囲った形の HTML 記述を作りました。つまり <body> の次に <table> があり、最後部は </table> の次に </body> となるものです。文字サイズ変更ボタンも <table> 〜 </table> の中に記述されます。当初、文字ボタンをクリックしても文字サイズの変更は出来なかった。全くの無反応で、理由も対処法も思いつかず困りました。
スタイルシートに table { font-size: 100% } を追加したところ、文字サイズ変更ボタンのクリックで文字サイズは変わるようになりました。
高度な技術的な理由は分かりませんが、「コロンブスの卵」的な結果です。当サイトのページで利用しています。

応用例
リンクのアンカーテキストはスタイルシートで文字サイズの初期値が設定されていると、該当ページでは全てのリンクのアンカーテキストが同じ初期サイズで表示されます。その初期サイズは文字サイズ変更ボタンの影響を受けません。しかし、次のようにリンクを記述すると文字サイズ変更ボタンが有効になる。

<a href="happy.html" style="font-size:100%"> HAPPY </a>


上のリンクは文字サイズ変更ボタンではアンカー HAPPY の大きさは変わりません。文字サイズが初期値として 10pt に設定されているからです。
下のリンクではリンクテキスト HAPPY は大・中・小とサイズが変わります。何故なら、リンク外の文字サイズが style="font-size:100%" でリンク内のアンカーテキストに引き渡されているからです。

◇◆◇
(2014.01.31 改善)(2011.01.07 公開)

< PREV.NEXT >