CSSで対話形式のフキダシデザイン
今日はフキダシデザインの作り方を書きます
あ。前にも使っておきながら説明しなかったやつですね?
ケチだなーと思いました(笑)
今日説明するから許して…。以下がCSSとHTMLです。
スポンサーリンク
CSSとHTML
CSS
/*============================================================ フキダシデザイン ============================================================*/ .arrow_answer, .arrow_question { position: relative; background: #fff; border: 1px solid #c8c8c8; padding: 30px 25px; border-radius: 10px; width: 70%; font-size: 13px; } .arrow_question { float: right; margin-right: 20px; } .arrow_answer:after, .arrow_answer:before, .arrow_question:after, .arrow_question:before { top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_question:after, .arrow_question:before { right: 100%; } .arrow_answer:after, .arrow_answer:before { left: 100%; } .arrow_answer:after, .arrow_question:after { border-color: rgba(255, 255, 255, 0); border-width: 15px; margin-top: -15px; } .arrow_answer:after { border-left-color: #fff ; } .arrow_question:after { border-right-color: #fff ; } .arrow_answer:before, .arrow_question:before { border-color: rgba(200, 200, 200, 0); border-width: 16px; margin-top: -16px; } .arrow_answer:before { border-left-color: #c8c8c8; } .arrow_question:before { border-right-color: #c8c8c8; } .question_image { float: left; } .answer_image { float: right; margin-right: 20px; } .answer_image img, .question_image img { border-radius: 50px; } .question_Box { margin-bottom: 25px; overflow: hidden; }
HTML
<div class="question_Box"> <div class="question_image"><img src="画像のURL" alt="質問者の写真" width="90" height="90"/></div> <div class="arrow_question"> ここに会話内容 </div><!-- /.arrow_question --> </div><!-- /.question_Box --> <div class="question_Box"> <div class="answer_image"><img src="画像のURL" alt="解答者の写真" width="90" height="90" /></div> <div class="arrow_answer"> ここに会話内容 </div><!-- /.arrow_answer --> </div><!-- /.question_Box -->
会話している人のアイコン画像は別途用意して
img src="画像のURL"
のところに入れてください。四角形の画像を用意してもらえば、CSSで丸く表示されます!
あとがき
適当に作ったから、特にスマホだと会話の長さによってはアイコン画像の位置がバラバラだね
誰かが改良してくれるんじゃないですか?丸投げしちゃえ!笑。
そうだね。どなたか改良版をお願いします!笑。
もっとシンプルなのがいいなら
.entry-content ul, .entry-content ol { position: relative; margin: 15px 30px 15px 0; padding: 12px 15px; background: #e6e6e6; list-style: none; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; } .entry-content li { word-break: break-word } .entry-content li img, .entry-content li iframe, .entry-content li object { float: none; max-width: 100%; margin: 0; } .entry-content ul li + li, .entry-content ol li + li, .entry-content ul ul, .entry-content ul ol, .entry-content ol ul, .entry-content ol ol { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid #ccc; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .entry-content ol ul, .entry-content ol ol { border-color: #b5d96d } .entry-content ul li + li, .entry-content ol li + li { border: 0; padding: 0; margin-top: 5px; } .entry-content ul:before, .entry-content ol:before { position: absolute; content: ''; display: block; bottom: 10px; width: 12px; height: 12px; -webkit-background-size: 12px 12px; -moz-background-size: 12px 12px; -ms-background-size: 12px 12px; -o-background-size: 12px 12px; background-size: 12px 12px; } .entry-content ul:before { background: url(http://cdn-ak.f.st-hatena.com/images/fotolife/k/kudakurage/20130228/20130228120842.gif); left: -12px; } .entry-content ol { margin: 15px 0px 15px 30px; background: #d3ee9c; } .entry-content ol:before { background: url(http://cdn-ak.f.st-hatena.com/images/fotolife/k/kudakurage/20130228/20130228120843.gif); right: -12px; } .entry-content ul ul:before, .entry-content ul ol:before, .entry-content ol ul:before, .entry-content ol ol:before { display: none } .entry-content { overflow: visible; padding-left: 25px; padding-right: 25px; margin-left: 0; margin-right: 0; } @media screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 1.5) { .entry-content ul:before { background: url(http://cdn-ak.f.st-hatena.com/images/fotolife/k/kudakurage/20130301/20130301120004.gif) } .entry-content ol:before { background: url(http://cdn-ak.f.st-hatena.com/images/fotolife/k/kudakurage/20130301/20130301120005.gif) } }