• 締切済み

cssテキスト表示を縦書きにしたいのですが・・・。

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

みんなの回答

  • kadusaya2
  • ベストアンサー率48% (114/235)
回答No.2

ご参考までに http://www.kadusaya.co.jp/

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

それは、IEの仕様なのでIE以外では無理です。 コンピューターの世界が元々横書きなので・・・ <p style="float:right; width:1.1em;">ああああああ</p> <p style="float:right; width:1.1em;">いいいい</p> <p style="float:right; width:1.1em;">うううううう</p> <pre> う い あ う い あ う い あ う   あ う   あ </pre> 今は、上記のどちらかのパターンですね。 あと数年したら縦書きに対応CSSがブラウザでもレンダリングできるようになります。

関連するQ&A

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

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

  • 縦書き文字を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で半角文字を横倒しで表示したい

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

    • ベストアンサー
    • HTML
  • ドリームウィーバーで縦書きの文章

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

  • 和風サイト制作の縦書について、

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

    • ベストアンサー
    • CSS
  • メニューのテキストが縦書きになってしまいます!

    メニューにマウスオーバーして、右に表示される枝分かれしたメニューの文字が縦書きになってしまって困っています。 私が作った時(2002年)のIEのバージョンではきちんと横書きで表示されていたのですが。このサイトです→http://wan.eco.ac DreemweaverMX2004で、テンプレートでメニューを作りました。ビヘイビアでボタンにマウスオーバーでポップアップメニューを表示にし、ポップアップメニューの設定でコンテンツや外観を作成しました。テキストは入力すると横書きで、縦書きに設定することは出来ません。試しに外観のタブでメニューの表示を縦並びにしていたのを横並びにしてみましたが、相変わらずテキストは縦書きでした。 これは、ブラウザの問題で修正不可能でしょうか?苦労して作ったのに、元から作り直さないとダメなのでしょうか? サイト制作達人のお知恵を拝借できたら嬉しいです。宜しくお願いいたします。

  • くの字点の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
  • HTML,CSSの表示について

    宜しくお願い致します。 webサイトを制作しているのですが、 IE6、IE7で表示チェックをすると、レイアウトが崩れてしまいます。 クロム、ファイヤーフォックス、オペラ、サファリは大丈夫でした。 いろいろ調べた結果、IEのバグだと思われます。 そこで疑問に思ったのですが、 プロのweb制作会社の方は、IEのバージョンごとのcssを用意なさっているのでしょうか? それとも、何か他の方法があるのでしょうか? もし参考になるサイトなどあれば教えてもらいたいです。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • メニューのテキストが縦書きになってしまいます!(再)

    URLがおかしくなっていたので再投稿いたしました。 メニューにマウスオーバーして、右に表示される枝分かれしたメニューの文字が縦書きになってしまって困っています。 私が作った時(2002年)のIEのバージョンではきちんと横書きで表示されていたのですが。このサイトです→http://wan.eco.ac DreemweaverMX2004で、テンプレートでメニューを作りました。ビヘイビアでボタンにマウスオーバーでポップアップメニューを表示にし、ポップアップメニューの設定でコンテンツや外観を作成しました。テキストは入力すると横書きで、縦書きに設定することは出来ません。試しに外観のタブでメニューの表示を縦並びにしていたのを横並びにしてみましたが、相変わらずテキストは縦書きでした。 これは、ブラウザの問題で修正不可能でしょうか?苦労して作ったのに、元から作り直さないとダメなのでしょうか? 宜しくお願いいたします。

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

    こんにちは、 下のプログラムで全角の文字を入力し、縦書きにすると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>