LINEのトーク画面風のデザイン

LINEのトーク画面風のページをCSSで組み立てた。たくさんの人が同様のことを実現しているだろうが、あえて検索せず、自力でやろうと試みた。

結果的には以下のような画面を、Bootstrap5上で作成したが、Bootstrapはあまり関係がない。

iPhone幅で表示

BootstrapにはPopoversという、リッチなツールチップを表示する機能がある。ちょうどふきだしの形になっているので、最初はこれを利用しようとした。LINEのふきだしっぽく成形し、クリックイベントと関係なく初期表示されるようJavaScriptで制御し、完成してから気づいた。ツールチップはクリック時に初めて表示されるのだから当たり前だが、画面表示時はふきだし分のスペースがない状態で表示され、クリックすることでふきだしがほかの要素を隠して表示されるのだ。初期表示時にふわっと表示されるアニメーションも悪くはないが余計だ。結局、振り出しに戻って自前で組み立て直した。しかしデザインはこのpopoverをおおいに参考にした。

まず、どう実現するのか想像できなかったふきだしのツノの部分。なんと、borderで表現している。

値のない .balloon-arrow ブロックを設置し、::before、::after疑似要素でborderを指定する。上線、右線、下線、左線のうち、上と下をそれぞれブロックの半分の太さにする。右は全幅、左はゼロだ。beforeでは枠線と同様の透過した黒色で、afterは少しずらした位置で白にする。

わかりやすいよう、before要素のborderに色を付けてみよう。

上記のスタイルの抜粋が以下である。

.balloon-arrow::before {
	border-width: .5rem .8rem .5rem .2rem;
	border-color: black rgba(0,0,0,.25) black black;
}
.balloon-arrow::after {
	left: 1px;
	border-width: .5rem .8rem .5rem .2rem;
	border-color: yellow #FFF green blue;
}

borderで三角形を作るのにはなるほどと思った。組み合わせ方で矢印なども表現できそうだ。

コードの全容はGitHubにアップした

コメントする