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

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

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

HTMLコード

ここにキャプチャ画像

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

CSSコード

.sumaho-waku img, .sumaho-waku:after, .sumaho-waku:before {
	max-width: 200px;/*スマホ幅の最大値*/
	background-color: #111;/*スマホの色*/
	color: #666;/*◎ボタンの色*/
	display: block;
}
.sumaho-waku img {
	width: 100%;
	height: auto;
	padding: 0 5px;
	box-sizing: border-box;
}
.sumaho-waku:before, .sumaho-waku:after {
	display: block;
	text-align: center;
	font-family: 'MS PGothic', sans-serif;
	line-height: 1em;
}
.sumaho-waku:before {
	content: '…';
	font-size: 30px;
	border-radius: 30px 30px 0 0;
	height: 30px;
}
.sumaho-waku:after {
	font-size: 50px;
	content: "◎";
	border-radius: 0px 0px 30px 30px;
	height: 60px;
}

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

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

スマホ黄色バージョン

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

スマホ赤色バージョン

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

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

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


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

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

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

HTMLコード

ここにテキスト

CSSコード

.sumaho-waku .sumaho-moji, .sumaho-waku:after, .sumaho-waku:before {
	max-width: 200px;/*スマホ幅の最大値*/
	background-color: #111;/*スマホの色*/
	color: #666;/*◎ボタンの色*/
	display: block;
}
.sumaho-waku .sumaho-moji {
	background-color: #fff;/*スマホ画面の背景色*/
	border-left: 5px #111 solid;/*スマホの色*/
	border-right: 5px #111 solid;/*スマホの色*/
	height: 320px;/*スマホ画面の高さ*/
	font-size: 14px;/*画面内のフォントサイズ*/
	width: 100%;
	padding: 5px;
	overflow: auto;
	box-sizing: border-box;
}
.sumaho-waku:before, .sumaho-waku:after {
	display: block;
	text-align: center;
	font-family: 'MS PGothic', sans-serif;
	line-height: 1em;
}
.sumaho-waku:before {
	content: '…';
	font-size: 30px;
	border-radius: 30px 30px 0 0;
	height: 30px;
}
.sumaho-waku:after {
	font-size: 50px;
	content: "◎";
	border-radius: 0px 0px 30px 30px;
	height: 60px;
}

-CSS