試行錯誤ページ204




ipadmini4(白、大では問題なかった。バージョンが違うの?)で縦書き表示ができないので、いろいろやってみる。(ipadproなどでは問題ないのに)

まず縦書きについて書いてある図の文字がずれる。

縦書き用のコードをすべて併記(-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;)

ipadmini4・・・白でもきちんと表示された。(大では大丈夫だった)

IE・・・白でもきちんと表示された。(大では大丈夫だった)

クロームは縦書きも横スクロールも大丈夫。

(さいしょは『縦書き』になっています。何度でも切り換え可)
ipad mini4では 縦書き表示されませんので、横書きでご利用ください。

 

myTEXT内のstyleを-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;にしている
→IEではページ表示時の縦書きは白でも大丈夫。横書きもOK。縦書きに戻すとずれるので、cssのもプレフィックスが必要(試行錯誤206でradiotatetop206.css)。
→chromeは縦書きも横スクロールも大丈夫。

Questions(ここから)

第一問 まーくんの名前は?

 
HG 教科書体

 





Q. しゅんかしゅうとう

①まず答えがわかる部分をクリックして開きましょう。
②わからない部分はヒントボタンを押して開きます。(小→中→大)
③答えを最終確認するときは見るボタンをクリックします。
 

 
英語ブロック

 
Q2. 答えはA(5点)
readonlyなし(正解不正解が出るinputが横になっているのでここにスペースが出てしまう、文字はタテにできない、inputのタテヨコは指定可)
 

 
 
Q3. 答えはA(5点)
 

 
 
Q4. 答えはA(5点)
 

 

Q5.答えはA(10点)




label内にmargin-top

input内にmargin-top

全体を挟むspanでmargin-top

 
 
height:autoにすると縦書きでラジオボタンの位置が文字の左に来てしまう。
 
装飾部分は、縦横切替ではうまくいかない。topとleftで位置調整できるが・・・
 
hidekeyが採点に影響してしまうので、再テスト方式は使えない
 
 
Q6.答えはA(10点)



 
 
 

Q7.答えはA(10点)



Q8.答えはA(10点)



Q9.答えはA(20点)



Q10.答えはA(20点)





 

 
 

 

 
 
 
 
 

↑余白調整用(spacearrange1-5)あり

div sampleのなかに入れるとラジオ・チェックボックスがなくなる


重なっていて少しバグってる

検証→試行187へ