試行錯誤ページ152


 
(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が小さいと文字の下側が欠けてしまう)

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

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


 
↓吹き出し部分に、ボタンクリックで画像表示させる場合、ボタンのwidthを調整しないと、吹き出しの右端が欠ける(角丸)にならない。
120pxまでは大丈夫かと

贅沢(ぜいたく)のびるんるんは とても有名な サプリメントだよね。
なんといっても、

楽天ランキング 三冠

という実績もあるし。
最初のボタンのWIDTH:200px

贅沢(ぜいたく)のびるんるんは とても有名な サプリメントだよね。
なんといっても、

楽天ランキング 三冠

という実績もあるし。
最初のボタンのWIDTH:150px

↓ 出現前に画像の大きさだけスペースが空いてしまう。

画像をクリックすると、画像が消えて同時にリンク先にとぶ
 
 

贅沢(ぜいたく)のびるんるんは とても有名な サプリメントだよね。
なんといっても、

楽天ランキング 三冠

という実績もあるし。
最初のボタンのWIDTH:120px


 
↓ショートコードbg内(clipboardなど)にある吹き出し部分に、ボタンクリックで画像表示させる場合、ボタンのwidthを調整しないと、吹き出しの右端が欠ける(角丸)にならない。
外枠が二重になっているので、ボタンサイズをさらに小さくしないといけない
100pxまでは大丈夫かと

 毎月いくらかかるの?

 
 
 毎月いくらかかるの?

 
 
 毎月いくらかかるの?


 
 
【贅沢(ぜいたく)のびるんるん】 の

 Q アンド A
 
 問 題  答 え
1 楽天ランキングで 〇冠? 3冠
2 初回モニター価格は いくら? 990円(税込)
3 この商品で使われている、たんぱく質を作る成分である アミノ酸の1つは 何? アルギニン

 
 
【贅沢(ぜいたく)のびるんるん】の

 Q アンド A
 
 問 題  答 え
楽天ランキングで 〇冠? 3冠
初回モニター価格は いくら? 990円(税込)
この商品で使われている、たんぱく質を作る成分である アミノ酸の1つは 何? アルギニン

 

確 認 テ ス ト
 style=”line-height: 500%; を追加、問題部分が縦長になってしまう

① 【贅沢(ぜいたく)のびるんるん】は 楽天ランキング
三冠
です。
 
② 【贅沢(ぜいたく)のびるんるん】の 初回モニター価格は
990円(税込)
です。
 
③ 【贅沢(ぜいたく)のびるんるん】で使われている、
たんぱく質を作る成分である アミノ酸の1つは
アルギニン
です。

最後まで お読みいただきまして ありがとうございました。

 
 

確 認 テ ス ト
 style=”line-height: 200%; を追加、問題部分が縦長になってしまう

① 【贅沢(ぜいたく)のびるんるん】は 楽天ランキング
三冠
です。
 
② 【贅沢(ぜいたく)のびるんるん】の 初回モニター価格は
990円(税込)
です。
 
③ 【贅沢(ぜいたく)のびるんるん】で使われている、
たんぱく質を作る成分である アミノ酸の1つは
アルギニン
です。

最後まで お読みいただきまして ありがとうございました。

 
 
 

確 認 テ ス ト
 style=”line-height: 250%; を追加、問題部分が縦長になってしまう

① 【贅沢(ぜいたく)のびるんるん】は 楽天ランキング
三冠
です。
 
② 【贅沢(ぜいたく)のびるんるん】の 初回モニター価格は
990円(税込)
です。
 
③ 【贅沢(ぜいたく)のびるんるん】で使われている、
たんぱく質を作る成分である アミノ酸の1つは
アルギニン
です。

最後まで お読みいただきまして ありがとうございました。

 

検証用1(枠線を見える・見えない)
 枠線を見えるようにするにはborder-style: yes; border=1(枠線を消すにはborder-style: none; border=0にする)

① 【贅沢(ぜいたく)のびるんるん】は 楽天ランキング
三冠
です。
 
② 【贅沢(ぜいたく)のびるんるん】の 初回モニター価格は
990円(税込)
です。
 
③ 【贅沢(ぜいたく)のびるんるん】で使われている、
たんぱく質を作る成分である アミノ酸の1つは
アルギニン
です。

最後まで お読みいただきまして ありがとうございました。

 
 

検証用1.5 (問題部分と、です だけ 表に入っている)
 問題部分が必ず分の最初(左端)にくる

① 【贅沢(ぜいたく)のびるんるん】は 楽天ランキング

三冠
です。
 

② 【贅沢(ぜいたく)のびるんるん】の 初回モニター価格は

990円(税込)
です。
 

③ 【贅沢(ぜいたく)のびるんるん】で使われている、

たんぱく質を作る成分である アミノ酸の1つは、

アルギニン
です。

最後まで お読みいただきまして ありがとうございました。

 
 

検証用2(文節ぐらいで切って、こまかく表にしている)
 横幅が狭いと、一部分だけ2行になってしまい不自然

① 【贅沢(ぜいたく)のびるんるん】は
楽天ランキング
三冠
です。
 
② 【贅沢(ぜいたく)のびるんるん】の
初回モニター価格は
990円(税込)
です。
 
③ 【贅沢(ぜいたく)のびるんるん】で
使われている、
たんぱく質を作る成分である
アミノ酸の1つは
アルギニン
です。

最後まで お読みいただきまして ありがとうございました。

 

 
 
↓ pointer-events: 制限なし scrolling=”auto” width=”100%” height=”300″
スマホでもheightの分だけ表示される

 
 
↓ pointer-events: none scrolling=”no” width=”100%” height=”300″
スマホでもheightの分だけ表示される

 
 
↓ scrolling=”yes”にしてもpointer-events: none;にするとスクロールしない width=”100%” height=”300″
スマホではページ全部が表示される

 

↓ 表の1つのセル内で中でbottomとtopにして上下の画像をくっつけている

 


↑ 上下の画像の間に隙間ができてしまう
 

↓楽天アフィリスマホ版

↓300×250(表示スピード、スライド可?)

小画像

 
中画像

 
大画像

 

 
 

 

 

 
 
produced by eigoblock

IMG_blokkun-minix2

 

英作文問題

 

 『私は友達のトムとテニスをしました。』
 

I
played
tennis
with
my
friend
Tom
.

 

  (いくつか かくす)
  (半分くらい)
  (ほとんど)
  (すべて)

 

☆ チャレンジしたいレベルのボタンをクリックしてください。
 
かくれた部分をクリック(タップ)すると、英単語がわかります。
 

 

確認テストにチャレンジ

繰り返し 何度でも チャレンジできます。

レベル4の完答を ぜひ目指してくださいね。
 

※レベルを変更したいときは、ページを更新するか

英単語をいったんすべて見えるようにしてから

もう一度チャレンジしたいボタンを押してください。