CSSでの実装方法を勉強したので解説します。CSSでの実装方法を勉強したので解説します。CSSでの実装方法を勉強したので解説します。Tumblr僕はいつも、記事の最後に「あとがき」をつけているのですが、画像から吹き出し付きで書くようにしています。これ、モバイル版ではちゃんと表示されていないのを分かっていながら放置してたんです。CSSを利用した吹き出しなので、仕組みがなかなか難しく、後回しになってしまっていました。この仕組を理解しないことには、放置しているモバイル版の対応もできないまま。それはまずいので、ようやく重い腰をあげて勉強してみました。あとがきの表示PC版ではこんな感じの表示になってます。それに対して、モバイル版はこんな感じでした。吹き出しになってませんね。Lab2PC版だとスペースが広いので、画像の右側に吹き出しをおけるのですが、モバイル版は横幅が狭くなるので下側に吹き出しを置いたほうが見やすくなります。すると、吹き出し特有の三角部分(ピョコッと出てる部分)の場所も、左辺から上辺に移動しなければいけません。画像だと書き直せばいいだけですが、CSSで生成していて、この構造がこれまたなかなか面倒。変えればできるだろうと思ってたら、仕組みを理解しないままやろうとしたら全然できないんです。手をつけらられずにいたのです。勉強したなので、まず理解することから入りました。参考になったサイトがこちら。基礎はこのページだけで理解できます。上のページの説明では、単色の吹き出しは作れるのですが、僕がやっているような「白背景に枠線付き」の吹き出しは作れません。三角の部分はあくまで塗りつぶししかできないので、こんな感じにしか作れないんです。四角のほうは、ボックスなので枠線付きにできるのですが、三角部分はこんな感じになっちゃう。