JeffreyFrancesco.org 公開日 タグ Tag Permalink 現在地 Facebook page Twitter RSS feed

あくまでもネタです。あとで説明するけど実用性は(ほとんど)ない(補足は必ず読んでね)。

CSS3 には :target 疑似クラスというのがあって、フラグメント識別子付きのリンクをクリック(して文書内のその要素に移動)した場合に限りその部分に特定のスタイルを適用(変更)するというのが出来る訳ですが、これを使って最近よくあるフォントサイズ切替をしてみようっていうお話です。

簡単に作ったデモページCSS3 対応ブラウザ(Firefox, Safari, Chrome, Opera の直近バージョンや IE9RC 版など)で開いて、ページ上の方にある「小」「中」「大」の各リンクをクリックしてもらうと文書全体のフォントサイズが切り替わるはずです。

解説は以下から。

ソースを見てもらえば分かりますけど一応コードを抜粋すると、HTML は(関係ない部分は省略)

<html id="reset">
  <body id="small">
    <div id="large">
      <ul>
        <li><a href="#small">小</a></li>
        <li><a href="#reset">中</a></li>
        <li><a href="#large">大</a></li>
      </ul>
      以下内容が続く…
    </div>
  </body>
</html>

てな感じ(body 以下の内容を全て div でラップしている)になってて、CSS の方は(同じく関係ない部分は省略)

#small, #large { font-size: 100%; }
#small:target  { font-size: 80%;  }
#large:target  { font-size: 120%; }

これだけ。body とその直下の div が文書全体を包む構造になってて、両方ともデフォルトのフォントサイズは100%。ここで「小」のリンクをクリックすると body がターゲットとなって #small:target が適用されるので body 以下のフォントサイズが80%に変わるし、「大」のリンクをクリックすると #large:target が適用され div 以下のフォントサイズは120%に変わる。

「中」クリックで両方ともにターゲットではなくなるからフォントサイズはデフォルトの100%に戻る…という仕掛けになっております。

…と、一応解説をしてみたものの、そもそもこの仕組みは「クリックした時点でフラグメント識別子の付いた要素にジャンプする」という性質上、切替ボタンをクリックするたびに文書の先頭にジャンプしてしまうし、同じ文書内に「ページの先頭へ戻る」みたいなリンクがある場合、そのリンクをクリックした途端にフォントサイズが元に戻ってしまったりする(涙)ので、冒頭に書いた通り実用性はほとんどありません。だからネタだとあれほd(ry

という訳で、フォントサイズの切替は普通に JavaScript などを使いましょう。決してこの内容を仕込んで「JavaScript オフの環境にも考慮してみた!」とか言わないように!(使う人いないと思いますが。汗)

補足(実はこっちの方が本題かもっていう)

ただ思うのですが、ネット上で「JavaScript でフォントサイズ切替」といって解説されている記事をざっと検索してみる限りだと、大半は HTML 内に直でフォント切替用のリンクを書いて onClick 属性やイベントリスナーでスクリプトを付与してるものだったりして、これはこれで何だかなあというのはありまして。

こういうリンクは「JavaScript なし環境だと意味がない」モノだと思うんですよね。なのに HTML 直書きでは例えばテキストブラウザ等で閲覧しても表示されてしまうし、かつリンクと認識するのにキーボードを押しても何も反応しない、そんなリンクが画面上に存在するっていうのはあまりよろしくないんじゃないかなあと。

今時 JavaScript なしの環境にそこまで配慮する必要もないのかもしれませんが、そういうリンクはやっぱり「JavaScript 有効の環境」のみで表示するようにした方がよろしいのではないかと(古い人間である)私などは思う訳です。要素はいくらでも DOM で書き出せるし、表示場所は CSS で何とでもなるし。

どうしても HTML に直で書きたい・書かなければならない場合には、やはり(そもそも先に述べたテキストブラウザ等や CSS オフの環境ではどっちみち作成者側が準備したフォントサイズ切替など意味ないですし)最低限の環境に対しては…でいいので CGI などで代替手段を準備した方が良いのではと思います。例えば Markdown でおなじみ John Gruber さんの Daring Fireball には(恐らく)CGI でフォントサイズを切り替えられるページが準備されていますし、考えてやろうと思えば「JavaScript オンなら即時切替、オフならCGI経由などで切替」みたいな仕組みは出来ない訳ではないですよね。

もちろん、全ての人がそういう…ハイブリッドな、とでも言えばいいのかしら…仕組みを開発出来る訳ではないですし、色々な事に精通していないといけませんから難しい事ではあるんですが。でも先に書いた通り「JavaScript オンの場合のみ表示する」仕組み程度であれば JavaScript だけに精通していればいい訳ですから、そこまで難しい事ではないと思うんですけどね。

「オマエはそう書くだけで何もしないのか」と言われるのもアレなので、余裕があれば後日作成してみようかしら。と思っただけ。今日のところは。