こんばんは。
早速ですがHTMLで縦書きをする方法はあるでしょうか?
縦書きになるタグはありますか?
ご存知の方、教えて下さい。
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

以下のURLでホームページを縦書きにするためのツールがいろいろ紹介されて


いますので覗いてみて下さい。また縦書きのサイトもリンクされていますので
縦書きのホームページを作る際の参考になると思います。

mikekoさん、rasakiさんもおっしゃっているようにIE5.5以外のブラウザー
で直接縦に表示できるようなHTMLタグはありません。
下のURLで紹介されているツールは
(1) <table>タグを使って一文字づつ縦に並べる。
(2) 縦書きにしたテキストを<pre>タグを使ってそのまま表示させる。
(3) javascriptを使って縦に表示する。
のどれかの方法を使って疑似的に縦書きを実現しています。
(1)(2)の方法は無理矢理縦にしているので、文字の位置が微妙にずれたり、
丸括弧が縦にならなかったり( (1)(2)の方法では縦のカギカッコは罫線"┌"
で代用しています)といった問題があります。
(3)については私にはよく分かりません。御自分でサンプルなどを見てチェック
してみて下さい。

参考URL:http://kyoto.cool.ne.jp/tatering/
    • good
    • 0
この回答へのお礼

大変、参考になりました。
ありがとうございました。

お礼日時:2001/05/10 02:57

HTMLのタグにはないですが、IE5.5ではスタイルシートで実現できます。

詳細は参考URLで。でもIE5.5以降しか対応(というか実装?)してませんのであしからず。

あと、縦書きで表示してしまうJavaScriptもありますよ。
http://www.mars.dti.ne.jp/%7ek-konno/

実用的とか簡単にということなら、mikekoさんのおっしゃるような縦書きエディタを使うのがいいと思います。

参考URL:http://www.microsoft.com/JAPAN/developer/library …
    • good
    • 0
この回答へのお礼

大変、参考になりました。
ありがとうございました。

お礼日時:2001/05/10 02:56

基本的に横書き社会(英語圏)の産物なので、縦書きになるタグはないと思いますが・・・・(^^;



ただ、強引に縦書きにする方法はあります。
参考urlに縦書きにしたページを入れておきますので、詳しいタグの書き方はそこのソースを開いて見て下さい。

私はオンラインソフトのエディタで、縦書き入力が出来て、そのデザインのままhtmlで出力出来る「TATEGAKI」というソフトで作っています。
これはMAC版ですが、winでも似たような縦書きエディタがオンラインソフトであったと思いますので、探してみられてはどうですか?

参考URL:http://www1.linkclub.or.jp/~mike/SENRYU/nekoSEN. …
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qimgタグの記述方法について、ご質問をさせて頂きたいのでよろしくお願い

imgタグの記述方法について、ご質問をさせて頂きたいのでよろしくお願いいたします。
画像のロールオーバー効果を作りたく以下の記述をしました。

[html]

<div id ="image1">
<a href="http://page.htm"></a>
</div><!-- image1 end -->


[css]

#image1 a{
display:block;
width:107px;
background:url(img/3.gif) no-repeat;
height:48px;
line-height:48px;
text-decoration:none;
text-align:center;
float:left;
}



#image1 a:hover{
background:url(img/33.gif) no-repeat;
}


上記の記述を以下のhtmlチエッカーに掛けた所、以下のエラーが出ました。

http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

line 460: <a> と </a> の間が空です。 → 解説 51

どうやら<a>と</a>の間に画像に表示をする、テキストを入れるということのようですが、私が今回使用している画像は既に文字の入っているもので、<a>と</a>間に何らかのテキストを入れてしまうと、文字が画像上で二重書き見たくなってしまいます。

このような場合は、どのような対処方法が御座いますでしょうか?
どなた様か、ご指導のほどよろしくお願いいたします。

imgタグの記述方法について、ご質問をさせて頂きたいのでよろしくお願いいたします。
画像のロールオーバー効果を作りたく以下の記述をしました。

[html]

<div id ="image1">
<a href="http://page.htm"></a>
</div><!-- image1 end -->


[css]

#image1 a{
display:block;
width:107px;
background:url(img/3.gif) no-repeat;
height:48px;
line-height:48px;
text-decoration:none;
text-align:center;
float:left;
}



#image1 a:hover{
background:url(img/33.gif) no-repe...続きを読む

Aベストアンサー

必ず次のように書きます。
<a></a>の間に適切な文字列を入れなければなりません。

HTML
<div id ="image1">
<a href="​[URL]"><span>・・・へリンク</span></a>
<!-- と必ず適切な文字列を入れなければなりません -->
<!-- 【anotherHTMLlintに指摘される以前の問題だよ】-->​
</div>

