【Line風】メッセージやり取り画面のレイアウトを作成

Lineを使ったことがある人は多いと思います。

Lineといえば相手から来たメッセージや画像などが左側に表示され自分が送った内容は、右側に表示されるレイアウトになっています。

そして既読されたら既読のテキストが表示されます。

今回は、Lineやチャットで使われているレイアウトをhtmlとcssで再現しました。

【Line風】メッセージやり取り画面のレイアウト

html

<div class="chat">
    <div class="chat1 clearfix">
        <div class="logo">
        </div>
        <div class="comment">
            相手のメッセージです。相手のメッセージです。相手のメッセージです。相手のメッセージです。相手のメッセージです。相手のメッセージです。
        </div>
        <div class="time-box">
            <span class="time">17：00</span>
        </div>    
    </div>    
    <div class="chat2 clearfix">
        <div class="comment">
            自分のメッセージです。自分のメッセージです。自分のメッセージです。自分のメッセージです。自分のメッセージです。自分のメッセージです。
        </div>
        <div class="time-box">
            <span class="read">既読</span>
            <span class="time">17：00</span>
        </div>  

    </div>    
</div> 

css

.chat{
    min-width:500px;
    width:100%;
    box-sizing:border-box;
    padding:10px; 
    padding:10px; 
    overflow: hidden;
    background:rgb(230,230,230);
}
    
.logo{
    width:50px;
    height:50px;
    border-radius: 50%;
    background:rgb(255,255,255);
}
.chat1{
    display:flex;
    box-pack:start;
    -webkit-box-pack:start;
    overflow: hidden;
    margin:0 8px 16px 8px;
}    
    
.chat1 .comment{
    position:relative;
    max-width:200px;
    background:#fff;
    padding:8px;
    margin:0 8px 0 8px;
    border:solid 1px rgb(150,150,150);
    border-radius:8px;
}

.chat1 .time-box{
    display:flex;
    -webkit-align-items:flex-end;
    align-items:flex-end;

}
    
.chat2{
    display:flex;
    flex-direction:row-reverse;
    box-pack:end;
    -webkit-box-pack:end;
    overflow: hidden;
    margin:0 8px 16px 8px;
}     
    
.chat2 .comment{
    position:relative;
    max-width:200px;
    background:#fff;
    margin:0 0 0 8px;
    padding:8px;
    border:solid 1px rgb(150,150,150);
    border-radius:8px;
}    

.clearfix{clear:both;}

.chat1 span.time,
.chat2 span.read,
.chat2 span.time{display:block;}

サンプルを見る