16/27

フロートの応用で吹き出しを作ってチャットノベルっぽくしてみよう！

フロートレイアウトを使ったチャット小説風にしてみます。

さて、フロートレイアウトの応用1つめです。吹き出しを作りましょう。

吹き出しは主に3つの部分から構成されています。（画像はなくても可）

吹き出し文と画像は分かるのですが、▲はどうやって実現すればよいでしょうか。

これはborderを使って実現します。

・三角形

・上三角

・下三角

・右三角

・左三角

なんでこれで三角形ができるかというと、各borderの境界の仕様を利用しています。

例えばこんな感じに、4方向を別々の色にしてみるとよくわかります。

単体で指定すると、直線になるのですが、別々の色を指定すると境界は斜めになります。

では、中身をなくすとどうなるでしょう。

中のテキストを削除して、width:0にしてみます。

はい、こんな感じに4つの三角形ができました。

なので、一つだけ三角を残したい場合は、それ以外を透明にすればいいわけです。

transparentを指定することで透明になります。

後から一方向だけ色を指定することで一つの三角形を表示させています。

なかなか最初は理解するのが大変かもしれませんが、慣れてくると大丈夫ですね。

ということで基本形はこうなります。

ただ、そのまま書いてみると

<div style="border:10px solid transparent;border-left:10px solid #B1ED8B;"></div><div style="padding:10px;background:#B1ED8B;">右コメント</div>

こんな感じに段が分かれてしまいます。

これを左右に並べたいのですが、どうしたらいいでしょう。

前回やったフロートを使います。

完成形はこうなります。

最初のdivで吹き出し三角を。次のdivでコメント文を指定しています。

width:85%　でコメント幅を調節しています。この幅が吹き出し三角を含めて100%を超えないようにするのがコツです。

また最後に<div style="clear:both;"></div>を忘れないようにしましょう。borderの色と、コメントのbackground-colorを合わせるのも忘れないように。

これは右向きでしたが、左向きはこんな感じになります。

border-left:->border-right:

float:right;->float:left;

にするだけです。

まぁフロートは並べる順番を変えればfloat:right;のままでも大丈夫です。お好きなように。

- - - ✂切り取り✂ - - -

あとはチャット小説みたいにアイコン画像も付けてみましょう。

<div style="width:15%;margin-right:1%;float:right;text-align:center;"><img src="https://22980.mitemin.net/userpageimage/viewimage/icode/i363192/" alt="i" /></div><div style="border:10px solid transparent;border-left:10px solid #eec291;margin:.5em 0 0;width:0;float:right;"></div><div style="width:71%;padding:2%;background-color:#eec291;color:#333333;font-size:1em;float:right;line-height:1.5;">こんな風にアイコンも</div><div style="clear:both;"></div>

構造としてはこうなります。

3つの部品を並べているだけですね。

画像幅をwidth:15%;、コメントをwidth:71%;で全体の幅を100%以内にしています。

marginとかpaddingも色々と試してます。

色々と調節して、PCでもスマホでも見た目よさそうな幅にしています。

こんな感じに吹き出しは作ることができます。

比率や大きさを変えるともう少しカスタマイズできるので、色々と試してみるといいと思います。

吹き出しはメッセージアプリで慣れているのと、段落が明確に区切られるので可読性が上がります。

キャラアイコンを付けると個性的な感じにできますよ。