CSS3でiPhoneの携帯電話を描画する

ヒント：このヒントを見ると、現在の記事が元のemlogブログシステムから移行されたことを示しています。記事の公開日が古すぎて、レイアウトや内容が完全でないかもしれませんので、ご了承ください。

CSS3 で iPhone のスマートフォンを描く

日付：2017-7-3 阿珏 css ブラウズ：1825 回コメント：1 件

まずは効果図をご覧ください。(これは絶対に画像ではありません。ええ〜、この言葉はなんだか変ですね〜)

私に iPhone の何番目かを尋ねないでください、私もわかりません、使ったことがないので、わかりますよね。

CSS スタイル部分#

#phone{
	width:250px;
	height:500px;
	background-color:#2E2E2E;
	border:10px solid #3B3B3B;
	margin:100px auto;
	border-radius:30px;/*div要素の角丸ボーダーを設定*/
}

#camera{
	width:8px;
	height:8px;
	background-color:#1A1A1A;
	border-radius:50%;
	border:2px solid #505050;
	margin:10px auto;/*上マージン10px、左右中央揃え*/
}

#receiver{
	width:80px;
	height:8px;
	border:2px solid #505050;
	margin:10px auto;
	border-radius:10px;
	background-color:#1A1A1A;
}

#screen{
	width:225px;
	height:385px;
	background-color:#0A0A0A;
	border:3px solid #1C1C1C;
	margin:10px auto;
}

#btn{
	width:40px;
	height:40px;
	background:#1A1A1A;
	border-radius:50%; /*幅と高さが同じ場合、円形になる*/
	margin:10px auto;
}

/*:beforeセレクタは、選択された要素の前にコンテンツを挿入します。*/
#btn:before{
	width:22px;
	height:22px;
	border:2px solid white;
	border-radius:30%;
	content:""; /*挿入するコンテンツが空でも書く必要があります。そうしないと表示されません。*/
	display:inline-block;
	margin-top:7px;
	margin-left:7px;
}

HTML 部分#

<div id="phone">
	<div id="camera"></div><!--カメラ部分-->
	<div id="receiver"></div><!--受話器部分-->
	<div id="screen"></div><!--画面部分-->
	<div id="btn"></div><!--ボタン部分-->
</div>

後でちょっと遊び心を追加しました
ホームボタンをクリックすると、スクリーンが点灯し、5 秒後に再びスクリーンが消えます
点灯状態の効果図ですが、もちろん中央のものは画像です (私のスマートフォン)

JavaScript 部分#

ボタン部分の div に onclick イベントをバインドし、以下の関数を呼び出します。

var btn_obj = document.getElementById("screen");
function btn(){
	btn_obj.style.background = "url(1.jpg)";
	btn_obj.style.backgroundSize = "225px 385px";
	setTimeout("black()",5000);
}

function black(){
	btn_obj.style.background = "none";
	btn_obj.style.backgroundColor = "#0A0A0A";
}

ユーザーコメント：

不朽千秋 3 年前 (2018-05-19)
話題の emlog 記事では HTML コードを使えるのではないですか？プレビューを作成できます [#aru_53]