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

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

３つ目のセルクリック・・・長いセリフ用のポップウィンドウ（pointkaisetsufaceresponsivelonglines2no1～5、pointkaisetsufaceresponsivemojilonglines2no1～5）

ページをリロードすると、人物イラストが表示されない。
（スクショ等は何度でも表示されるのに）

※ショートコードillust_bubble subhead=”” align=”right” color=”skyblue” badge=”point” illst=”normal-m1-l”でも同様の現象が起こる

参考サイト：https://ui.appleple.blog/markup/entry-93.html
itojisan.xyz/trouble/12922/　→　important を入れてもダメ、background-colorもダメ

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

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

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

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

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

第２問

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

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

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

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

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

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

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

×

I は 『私は、私が』という意味です。
↑縦並び
↓横並び
I は 『私は、私が』という意味です。
スマホだと右側にセリフが飛び出してしまう

I

× このウィンドウを とじる

×

met は meet 『会う』の過去形
↑version99
PC画面では横並び(普通のfukidashi)、スマホ画面では縦並び(fukidashiversion22)
ポップアップウィンドウではさらに左寄り(fukidashiversion99)になるレスポンシブを作る
短いセリフ（shortserif）版

meet

× このウィンドウを とじる

×

Tom 『トム』・・・男性の人名。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
↑version99
長いセリフ（longlines）版

meet

× このウィンドウを とじる

×

Tom at school は『学校で』の意味です。shortserifにしている
 

at　　school

× このウィンドウを とじる

×

Tom last week は『来週』という意味です。longlinesにしている
 

last　　week

× このウィンドウを とじる

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

以下は、顔ありワンポイント解説の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