試行錯誤ページ187



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点)
 

 
 
 

テキデコでの 下線 色は可変、太さは不可
 
テキデコでの 下線 色は可変、太さは不可
 
文字と線の色が同じで、文字と線も重なるので、実際は線を引かず、背景色で区別するほうがいいかも
paddingで背景色と両隣りの文字とのスペースを空けられる
 
text-decoration-styleなどもあるが、クローム・IEは不適応?(firefoxではOK?)
padding-bottomもうまく効かない
 
 
 
 
 
大きいサイズの時、正中を縦横のどちらかに合わせると、どちらかがずれる
↓div sampleのなかに入れるとラジオ・チェックボックスがなくなる
id="25x25"


 
 
小さいサイズの時、正中のずれは小さめ
id="tategaki25x25"


 
 
uでのアンダーラインは縦横OKだがhtml5で廃止?,border-bottomはタテの時に最下部だけにラインがつく

テキストデコレーションでの下線はOK、色は変えられるが、太さは変えられない。
しかし、iphoneでは縦書きで文字の左側に線がつく。
 
 
↑div sampleのなかに入れるとラジオ・チェックボックスがなくなる
 テキストデコレーションでのアンダーライン
 

りんご
リゾートあつし
width30pxだとすごく小さいradioになる。
  
   
← 再テストするなら チェック(✓)

 
Q6.答えはA(10点)



 
 
 

Q7.答えはA(10点)



Q8.答えはA(10点)



Q9.答えはA(20点)



Q10.答えはA(20点)