試行錯誤ページ153


 
(background-color:)transparent→f2f2f2にしてわかりやすくしている
inputのstyleにposition: relative; left: 0px; top: 0px;
 
↓フォームを表のセルの背景画像にしたい
表のサイズ、画像のサイズともにwidth: 140px; height: 93px
フォームのサイズはwidth:140px; height:94px;
スマホでの結果→

 
formのstyleにposition: relative; left: 0px; top: 0px;
 
↓画像を表のセルの背景画像にしている、
表のサイズ、画像のサイズともに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が小さいと文字の下側が欠けてしまう)

フォームのheightが大きくなると文字の出る位置が下になっていく。
※スマホだと右側に文字がずれてしまう。(フォントが大きいとその分だけ右側に大きくずれる)
 
↓ 表に入っていない状態、class=”minitangochogazoumoji”を記述すると画像が拡大するので、削除したもの
top:0px;left:15px;
文字を拡大(48pxに)しているので、フォームのheight:40→94px(heightが小さいと文字の下側が欠けてしまう)

フォームのheightが大きくなると文字の出る位置が下になっていく。
※スマホだと右側に文字がずれてしまう。(フォントが大きいとその分だけ右側に大きくずれる)