質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1287閲覧

【チャットデザイン】メッセージ数が少ない場合、縦に余白を取りたい

pecchan

総合スコア555

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/03/17 20:54

css素人に近い初心者です。

こちらを参考にLINE風のチャットデザインを実装しました。
会話はそれらしくなったのですが、会話がまだ無い状態や、会話が少ない場合に下のようにテキストボックスまでの距離がせまく見栄えが悪いです。

######会話が無い状態
イメージ説明

######会話が少ない状態
イメージ説明

一般的なチャットアプリのように、会話数が少ない場合はある程度、縦の余白を取りたいです。
下のようなイメージです。
イメージ説明

このようにする場合の方法がまったく分かりません。
考え方だけでも結構なのでアドバイスいただけないでしょうか?
先輩方宜しくお願いします。

以下がソースになります。
scssは、ほとんど参考先のまんまです。

scss

1@charset "UTF-8"; 2 3/*///////////////////////////////////////////////// 4//LINE風チャット画面(会話方式)を記事に表示する方法 5/////////////////////////////////////////////////*/ 6 7// color 8$titleColor: #273246; //タイトル背景色 9$backColoer: #7494c0; // 背景色 10$myTextColor: #8de055; // 吹き出しの色 11 12/*///////////////////////////////////////////////*/ 13 14.line__container { 15 padding:0; 16 background: $backColoer; 17 overflow: hidden; 18 //max-width: 400px; 19 margin: 0px auto; 20 font-size: 80%; 21 22 /* タイトル部分 */ 23 .line__title { 24 background: $titleColor; 25 padding: 10px; 26 text-align: center; 27 font-size: 150%; 28 color: #ffffff; 29 } 30 /* スタンプ画像最大幅 */ 31 .stamp img { 32 max-width:150px; 33 } 34 35 /* 会話部分 */ 36 .line__contents { 37 padding: 10px; 38 overflow: hidden; 39 line-height: 135%; 40 41 /* 42 &.scroll { 43 height: 500px; 44 overflow-y: scroll; 45 } 46 */ 47 /* 相手の会話 */ 48 .line__left { 49 //width: 100%; 50 position: relative; 51 display: block; 52 margin-bottom: 5px; 53 max-width: 50%; 54 clear: both; 55 /* 既読エリア */ 56 .date { 57 content: ''; 58 position: absolute; 59 display: block; 60 width: 100px; 61 text-align: right; 62 right: -90px; 63 bottom: 0px; 64 font-size: 80%; 65 color: #ffffff; 66 } 67 68 /* アイコン画像 */ 69 figure { 70 width: 50px; 71 position: absolute; 72 top: 15px; 73 left: 0; 74 padding: 0; 75 margin: 0; 76 /* 正方形を用意 */ 77 img{ 78 border-radius: 50%; 79 width: 50px; 80 height: 50px; 81 } 82 } 83 84 .line__left-text { 85 margin-left: 70px; 86 87 .name { 88 font-size: 80%; 89 color: #ffffff; 90 } 91 } 92 /* コメントエリア */ 93 .text { 94 margin: 0; 95 position: relative; 96 padding: 10px; 97 border-radius: 20px; 98 background-color: #ffffff; 99 /* 吹き出し */ 100 &::after { 101 content: ''; 102 position: absolute; 103 display: block; 104 width: 0; 105 height: 0; 106 left: -10px; 107 top: 10px; 108 border-right: 20px solid #ffffff; 109 border-top: 10px solid transparent; 110 border-bottom: 10px solid transparent; 111 } 112 113 } 114 } 115 /* 自分の会話 */ 116 .line__right { 117 position: relative; 118 display: block; 119 margin: 5px 0; 120 max-width: 75%; 121 float: right; 122 margin-right: 15px; 123 clear: both; 124 /* コメントエリア */ 125 .text { 126 padding: 10px; 127 border-radius: 20px; 128 background-color: $myTextColor; 129 margin: 0; 130 margin-left: 80px; 131 /* 吹き出し */ 132 &::after { 133 content: ''; 134 position: absolute; 135 display: block; 136 width: 0; 137 height: 0; 138 right: -10px; 139 top: 10px; 140 border-left: 20px solid $myTextColor; 141 border-top: 10px solid transparent; 142 border-bottom: 10px solid transparent; 143 } 144 145 } 146 /* 自分がスタンプを送る時 */ 147 .stamp { 148 position: relative; 149 margin-left: 80px; 150 } 151 /* 既読エリア */ 152 .date { 153 content: ''; 154 position: absolute; 155 display: block; 156 width: 100px; 157 text-align: right; 158 left: -30px; 159 bottom: 0px; 160 font-size: 80%; 161 color: #ffffff; 162 } 163 } 164 } 165} 166

