【CSS】画像にスマホ風の枠を付けるレスポンシブ対応デザイン

スマートフォンのキャプチャ画像に:beforeと:afterの疑似要素で枠をつけ、それっぽく見せる方法。
コピペで簡単に実装できます。

キャプチャ画像にスマホ枠をつける

HTMLコード 

<div class="sumaho-waku">
    <img src="image.jpg">
</div>

キャプチャ画像は<img src=で貼ります。
上のデモでは、画像を縮小表示し、元画像のリンクをつけています。

CSSコード

.sumaho-waku {
    --phone-color: #111; /* スマホの色 */
    --button-color: #666; /* ◎ボタンと…の色 */
    --max-width: 200px; /* スマホ幅の最大値 */
    --border-radius: 30px; /* 角丸の大きさ */
}
.sumaho-waku {
    position: relative;
    max-width: var(--max-width);
    background-color: var(--phone-color);
    padding: 30px 5px 60px;
    border-radius: var(--border-radius);
    box-sizing: border-box;
}
.sumaho-waku img {
    display: block;
    width: 100%;
    height: auto;
}
.sumaho-waku::before,
.sumaho-waku::after {
    position: absolute;
    left: 0;
    right: 0;
    color: var(--button-color);
    text-align: center;
    font-family: 'MS PGothic', sans-serif;
    line-height: 1;
}
.sumaho-waku::before {
    content: '…';
    top: 5px;
    font-size: 30px;
}
.sumaho-waku::after {
    content: '◎';
    bottom: 5px;
    font-size: 50px;
}

4行目の「スマホ幅の最大値」を大きくした場合、画面サイズに応じて画像が伸縮されます。

5行目と6行目の間にmargin:0 auto;を加えると、スマホが中央揃えになります。

スマホ黄色バージョン

スマホの色は#eeee22に、
◎ボタンの色は#ff4500に設定。

スマホ赤色バージョン

スマホの色は#cc0000に、
◎ボタンの色は#eeee22に設定。

スマホ枠内にテキストを入れる

スマホ内にテキストが表示できます。


Font Awesomeのアイコンフォントや文字タグも挿入可能。

テキストが長いとスクロールバーが表示されます。

サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル
サンプル

HTMLコード



ここにテキスト

CSSコード

.sumaho-waku {
    --phone-color: #111; /* スマホの色 */
    --button-color: #666; /* ◎ボタンと…の色 */
    --screen-color: #fff; /* スマホ画面の背景色 */
    --max-width: 200px; /* スマホ幅の最大値 */
    --border-radius: 30px; /* 角丸の大きさ */
    --screen-height: 320px; /* スマホ画面の高さ */
    --font-size: 14px; /* 画面内のフォントサイズ */
}
.sumaho-waku {
    position: relative;
    max-width: var(--max-width);
    background-color: var(--phone-color);
    padding: 30px 5px 60px;
    border-radius: var(--border-radius);
    box-sizing: border-box;
}
.sumaho-waku::before,
.sumaho-waku::after {
    position: absolute;
    left: 0;
    right: 0;
    color: var(--button-color);
    text-align: center;
    font-family: 'MS PGothic', sans-serif;
    line-height: 1;
}
.sumaho-waku::before {
    content: '…';
    top: 5px;
    font-size: 30px;
}
.sumaho-waku::after {
    content: '◎';
    bottom: 5px;
    font-size: 50px;
}
.sumaho-waku .sumaho-moji {
    background-color: var(--screen-color);
    height: var(--screen-height);
    font-size: var(--font-size);
    padding: 5px;
    overflow: auto;
}

-CSS