Flexboxに入れた吹き出しにメッセージを追従させる

    

        
目次

メッセージが吹き出しからはみ出る
        
朝ごはん、
何食べよう？
        
    
    

        
メッセージが吹き出しに追従
(画像サイズは固定)
        
            
朝ごはん、
何食べよう？
            
        
    
    

        
メッセージが吹き出しに追従
(画像サイズが拡大・縮小)
        
            
朝ごはん、
何食べよう？
            
        
    

.parent {
    max-width: 970px;
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.child {
    min-width: 30%;
    flex-grow: 1;
    text-align: right;

    border:1px solid #000;
    padding: 5px;
    margin: 0 5px;
}

.child h2 {
    text-align: center;
    line-height: 1.4rem;
    font-weight: bold;
    padding: 10px;
    border-bottom: 1px dotted #000;
}


.child-left img { /* 画像サイズは固定 */
    width : calc(742px * 0.20);
    height: calc(800px * 0.20);
}

.child-center img { /* 画像サイズは固定 */
    width : calc(742px * 0.20);
    height: calc(800px * 0.20);
}

.child-right img { /* 画像サイズはflexboxの伸縮に合わせて拡大・縮小 */
    width : 100%;
    height: auto;
}



/* メッセージが吹き出しからはみ出る */
.child-left {
    position: relative;
}

.child-left p {
    /* flexboxの子要素(.child-left)の左上が基準となるので、
       flexboxが伸びるとメッセージが吹き出しからはみ出てしまう */
    position: absolute;
    top: 80px;
    left: 160px;
}


/* メッセージが吹き出しに追従 */
.child .message-wrap { /* メッセージと吹き出しを囲う */
    position: relative;
    display: inline-block;
}

/* (画像サイズは固定) */
.child-center .message-wrap p {
    /* 「吹き出しとメッセージの囲い(.message-wrap)」の左上が基準となるので、
       この場合はメッセージから吹き出しがはみ出ない */
    position: absolute;
    top: 40px;
    left: 30px;
}


/* (画像サイズが拡大・縮小) */
.child-right .message-wrap p {
    font-size: 32px;

    position: absolute;
    top: 80px;
    left: 60px;
}

/* 画像サイズが可変なので、画像サイズによってはメッセージが吹き出しからはみ出る。
   それを防ぐために@media()でメッセージのフォントサイズや位置を微調整する */
@media(max-width: 910px) {
    .child-right .message-wrap p {
        font-size: 28px;

        top: 70px;
        left: 50px;
    }
} 

@media(max-width: 820px) {
    .child-right .message-wrap p {
        font-size: 24px;

        top: 70px;
        left: 40px;
    }
} 

@media(max-width: 730px) {
    .child-right .message-wrap p {
        font-size: 20px;

        top: 60px;
        left: 50px;
    }
} 


@media(max-width: 680px) {
    .child-right .message-wrap p {
        font-size: 18px;
    }
} 

@media(max-width: 600px) {
    .child-right .message-wrap p {
        font-size: 16px;

        top: 50px;
        left: 40px;
    }
} 

@media(max-width: 520px) {
    .child-right .message-wrap p {
        font-size: 14px;

        top: 40px;
        left: 40px;
    }
}