html

1 <div class="main"> 2 <div class="message-show-main"> 3 <div class="line__container"> 4 <div class="line__title">ここにタイトル</div> 5 <div class="line__contents "> 6 <div class="line__left"> 7 <figure><img src="/images/aaa.png" /></figure> 8 <div class="line__left-text"> 9 <div class="name">相手ユーザ</div> 10 <div class="text">はじめまして。宜しくお願いします。</div> 11 </div> 12 <span class="date">2020年5月12日0:30</span> 13 </div> 14 <!-- ./line__left --> 15 16 <div class="line__right"> 17 <div class="text">こちらこそ宜しくお願いします。</div> 18 <span class="date">2021年11月23日0:30</span> 19 </div> 20 <!-- ./line__right --> 21 </div> 22 <!-- ./line__contents --> 23 <br><br><br><br><br><br><br><br><br><br><br><br><br> 24 <div class="message-show-text__inner"> 25 <input type="text" class="input-text" placeholder="メッセージを入力"> 26 </div> 27 <button class="btn btn-primary btn-block">送信</button> 28 </div> 29 <!-- /.line__container --> 30 31 </div> 32 <!-- / .message-show-main--> 33 </div> 34 <!-- / .main --> 35

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

いろいろなやり方があるので、私ならこうする、という回答になりますが。

入力欄をラップして、

html

1<div class="wrapper"> 2 <div class="message-show-text__inner"> 3 <input type="text" class="input-text" placeholder="メッセージを入力"> 4 </div> 5 <button class="btn btn-primary btn-block">送信</button> 6</div>

一番下に固定配置し、

css

1.wrapper { 2 position: fixed; 3 bottom: 0; 4}

ルートの高さを拡張して背景色をつける。(ルートの背景色はビューポートに反映されるので)

css

1html, body { 2 height: 100%; 3 background: $backColoer; 4}

なお、このやり方だと入力欄が固定配置で浮いているので、下の要素に重なってしまうデメリットがあります。適切にマージンなどを取る必要があります。

投稿2021/03/18 02:10

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pecchan

2021/03/18 06:28

有難う御座います。 色んな方法があるんですね。 試したところ仰る通りフッタの下に重なりました。 調整が必要なのが分かりましたが、自分のスキルでは無理そうです。 ですが、固定というのは大変素晴らしいと分かりました。 時間が出来たら、勉強してこちらの方法に変えたいと思います。 大変参考になりました。有難う御座います。
Lhankor_Mhy

2021/03/18 06:48

ご解決されて何よりです。 下の余白ですが、padding-bottomで取るのがいいと思います。将来的に取り組む際にご参考になれば幸いです。
pecchan

2021/03/18 07:02

有難う御座います。 はい!参考にさせていただきます!
guest

0

ベストアンサー

会話部分に最低限の高さを指定するCSSを足すと良いかも?
※他にも書き方はあります。

CSS

1.line__contents { 2  min-height: 60vh; 3 padding: 10px;

以下補足です。
min-height→最低限保持して欲しい高さ
60vh→ 100vhで画面の上から下まで(ちょっと語弊があるので注意)

投稿2021/03/17 23:05

編集2021/03/17 23:11
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pecchan

2021/03/18 06:26

有難う御座います。 vhという単位について少し調べてみました。 更に勉強してみます。有難う御座いました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問