ブラウザの表示を90度回転。JavaScriptとCSSで。

PC版へ 2010年02月23日
皆さんの中には、おそらくこんな↓格好で寝そべりながらネットをしている人も居ると思うのですが、
ne.jpg首が痛くならないですか。ブラウザ画面を横倒しにできたら楽なのになぁ...なんて人に朗報です。

とりあえずFirefox3.5.x以上限定ですが、こんなのを作ってみた。

  → 右回転。 (Firefox 3.5以上)

JavaScriptのブックマークレットなので、Macな人はControl+クリック、Winな人は右クリックしてFirefoxのブックマークツールバーに保存してやると良いです。横倒しにしたいページをブラウザで表示してから、ブックマークした「右回転。」をクリックすると、どんなページでも右90度に回転して表示します。

ソースはこんな感じ。見やすいように改行を入れています。



CSS3で採用される予定のプロパティ"Transform"を使っています。表示されているページのbodyにTransformプロパティをスタイル指定しているだけ。

Transformについては、以下のページが参考になります。

  → CSS3大接近:第3回 transformプロパティ|Gihyo.jp

  → CSS 2D Transforms Module Level 3|W3C.org (英語)

表示を横倒しにするだけなので簡単に出来ると思いきや、オレの頭が悪いのか、実装が中途半端な所為なのか分かりませんが、X軸とY軸、縦と横、高さと幅が入り乱れて、ブラウザの表示領域をはみ出したり、ページが途中で切れたりと大騒ぎ。結局、たまたま上のようなコードでだいたい満足できましたが、これが将来にわたって(そして現在に於いても)正しいとは限りません。

このtransformプロパティ、SafariGoogle ChromeなどのWebKit系ブラウザでも実装されています。だからと言って、上のコードのブラウザ接頭辞を 'Moz' から 'Webkit' に書き換えただけでは上手く行かないのだなぁ。どなたか作ってみませんか。

ところで「オレは左側を下にして寝そべるのだが...」という人は、こちら↓をどうぞ。

  → 左回転。 (Firefox 3.5以上)

ソースは以下の通り。


関連記事

コメント

すみ春魚

初めまして。

ブログの縦長記事をキャプチャーする時、「ディスプレイが縦になるか、ブラウザを横向きにできたらいいのに・・・」と思っていました。
でも探してみたら、こんな便利なものを作っている方がおられたのですね。

最初はCSSのソースを貼るのかと、ちょっと敷居が高そうに思えたのですが、「右回転」、「左回転」のリンク文字を右クリックして、「このリンクをブックマーク」とし、フォルダに「ブックマーク・ツールバー」を選んだら、firefox のブックマーク・ツールバーに表示されました。

あまりに簡単に回転するので、うれしくなって「右回転」、「左回転」の両方を入れました。
どうもありがとうございます。