試行錯誤ページ154


試行錯誤160でインプットの背景に画像を入れたが、スマホではやはり右側にずれて表示される
 
(background-color:)transparent→f2f2f2にしてわかりやすくしている
 
↓フォームを表のセルの背景画像にしたい
表のサイズ、画像のサイズともにwidth: 140px; height: 93px
フォームのサイズはwidth:140px; height:94px;
スマホでの結果→

 
 
↓画像を表のセルの背景画像にしている、
表のサイズ、画像のサイズともにwidth: 140px; height: 93px
フォームのサイズはwidth:140px; height:94px;
スマホでは右にずれて表示される

試行錯誤147を改良したページ

↓ 画像の上に動く文字(メッセージを1種類しか使えない、改行可)

文字の縦の位置はline-heightで可だが、
横の位置はリセットcss などである程度までは可だが、微調整は難しい
cf『ボックスモデル css』

 

 

↓ 表の中に入っている
class=”minitangochogazoumoji”の記述あり

 
↓ 表に入っていない状態で、class=”minitangochogazoumoji”を記述すると画像が拡大するので、削除したもの
フォームの横幅が160なので、後半の文字が入らない
top:10px;left:40px;

 
↓ 表に入っている状態、class=”mini6holespocketbookmihirakigazoumojiの記述あり
top:0px;left:15px;
文字を拡大(48pxに)しているので、フォームのheight:40→94px(heightが小さいと文字の下側が欠けてしまう)

 
↓ 表に入っていない状態、
top:0px;left:15px;
formの直前にdiv style=”position:absolute;top:0px;left:0px;
右ずれ度は減ったが、PCよりは右側になってしまうのは同じ