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

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

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

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

410閲覧

CSSでBoxの横に文字

teityann1225

総合スコア158

CSS3

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2017/09/26 14:54

編集2017/09/27 03:59

###やりたいこと
chat-face imgの横に文字を表示させたい。
文字を置いてみたのですが、ボックスなどその他のデザインが崩れてしまい、ダメでした。
よろしくお願いします。
※追記
横というのは画像の左側です。

###コード

css

1/* チャットレイアウト */ 2.chat-box { 3 width: 100%; 4 height: auto; 5 overflow: hidden; /*floatの解除*/ 6 margin-bottom: 20px; 7} 8.chat-face { 9 float: left; 10 margin-right: -120px; 11} 12.chat-face img{ 13 border-radius: 30px; 14 border: 1px solid #ccc; 15 box-shadow: 0 0 4px #ddd; 16} 17.chat-area { 18 width: 100%; 19 float: right; 20} 21.chat-hukidashi { 22 display: inline-block; /*コメントの文字数に合わせて可変*/ 23 padding: 15px 20px; 24 margin-left: 120px; 25 margin-top: 8px; 26  font-size:16pt 27 /* border: 1px solid gray; ←削除 */ 28 border-radius: 10px; 29 position: relative; /*追記*/ 30 background-color: #D9F0FF; /*追記*/ 31} 32/* ↓追記↓ */ 33.chat-hukidashi:after { 34 content: ""; 35 position: absolute; 36 top: 50%; left: -10px; 37 margin-top: -10px; 38 display: block; 39 width: 0px; 40 height: 0px; 41 border-style: solid; 42 border-width: 10px 10px 10px 0; 43 border-color: transparent #D9F0FF transparent transparent; 44} 45.someone { 46 background-color: #BCF5A9; 47} 48.someone:after { 49 border-color: transparent #BCF5A9 transparent transparent; 50}

HTML

1<div class="chat-box"> 2 <div class="chat-face"> 3名前  <!--☚ここです。--!> 4 5<img src="画像URL" alt="画像" width="90" height="90"> </div> 6<div class="chat-area"> 7<div class="chat-hukidashi">テスト 8</div></div></div> 9

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

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

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

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

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

taktaktak

2017/09/26 19:05 編集

「横」とは画像の左でしょうか?右でしょうか?吹き出しの中でしょうか?上揃え、 中央揃え、下揃えのどれでしょうか?  具体的にどこに表示させたいのか正確な場所がわからないので、追記願います。
teityann1225

2017/09/27 04:03

横というのは画像の左側です。 Lineポイ感じにしたいです。
guest

回答1

0

ベストアンサー

.chat-area の width: 100%; を削除し、各要素の幅を調整。
今風にflexboxで実装するのも良いかも。

投稿2017/09/27 00:01

takna

総合スコア784

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問