CSS3でPC,iPhone,iPadのモックを作ってみたよ – 色んなサイズ対応版 – How to make iPhone/iPad/PC mockup with CSS3

この記事は3年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のTipsは【CSS3でPC,iPhone,iPadのモックを作ってみたよ – 色んなサイズ対応版 – How to make iPhone/iPad/PC mockup with CSS3】です。CLIPの詳細ページにあるPCのiPhone,iPad版をCSS3でつくりましたので共有しておきます。

実装方法

色々なサイズが必要かと思いましたので、デモでは様々なサイズに変更できるようにしています(推奨:chrome)。基本的にはコードのコピーペーストで実現できます。画面内に画像やテキスト等も自由に配置できます。

HTML
<div class="pcbody">
<div class="partshd">
<div class="partsvw">
<div class="partsliquid">
画面内、ここに画像やテキストを配置
</div>
</div>
<div class="partsicon">A</div>
</div>
<div class="partsft">
<div class="parts1"></div>
<div class="parts2"></div>
<div class="parts3"></div>
</div>
</div>
CSS
.pcbody {width: 540px;}
.pcbody .partsvw {background: #111;padding: 20px 0;border-radius: 20px 20px 0px 0px;margin: 30px 0 0 0; position: relative; overflow: hidden;}
.pcbody .partsliquid{width: 500px; background: #47689b;min-height: 300px; margin: 0 auto; overflow: hidden;}
.pcbody .partsicon {background: #eaeaea;text-align: center;line-height: 60px;height: 60px;border-radius: 0px 0px 20px 20px;}
.pcbody .partsft div{margin: 0 auto;background: #eaeaea;width: 100px;}
.pcbody .partsft .parts1 {height: 10px;background: #ccc;}
.pcbody .partsft .parts2 {height: 20px;}
.pcbody .partsft .parts3 {height: 5px;width: 200px;}

HTML
<div class="spbody">
<div class="parts1 parts"></div>
<div class="parts2 parts"></div>
<div class="parts3 parts"></div>
<div class="parts4 parts"></div>
<div class="partsbd">
<div class="partshd">
<div class="partsspe"></div>
<div class="partscam"></div>
</div>
<div class="partsvw">
画面内、ここに画像やテキストを配置
</div>
<div class="partsbtn"></div>
</div>
</div>
CSS
.spbody{width: 230px; background: #111; border-radius: 30px; position: relative; border: 2px solid #C4C4C4;}
.spbody .partsbd{width: 190px; margin: 0 auto;}
.spbody .partshd{height: 10px; margin: 30px 0; text-align: center; position: relative;}
.spbody .partsbd .partsspe,.spbody .partsbd .partscam{height: 10px; background: #333; border-radius: 10px; display: inline-block; position: absolute; top: 0; left:50%;}
.spbody .partsbd .partsspe{width: 10px;margin-left:-20px}
.spbody .partsbd .partscam{width: 50px;margin-left:-10px}
.spbody .partsvw{height: 300px; background: #c14a46}
.spbody .partsbtn{width: 50px; height: 50px; border-radius: 60px; background: #333; margin: 15px auto;}
.spbody .parts{position: absolute; background: #ccc; top: 50%; left: 50%;}
.spbody .parts1{width: 40px; height: 3px; margin: -230px 0 0 40px;}
.spbody .parts2{width: 4px; height: 20px; margin: -170px 0 0 -120px;}
.spbody .parts3{width: 4px; height: 15px; margin: -130px 0 0 -120px;}
.spbody .parts4{width: 4px; height: 15px; margin: -90px 0 0 -120px;}

HTML
<div class="padbody">
<div class="partsvw">
画面内、ここに画像やテキストを配置
</div>
<div class="partsbtn"></div>
</div>
CSS

.padbody{width: 460px; background: #111; border-radius: 30px; padding: 50px 0 0 0; overflow: hidden;}
.padbody .partsvw{width: 360px; height: 500px; margin: 0 auto; background: #e6c541}
.padbody .partsbtn{width: 30px; height: 30px; border-radius: 30px; background: #333; margin: 15px auto}

 
以上になります。詳しくはデモをご確認ください。