• ベストアンサー

CSSで半角文字を横倒しで表示したい

下記のHTMLソースで、文字の向きを180度回転させて表示する方法はありませんか? 現状、上が右になっていますが、上を左にしたいのです。 本来、縦書き表示ようのスタイルシートですが、 半角英数ですと横倒しになるためかえって都合がいいです。 (IE6だけで動作すればよいです) <html> <body> <div style="writing-mode:tb-rl;">&nbsp;10&lt;Z≤20</div> </body> </html>

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

180度回転させるフィルタ(参考URL) <div style="writing-mode:tb-rl;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2)">&nbsp;10&lt;Z≤20</div>

参考URL:
http://www5e.biglobe.ne.jp/~access_r/hp/filter/DirectXfilter_003.html
litton101
質問者

お礼

steel_grayさん、レスありがとうございました。 すごいですね、実は絶対不可能だと思ってたのですが、 こんなすごいフィルターがあったのですね、 今後も活用させていただきます。

関連するQ&A

  • 縦書き文字をIE7で縮小拡大するとズレる

    お世話になります。 縦書き表示の画面をIE7で開き、Ctrl+マウスホイールで拡大や縮小表示にすると、ある特定の文字のみ位置がズレてしまう現象が起きています。 ズレないようにはできないものでしょうか。 よろしくお願いします。 以下、サンプルソース。 ---------------------------------------------------------- <html> <head><title>縦書きテスト</title></head> <body> <table border="1"> <tr> <td nowrap><div style="writing-mode: tb-rl">企画</div></td> <td nowrap><div style="writing-mode: tb-rl">編集</div></td> <td nowrap><div style="writing-mode: tb-rl">あ、い、う</div></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • cssテキスト表示を縦書きにしたいのですが・・・。

    現在ホームページ制作中です。 テキストを縦書きにするため、cssでwriting-modeをtb-rlにしたのですが、ブラウザのIEだと 縦書き表示されるのですが、fireやクロームだと、くずれてしまいます。 どうしたらいいのでしょうか? 教えてください。

  • ASP.Net ボタン縦書きにしたい

    大変お世話になります。 日夜ASP.Net の勉強をしております初心者でございます。 ボタンコントロールの形状の理由でテキストを縦書きにしたいと思っております。 サイトを調べてみると、 <asp:Button ID="Button1" runat="server" Text="縦書きテスト" Style="writing-mode:tb-rl;" /> という情報を得たのですが、実際この Style="writing-mode:tb-rl;" を記述すると、 writing-mode は認識できるCSSプロパティ名ではありません。 と、エラーになってしまいます。わたくしの記述が間違いなのか、他に方法があるのか、 何卒お教え願えないでしょうか? 何卒よろしくお願いいたします。

  • ドリームウィーバーで縦書きの文章

     タイトル通りなのですが、span{writing-mode:tb-rl}のスタイルシートを使わずにドリームウィーバーの中の機能だけで横書き(左から右)ではなく、上→下への縦書きにする機能はありますでしょうか。  あるのであれば、操作手順を教えて下さい。お願いします。

  • 全角の縦書きが一定文字数で改行になる。

    こんにちは、 下のプログラムで全角の文字を入力し、縦書きにすると10文字で改行されます。横書きや半角の縦書きでは改行されないようです。 全角の縦書きで改行されないようにするにはどうすればいいでしょうか? 宜しくお願いいたします。 IE7で試しています。 <HTML> <HEAD> <STYLE type="text/css"> <!-- INPUT {font-size: 12px;} --> </STYLE> <SCRIPT language="JavaScript"> <!-- function check(){ var strName; strName = document.nform.textN.value; var test = document.getElementById("test"); test.innerHTML = strName; var tb = document.nform.tbSelect; test.style.writingMode = tb.options[tb.selectedIndex].value; } //--> </SCRIPT> </HEAD> <BODY> <FORM name="nform" > <SELECT name="tbSelect"> <OPTION value="tb-rl">縦書き</OPTION> <OPTION value="lr-tb" selected>横書き</OPTION> </SELECT><BR><BR><br> <INPUT type="text" size="45" name="textN"><BR> <input type="button" value=" 確認 " onClick="check()"> </FORM> <DIV id="test" style="writing-mode:tb-rl;position:absolute;font-size:24px;font-family: Verdana, sans-serif;cursor:hand"> </DIV> </BODY> </HTML> </html>

  • くの字点のcss

    以下をcssにしてくの字点を出す方法を教えてください <span style="display:inline-block; line-height:1em; vertical-align:middle; -ms-writing-mode: rl-tb; -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb; layout-flow:horizontal; text-orientation:upright; -webkit-text-orientation:upright;"><span style="display:block">〳</span><span style="display:block">〵</span></span>

    • ベストアンサー
    • CSS
  • 和風サイト制作の縦書について、

    和風サイト制作の縦書について、 .u-vertical { writing-mode: tb-rl; writing-mode: vertical-rl; line-height: 2em; } このようにしているのですが、pが複数並ぶ場合横書きは縦に並んで問題ないのですが、 縦書きだと横に並んでくれずに困りますよね。 floatやフレキシブルボックスなどで毎回、横並びにするしかないのでしょうか? 大変ですね。 http://www.miyama-sansou.com/ はspanだらけにするというとんでもない方法でやっていますが。

    • ベストアンサー
    • CSS
  • HTMLとCSSを駆使して棒グラフを作る際にラベルを表示させたい

    下記のHTMLで、ラベル(30~60の数値)を赤棒の上に表示する書き方をご教示下さい。 Excelグラフで、棒グラフに数値を表示させるようなイメージです。 なお、IE6だけで動作すれば十分です。 <html> <head> <style type="text/css"> .1 {vertical-align: bottom;} .2 {background-color: red;width: 20px; writing-mode:tb-rl;} </style> </head> <body> <table border="0"> <tr> <td class="1"><span class="2" style="height:30px;"></span><span class="3">30</span></td> <td class="1"><span class="2" style="height:40px;"></span><span class="3">40</span></td> <td class="1"><span class="2" style="height:50px;"></span><span class="3">50</span></td> <td class="1"><span class="2" style="height:60px;"></span><span class="3">60</span></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • 文字のサイズを大きくしつつ、中央に表示させるには?

    ファイアフォックスで、文字のサイズを大きくしつつ、中央に表示させるには? <BODY> <div style="text-align:center;" style="font-size:300%;">test1</div> <div style="font-size:300%;">test2</div> </BODY> これをすると、test1は中央に表示されるけど文字は小さいままで test2は、文字は大きく表示されるけど中央には表示されません。 どちらも行うにはどうすればいいでしょうか? IEでは<div style="text-align:center;" style="font-size:300%;">test1</div>で、 中央に表示されつつ、文字も大きくなります。

    • ベストアンサー
    • HTML
  • AutoCAD 英数半角文字が表示されない

    AutoCAD LT2005を使用しています。 あるファイルを開くと、英数半角文字で書かれている文字だけが 表示されていません(オブジェクトをダブルクリックして編集画面に すると書かれています。)新規に文字を書くと、まったく表示されず、 オブジェクトとしても認識されません。 コマンドラインには「シェイプXXは定義されていません」と出ます。 文字スタイル管理を確認してみると、通常表示されるはずのプレビューの ところに文字が表示されていません。 解決策がありましたら教えてください。 よろしくお願いします。