記述問題たてがき　iphone縦書きテスト









kijutsutaiouradiotatetop216height140px.css
kijutsutaiouradioyokoleft216width250px　を使用

iphoneでinput内に縦書きはできないようだ・・・
ヨコ型のインプットボックスには横書きの文字
タテ型のインプットボックスには、ヨコ型のインプットボックスをそのまま時計回りに90度回転させた状態になる。

しかも、アイフォンはボックスにうまくタップできず、タップと同時にページがとんだりする。

script type=”text/javascript”>
function setHref( $href ) {
var $elementReference = document.getElementById( “sampleLink” );
$elementReference.href = $href;
}

１　なぜか見えなくなってしまった。.iphonekensho1 {
/* なぜか見えなくなった*/
transform: rotate(90deg);
-webkit-writing-mode: initial;-ms-writing-mode: initial; writing-mode: initial;
border:1px solid #000;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

２（赤色）　-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;
クロームではボックスが縦方向、２～4は同じ結果。
IEでは２は縦方向を超えて横になる。3と4は同じ結果。

３（青色）　-webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb;

４（緑色）　transform: rotate(90deg);-webkit-writing-mode: initial;-ms-writing-mode: initial; writing-mode: initial;

５（赤色）　-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;

クロームではボックスが横方向、5～7は同じ結果。
IEでは５は縦方向。6と7はいわゆる横方向の普通のボックス。
６（青色）-webkit-writing-mode: horizontal-tb;-ms-writing-mode: lr-tb;writing-mode: horizontal-tb;

７（緑色）　-webkit-writing-mode: initial;-ms-writing-mode: initial; writing-mode: initial;
 
 
 
 
 
 
 
 

第一問と、第二問では、問題文と解答枠のあいだのスペース・解答枠と答え合わせのあいだのスペースが異なる

記述形式解答ボックスと、答え合わせはどちらもformを利用しており、
答え合わせのformより後ろに記述形式のFormを利用すると一問目が反応しない。

実際、記述形式の場合は正解か不正解かがその都度出るので、併用することはない

コピペするときはサブドメインの縦書き 試しページをコピペしたほうが良い。

横書きのhrefを消しても機能するが、手のカーソルが出なくなるのでとりあえずそのまま
（さいしょは『縦書き』になっています。何度でも切り換え可）

 

Questions（ここから）

 
☆ 答えを入力してから、「○×判定」ボタンをクリックしてください。
 
 

Q1.　巌流島の戦いで有名な二刀流の剣豪はだれですか？
 
 
答え：

 
 

Q2.　巌流島の戦いで有名な二刀流の剣豪はだれですか？
 
 
答え：

 
 

Q3.　巌流島の戦いで有名な二刀流の剣豪はだれですか？

 
答え：


 
 


Q4.　巌流島の戦いで有名な二刀流の剣豪はだれですか？

 
答え：


 

解答の履歴を消すには
form … autocomplete=”off”　フォーム全体
input … autocomplete=”off”　エレメント別

 
 

 
 

 
 
 
 
 

.kijutsuwaku1 {
-webkit-appearance: none; /* ios標準のフォームスタイルを解除 */
border:1px solid #000;
transform: rotate(90deg);
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
margin-top:90px;
/* ↑ホワイトボードの上下*/
margin-right: -100px;
/* ↑マイナスにするほど枠が右側に移動する*/
margin-left: -100px;
/* ↑プラスにするほど枠の後ろの文字が後方に移動する*/
/* paddingは枠が大きくなったり横長になったりする*/
color:red;
}

.kijutsuwaku2 {
-webkit-appearance: none; /* ios標準のフォームスタイルを解除 */
border:1px solid #000;
transform: rotate(90deg);
-webkit-writing-mode: initial;-ms-writing-mode: initial; writing-mode: initial;
margin-top:90px;
/* ↑ホワイトボードの上下*/
margin-right: -100px;
/* ↑マイナスにするほど枠が右側に移動する*/
margin-left: -100px;
/* ↑プラスにするほど枠の後ろの文字が後方に移動する*/
/* paddingは枠が大きくなったり横長になったりする*/
color:blue;
}

.kijutsuwaku3 {
-webkit-appearance: none; /* ios標準のフォームスタイルを解除 */
border:1px solid #000;
transform: rotate(90deg);
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
margin-top:90px;
/* ↑ホワイトボードの上下*/
margin-right: -100px;
/* ↑マイナスにするほど枠が右側に移動する*/
margin-left: -100px;
/* ↑プラスにするほど枠の後ろの文字が後方に移動する*/
/* paddingは枠が大きくなったり横長になったりする*/
color:green;
}

 
 

#buttontateni {
/* デフォルトのボタンも縦にできる。 */
writing-mode: initial;
transform: rotate(90deg);
transform-origin: top left;
}

produced by eigoblock

IMG_blokkun-minix2