試行錯誤ページ205



safari対策用ページ

iphone safari対策として
@media(max-width: 500px) で
.main {
background-color: orange;

body{
cursor: pointer;にした
が、うまくいかない。

↓これは、そもそもボタンが反応しないので、意味がない。





↑そもそもボタンが反応しないので、意味がない。

↓ここからがdiv(id="safaritaisaku")に入っている

Q. しゅんかしゅうとう

 


 
≪ ヒントボタンいろいろ ≫

↑ここまでがdiv(id="safaritaisaku")に入っている
↓ここからがspan(id="safaritaisaku")に入っている

Q. しゅんかしゅうとう

 


 
≪ ヒントボタンいろいろ ≫


↑ここまでがspan(id="safaritaisaku")に入っている

↓ここからがdiv(idなし)に入っている

Q. しゅんかしゅうとう

 


 
≪ ヒントボタンいろいろ ≫

↑ここまでがdiv(idなし)に入っている
↓ここからがspan(idなし)に入っている

Q. しゅんかしゅうとう

 


 
≪ ヒントボタンいろいろ ≫


↑ここまでがspan(idなし)に入っている

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

 

Questions(ここから)

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

 
safariではラジオボタンは反応するが、解答は表示されない、開閉ボタンなども反応しない
 
alert内にリンクは入れられない。一部の文字だけが最初から表示されてしまい、一部の文字は表示されない。alertも出なくなる。
 
HG 教科書体
 
 
 
Q. しゅんかしゅうとう

 


 
≪ ヒントボタンいろいろ ≫

 
ヒントボタンが30pxぐらいだと小さすぎる。60pxあれば十分(アプリぐらいのサイズになる)
 
 
↓iphoneの縦でこのボタンをクリックすると一瞬画面が真っ白になる。Safariだから?
アンドロイド系のスマホではうまくいった。

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


 
 
↓valueにヒントが入っているのでタテヨコどちらでも消えない


↑valueにヒントが入っているのでタテヨコどちらでも消えない
 


 

 

 
英語ブロック

 
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へ