試行錯誤ページ186



Q1. 答えはA(5点)
readonlyあり
 
高さを大きくしても、文字の位置がverticalでmiddleにならない
  

 
Q2. 答えはA(5点)
readonlyなし
 
  

縦長で大きい部分がlabel
細長い部分がinputの前とlabelの後ろをspanではさんでいる部分
文字の位置はcssのline-heightで調整する。
spanのheightとlabelのheightは同じ値にしてもlabelの部分が大きく、spanの部分が細長くなる
spanのwidthとlabelのwidthは同じ値にしてもlabelの部分が短く、spanの部分が長くなる
2番目はspanを透明にしている
3番目はlabelを透明にしている
inputの透明は不可、cssでdisplay:none;にする
width,heightはlabelで指定する

 
 
Q3. 答えはA(5点)
 

文字の前に全角のスペースをいれる。
数字を入れると見た目がちょっとおかしい。

 
 
 

 
Q4. 答えはA(5点)
 

 
 
 

Q5.答えはA(10点)



 
装飾部分は、縦横切替ではうまくいかない。topとleftで位置調整できるが・・・
 
hidekeyが採点に影響してしまうので、再テスト方式は使えない
 
 
 

 
Q6.答えはA(10点)



 
 
 

Q7.答えはA(10点)



Q8.答えはA(10点)



Q9.答えはA(20点)



Q10.答えはA(20点)





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


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

検証→試行187へ