パクりって人聞き悪いな でもパクりなんだよなあ |
こんな感じです.
Sponsored Link
話のはじまり
話のはじまりはというと,SEL35F28Z購入事件の記事を書いたとき,自分の意思決定の正当性を証明するために同じくカメラが趣味の同期とのLINEでの会話(5万は安いよな→安い)を紹介しようと思ったこと.
結局は手の込んだことをするより一刻も早く購入報告をアップしたかったのでLINE風会話の表現は見送ったのだが,ふと気になって「HTMLとCSSだけでLINE風会話を実現できないか」と思ったら案の定先人が実現していた.
小改造ビフォーアフター
↑に紹介した夜中たわし氏の公開したコードは主にはてなブログ向け.かつスタンプ機能やアイコンまで再現する本格派.しゅごい.
ただ私はというと,まずはてなブログじゃないし,スタンプ機能を使うつもりもなくただただ会話っぽいものを再現できれば良い.アイコンもいらない.というか画像を用意するのがめんどくさい(ものぐさ).
というわけで,(はてなブログ向けというわけではなく)一般論的に,かつ会話部分だけをてきとーに再現するようにたわし氏のコードをパクって小改造.
それがこちら.
.line-me, .line-opponent { clear:both; position: relative; display: inline-block; max-width: 80%; max-width: -webkit-calc(100% - 60px); max-width: calc(100% - 60px); box-sizing: border-box; -webkit-box-sizing: border-box; padding: 5px 10px; border-radius: 15px; background-size: cover; z-index: 1; } .line-me { background-color: #85ff49; float: right; margin: 5px 15px 5px 60px; } .line-opponent { background-color: White; float: left; margin: 5px 5px 5px 20px; } .line-opponent::before { position: absolute; white-space: nowrap; top: -22px; display: block; color: white; left: 0px; } .line-opponent::after { position: absolute; content: ""; width: 45px; height: 45px; top: -17px; border-radius: 40px; background-size: cover; background-position: center center; background-repeat: no-repeat; left: -55px; } .me-toge::before, .opponent-toge::before { z-index: 1; content: ""; position: absolute; top: 10px; width: 0; height: 0; border-top: 2px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid transparent; } .me-toge::before { border-left: 10px solid #85ff49; right: -14px; } .opponent-toge::before { border-right: 10px solid White; left: -14px; }
これをCSSに書き込んだ上で,以下のようなHTMLを書く.
<table style="width:100%; max-width:400px; margin:0 auto;"> <tr> <td style="background:#add8e6"> <p class="line-me me-toge">パクりって人聞き悪いな</p> <p class="line-opponent opponent-toge">でもパクりなんだよなあ</p> <div style="clear:both;"></div> </td> </tr> </table>
という感じ.
基本的にはたわし氏のコードをパクってきた上で,スタンプやアイコンを消すためにあちこち消してみたり,少し余白をいじって配置を調整したりしただけ.アイコンとか使わないならtogeクラスは統合できそうな気がするが,とりあえずこのままで表示されるのでノータッチで.
本格的に再現したいなら本家のたわし氏のコードを使ったほうが良いと思うが,もしアイコン画像とか使わずに簡易的に再現したいならこんな感じで如何でしょうか.
いい加減CSSはちゃんと勉強したい.
0 件のコメント:
コメントを投稿