CSS
#image1{
width:
height:
****
}
#img a{
width:100%
height:100%;
}
#imge1 a span{
visibility:hidden; /* dispkay:none;ではない*/
/* display:none;では存在自体が消えてしまう。表示を隠すならvisibility:hidden; */
}
/* 以下はこの順番 */
#imge1 a:link,#imge1 a:visited{
}
#imge1 a::focus,#imge1 a:hover{
}
#imge1 a::active{
}

そうしないと、CSSを読めない、あるいは無効にしている訪問者にはリンクがわかりませんし、SEも判断できない。
 

必ず次のように書きます。
<a></a>の間に適切な文字列を入れなければなりません。

HTML
<div id ="image1">
<a href="​[URL]"><span>・・・へリンク</span></a>
<!-- と必ず適切な文字列を入れなければなりません -->
<!-- 【anotherHTMLlintに指摘される以前の問題だよ】-->​
</div>

CSS
#image1{
width:
height:
****
}
#img a{
width:100%
height:100%;
}
#imge1 a span{
visibility:hidden; /* dispkay:none;ではない*/
/* display:none;では存在自体が消えてしまう。表示を隠すならv...続きを読む

QHTMLのフォームで動的に日本語機能切り替えるHTMLタグはあるのでしょうか?

HTMLのフォームで数値の場合は半角入力にして名前を全角入力を自動的に日本語機能切り替えるHTMLタグはあるのでしょうか?

Aベストアンサー

 IE限定ですが、スタイルシートを使用することで、
IMEのモードを指定可能です。
又これは、JavaScriptを用いて、動的に変更することも可能です。
とりあえず、簡単なサンプルを提示しておきます。

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
</HEAD>
<BODY>
IME使用可<INPUT TYPE="TEXT" STYLE="IME-MODE:ACTIVE;"><BR>
IME使用不可<INPUT TYPE="TEXT" STYLE="IME-MODE:DISABLED;">
</BODY>
</HTML>

Qhtmlタグを機能させずにそのままのせれるタグ

htmlタグを機能させずにそのままのせれるタグがあれば教えてください。
<pre> </pre>だとタグが機能してしまうので・・・。
よろしくお願いします。

Aベストアンサー

タグではありませんが・・・・

CDATAマーク区間を使います。
http://bakera.jp/yomoyama/markedsection
ただし,
CDATAマーク区間何には"]]>"は記述できません

#でも僕は「ブラウザ」を対象にするなら(text/htmlで配布させられる羽目になることも多く,トラブルの元になる気がするので)CDATAマーク区間もつかわず,PCDATAとして処理するでもなく
別ファイルにして『object要素で参照する』『script要素の場合はsrc属性による指定にとどめる』のを推奨する。

Qhtmlとcssについてなんですが、どうして理解できない部分があるのでどなたかご享受お願いします。

どうしても理解できないというか納得できないところがあってどうしても個人では解決できなかったのでここに来させていただきました。当方まだ勉強し始めたばかりなので、もしかしたら初歩的な事かもしれませんが、よろしくおねがいします。まずはソースを貼ります。
<body>
<div id="back">
<div id="content">

<div id="header">
<!--headerEND-->
</div>

<div id="navi">
<ul>
<li class="navi_current"><a class="tub_size" href="#">test1</a></li>
<li class="navi_tub"><a href="#">test2</a></li>
<li class="navi_tub"><a href="#">test3</a></li>
<li class="navi_tub"><a href="#">test4</a></li>
<li class="navi_tub"><a href="#">test5</a></li>
<li class="navi_tub"><a href="#">test6</a></li>
<li class="navi_tub"><a href="#">test7</a></li>
</ul>
<!--navitEND-->
</div>
<div id="sidebar">

<div id="image_head1">
<!--image_headEND-->
</div>
<div id="image_bottom1">
<!--image_headEND-->
</div>

<!--sidebarEND-->
</div>
<div id="main">

<div id="image_head2">
<!--image_headEND-->
</div>
<div id="image_bottom2">
<!--image_headEND-->
</div>

<!--mainEND-->
</div>

<div id="footer">
<!--footerEND-->
</div>

<!--contentEND-->
</div>

<!--backEND-->
</div>
</body>
</html>

---------css-------
/*スタイルの初期化*/
*{
margin:0;
padding:0;
}

/*メイングループのスタイル*/

body {
background:#e5e5e5;
}

#back{
background-color: #000000;
width:1024px;
height: 100%;
}

#content{
width:800px;

/*↓仮の高さ*/
height:900px;

margin-left:auto;
margin-right:auto;

/*↓仮の背景色*/
background:#4876FF;
}

#header{
width:800px;
height:240px;

/*↓仮の背景色*/
background:transparent;
}

#navi{
width:800px;
height:100px;

/*↓仮の背景色*/
background:white;
}

#sidebar{
width:250px;

/*↓仮の高さ*/
height:520px;

/*↓仮の背景色*/
background:#FF69B4;

clear:both;
float:left;
}

#main{
width:550px;

/*↓仮の高さ*/
height:520px;

/*↓仮の背景色*/
background:#8B8878;

