試行錯誤ページ600 試行561の斜め矢印を利用して、ポップアップ解説(顔あり)を作る3


























1つ目のセルクリック・・・縦並び、横並びありのポップウィンドウ

2つ目のセルクリック・・・短いセリフ用のポップウィンドウ

3つ目のセルクリック・・・長いセリフ用のポップウィンドウ(pointkaisetsufaceresponsivelonglines2no1~5、pointkaisetsufaceresponsivemojilonglines2no1~5)

ページをリロードすると、人物イラストが表示されない。
(スクショ等は何度でも表示されるのに)
参考サイト:https://ui.appleple.blog/markup/entry-93.html
itojisan.xyz/trouble/12922/ → important を入れてもダメ、background-colorもダメ

【結論】人物が表示されないときのためにブロッくん画像を背景画像として入れた

【対策不可】スマホでポップアップウィンドウを閉じようとして、戻るボタン(△など)を押してしまうと、履歴の前ページに戻ってしまうのでポップアップウィンドウを別ページで開くようにしたいができなかった。

【古いEdge?】ポップアップウィンドウ内の吹き出しが出ない。

吹き出しワクと三角部分がなく、背景色の帯の上に文字が表示される

※ cssを削除した関係で I のセルのポップアップウィンドウ内の 横並び のみ正常に表示される

 
 
 

第2問

試行567を利用して、もどる矢印を無しにして、矢印回転だけで誘導する

この方法なら、試行565に比べて、上下移動の矢印が見えない

★連続の組み合わせ矢印(文字あり)を入れている

→yokobarだけに『くわしく説明』の文字を入れると矢印位置がずれるので、
起点縦棒と上向き矢印には『くわしく説明』の文字を透明で入れている

I met Tom at school last week. を訳してみます。 

 
 

 . 

全訳: 『  私は 先週 学校で トムに 会いました  。』

↑ at『~で』場所を表す の部分は
iphoneではレイアウトが崩れるので、横幅を余裕を持ってつくる

ブラウザによっては(旧IE?)、ピリオドセルの枠を出したときに、ピリオドセルが2行になってレイアウトが崩れる。

 

__________________________________

以下は、顔ありワンポイント解説のFadeIn, FadeOut を作ったもの

セル1つ目に使っているもの。
(shikousakugo600dai2monpointkaisetsufaceFadeIn, FadeOut)

レスポンシブではない(スマホで右に飛び出してしまう)し、
長いセリフ、短いセリフに対応するため、
これは使わない。


普通のchat-fukidashi は横並び
(pointkaisetsufaceyokonarabi2no1 、pointkaisetsufaceyokonarabimoji2no1 )

chat-fukidashi mizu

 
短いセリフ
chat-fukidashiversion2 は縦並び
(pointkaisetsufacetatenarabi2no1 、pointkaisetsufacetatenarabimoji2no1 )

chat-fukidashiversion22 mizu
 
長いセリフ
chat-fukidashiversion2 は縦並び
(pointkaisetsufacetatenarabi2no1 、pointkaisetsufacetatenarabimoji2no1 )

chat-fukidashiversion22 mizu chat-fukidashiversion22 mizu chat-fukidashiversion22 mizu

普通のchat-fukidashi は横並び
(pointkaisetsufaceyokonarabi2no1 、pointkaisetsufaceyokonarabimoji2no1 )

chat-fukidashi mizu chat-fukidashi mizu chat-fukidashi mizu

↓ソースここから(fukidashiversion22)

/*セリフ吹き出しshikou600でfadein, fadeout作成、 version22(version2の改良版)ワンポイント解説用 vdeep*/
/* チャットレイアウト */
.chat-boxversion22 {
width: 100%;
height: auto;
overflow: hidden;
/*floatの解除*/
margin-bottom: 20px;
font-size:normal;
/*↑20210612追記した*/
}

.chat-faceversion22 {
float: left;
margin-right: -120px;
}

.chat-faceversion22 img {
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}

.chat-areaversion22 {
width: 100%;
float: right;
}

.chat-fukidashiversion22 {
display: inline-block;
/*コメントの文字数に合わせて可変*/
padding: 15px 20px;
margin-left: 0px;
margin-top: 18px;
/* border: 1px solid gray; ←削除 */
border-radius: 10px;
position: relative;
/*追記*/
background-color: #f2f2f2;
}

/* ↓追記↓ */
.chat-fukidashiversion22:after {
content: “”;
position: absolute;
top: 65px;
/* ↑もともとはtop: 50%; */
left: 38px;
margin-top: -85px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent #f2f2f2 transparent;
}

.chat-fukidashiversion22.mizu {
background-color: #D9F0FF;
}

.chat-fukidashiversion22.mizu:after {
border-color: transparent transparent #D9F0FF transparent;
top:65px;
}

.chat-fukidashiversion22.midori {
background-color: #bcffbc;
/*↑もともと #BCF5A9だったが、やや濃いので変更した。その後に薄めの#bcffbcにした。(ラインで使われている#00B900は濃すぎ)*/
}

.chat-fukidashiversion22.midori:after {
border-color: transparent transparent #bcffbc transparent;
top:65px;
}

.chat-fukidashiversion22.daidai {
background-color: #fff0c6;
}

.chat-fukidashiversion22.daidai:after {
border-color: transparent transparent #fff0c6 transparent;
top:65px;
}

.chat-fukidashiversion22.momo {
background-color: #FFE4E1;
}

.chat-fukidashiversion22.momo:after {
border-color: transparent transparent #FFE4E1 transparent;
top:65px;
}

.chat-fukidashiversion22.shiro {
background-color: white;
}

.chat-fukidashiversion22.shiro:after {
border-color: transparent white transparent transparent;
top:65px;
}

.chat-fukidashiversion22.komugi {
background-color: wheat;
}

.chat-fukidashiversion22.komugi:after {
border-color: transparent transparent wheat transparent;
top:65px;
}

.chat-fukidashiversion22.rakuda {
background-color: beige;
}

.chat-fukidashiversion22.rakuda:after {
border-color: transparent transparent beige transparent;
top:65px;
}

.chat-fukidashiversion22.khaki {
background-color: khaki;
}

.chat-fukidashiversion22.khaki:after {
border-color: transparent transparent khaki transparent;
top:65px;
}
/* ↑追記ここまで↑ */

↑ソースここまで

 

 
produced by eigoblock

IMG_blokkun-minix2