首が痛くならないですか。ブラウザ画面を横倒しにできたら楽なのになぁ...なんて人に朗報です。とりあえずFirefox3.5.x以上限定ですが、こんなのを作ってみた。
→ 右回転。 (Firefox 3.5以上)
JavaScriptのブックマークレットなので、Macな人はControl+クリック、Winな人は右クリックしてFirefoxのブックマークツールバーに保存してやると良いです。横倒しにしたいページをブラウザで表示してから、ブックマークした「右回転。」をクリックすると、どんなページでも右90度に回転して表示します。
ソースはこんな感じ。見やすいように改行を入れています。
CSS3で採用される予定のプロパティ"Transform"を使っています。表示されているページのbodyにTransformプロパティをスタイル指定しているだけ。
Transformについては、以下のページが参考になります。
→ CSS3大接近：第３回 transformプロパティ｜Gihyo.jp
→ CSS 2D Transforms Module Level 3｜W3C.org (英語)
表示を横倒しにするだけなので簡単に出来ると思いきや、オレの頭が悪いのか、実装が中途半端な所為なのか分かりませんが、X軸とY軸、縦と横、高さと幅が入り乱れて、ブラウザの表示領域をはみ出したり、ページが途中で切れたりと大騒ぎ。結局、たまたま上のようなコードでだいたい満足できましたが、これが将来にわたって(そして現在に於いても)正しいとは限りません。
このtransformプロパティ、SafariやGoogle ChromeなどのWebKit系ブラウザでも実装されています。だからと言って、上のコードのブラウザ接頭辞を 'Moz' から 'Webkit' に書き換えただけでは上手く行かないのだなぁ。どなたか作ってみませんか。
ところで「オレは左側を下にして寝そべるのだが...」という人は、こちら↓をどうぞ。
→ 左回転。 (Firefox 3.5以上)
ソースは以下の通り。
すみ春魚
初めまして。
ブログの縦長記事をキャプチャーする時、「ディスプレイが縦になるか、ブラウザを横向きにできたらいいのに・・・」と思っていました。
でも探してみたら、こんな便利なものを作っている方がおられたのですね。
最初はCSSのソースを貼るのかと、ちょっと敷居が高そうに思えたのですが、「右回転」、「左回転」のリンク文字を右クリックして、「このリンクをブックマーク」とし、フォルダに「ブックマーク・ツールバー」を選んだら、firefox のブックマーク・ツールバーに表示されました。
あまりに簡単に回転するので、うれしくなって「右回転」、「左回転」の両方を入れました。
どうもありがとうございます。