float:right;
}

#footer{
clear:both;
width:800px;
height:100px;

/*↓仮の背景色*/
background:#FFB90F;
}

/*sidebarとmainの画像headとbottomのスタイル*/




/*ナビゲーション詳細設定*/
#navi ul{
list-style-type:none;
width:798px;
height:80px;
margin-left:auto;
margin-right:auto;

/*↓仮の背景色*/
background:red;
}

#navi ul li{
width:114px;
height:70px;

/*↓仮の背景色*/
background:blue;

float:left;
}

#navi .navi_current{
width:114px;
height:70px;
display:block;

/*↓仮の背景色*/
background:url("images/tub_current.jpg");
}

#navi .navi_current a{
width:114px;
height:70px;
display:block;
text-align:center;
text-decoration:none;
line-height:2em;
font-size:20px;
font-weight:bold;
color:#fff;


/*↓仮の背景色*/
background:url("images/tub_current.jpg");
}



#navi .navi_tub a{
width:114px;
height:70px;
display:block;
text-align:center;
text-decoration:none;
line-height:2em;
font-size:20px;
font-weight:bold;
color:#fff;

/*↓仮の背景色*/
background:url("images/tabu_base.jpg");
}

#navi .navi_tub a:hover{
width:114px;
height:70px;
display:block;

/*↓仮の背景色*/
background:url("images/tabu_hover.jpg");
}
-------------
以上がソースなんですが、このソースでは<div id="back"></div>の高さが、フッター(id名footerのdiv)よりも短くなってしまいます。heightでフッターよりも長く指定すれば問題ないのですが、ちゃんと入れ子になってるはずですし、何故なのかまったくわからずにこのままではすっきりしません。単なる私のミスなのか、それともブラウザのバグか私自身では解決できませんでした。ちなみにすべてタグは手打ちで、確認したブラウザはfirefox3.5.3です。どなたかよろしくおねがいします。

どうしても理解できないというか納得できないところがあってどうしても個人では解決できなかったのでここに来させていただきました。当方まだ勉強し始めたばかりなので、もしかしたら初歩的な事かもしれませんが、よろしくおねがいします。まずはソースを貼ります。
<body>
<div id="back">
<div id="content">

<div id="header">
<!--headerEND-->
</div>

<div id="navi">
<ul>
<li class="navi_current"><a class="tub_size" href="#">test1</a></li>
<li class="navi_tub"><a href="#">test2</a>...続きを読む

Aベストアンサー

#back の高さがなぜその高さになっているかを一言で言いますと、「#content の height プロパティが "900px" と指定されているから」 です。 #footer を含めた #conetnt 内部の高さは 900px 以上あるにもかかわらず、#content の高さが 900px として指定されてしまっているため、#back の高さも 900px となってしまっています。

ためしに #content の height プロパティを削除すると、#content の高さと #back の高さが揃うと思います。

それと #back の height プロパティに "100%" が指定されているのは何を意図しているのかちょっとわからないのですが、もし画面の下部に隙間をださない、という事を意図しているのであれば html や body に "height: 100%" を指定し、#back の height プロパティは削除して、代わりに "min-height: 100%" を指定する必要があります。 (Firefox 3.5 で確認。 ただ CSS の仕様を詳しく見てはいないので仕様どおりの使い方かどうかは不明です。)

#back の高さがなぜその高さになっているかを一言で言いますと、「#content の height プロパティが "900px" と指定されているから」 です。 #footer を含めた #conetnt 内部の高さは 900px 以上あるにもかかわらず、#content の高さが 900px として指定されてしまっているため、#back の高さも 900px となってしまっています。

ためしに #content の height プロパティを削除すると、#content の高さと #back の高さが揃うと思います。

それと #back の height プロパティに "100%" が指定されているのは何...続きを読む

QHTMLタグが書かれた外部ファイルを、HTMLファイルに読込みたい

複数のHTMLファイル内で、同じHTMLタグを書く部分がいくつかあります。
それらのHTMLタグの部分を外部ファイルか何かにして、HTMLファイル内で読み込むようにすることは出来ますか?

JavaScriptでは外部ファイル(jsファイル)の読み込みはできるようですが、HTMLではできないんでしょうか?

※尚、CSSではやりたい事は出来ませんでした。
共通化できるのはスタイルだけなので・・。
私が共通化したいのは、HTMLタグです。

例えば

<TD>hogehoge</TD>



<IMG src="hoge.jpg">

などのタグを複数のHTMLファイルで共有する為に
外部ファイル化したいんですが
そんなことって出来るのでしょうか・・?

上記のようなタグを複数のHTMLファイルで共通できる手段であれば、外部ファイルという形式じゃなくても別にいいのですが・・

Aベストアンサー

javascriptの外部ファイルで
docuemnt.write("<TD>hogehoge</TD>");
document.write("<IMG src="hoge.jpg">");


人気Q&Aランキング

おすすめ情報