作成したページをスマホの枠で囲む [HTML+CSS]

スマートフォンの枠の中にページが入っているようなレイアウトを作成する方法です．適当なページを作成して，それをスマートフォンの枠で囲むといったことを実装してみます．

f:id:kengo92i:20150913175310p:plain

準備

今回のWebページでは以下のライブラリを使用します．

Bootstrap: http://getbootstrap.com
jQuery: https://jquery.com

ディレクトリ構成は以下のようにします．

sample
├── css
│   ├── bootstrap.css
│   ├── default.css
│   └── images
│       ├── iphone-button.png
│       └── iphone-top.png
├── index.html
└── js
    ├── bootstrap.js
    └── jquery-1.11.3.min.js

4 directories, 9 files

HTMLファイル ( index.html )

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <script type='text/javascript' src="js/jquery-1.11.3.min.js"></script>
  <script type='text/javascript' src="js/bootstrap.js" ></script>
  <title>作成したページをスマホの枠で囲む</title>
</head>
<body>
  <div id="iphone-wrapper">
  <div id="wrapper">
    <header id="header">作成したページをスマホの枠で囲む</header>
    <div id="main" class="container">
      <h1>サンプル</h1>  
      <p>作成したページをスマホの枠で囲むサンプルページです．ページはスマホの枠内でスクロールすることができます．</p>
      <script> function write() { for(var i = 0; i < 100; ++i) { $('#main').append(i + '<br>'); } } write(); </script>
    </div>
    <footer id="footer">
      <div class="btn btn-default">○</div>  
      <div class="btn btn-default">○</div>  
      <div class="btn btn-default">○</div>  
      <div class="btn btn-default">○</div>  
      <div class="btn btn-default">○</div>  
    </footer>
  </div>
  </div>
</body>
</html>

既に色々書かれているため構造が分かりづらいかもしれませんが，作成したページを二重のラッパーで囲むことによってスマホの枠を作成しています．作成したページは#mainの中に作成していますが，#wrapperに overflow-y: scroll; を追加することで以下の形にすることも可能です．

<html>
<head><!-- ライブラリなど --></head>
<body>
  <div id="iphone-wrapper"> <!-- スマホの枠になるdiv -->
  <div id="wrapper"> <!-- ページ全体を囲むラッパー -->
    <!-- 作成したページ -->
  </div>
  </div>
</body>
</html>

CSS ( css/default.css )

実際に使用するCSSを以下に示します．スマートフォンの枠組みは border + box-shadow を使うことによって実現しています．ボタンなどの配置は疑似クラス :after, :before で配置出来ます．

  #wrapper {  
    position: relative;
    overflow: hidden;
    /* overflow-y: scroll; */
    max-width: 350px; /* 横幅は合わせる */
    max-height: 500px;  
    border: 1px solid #333;
  }
  #iphone-wrapper {
    position: relative;
    margin: 30px auto;
    padding: 0;
    max-width: 350px; /* 横幅は合わせる */
    border-top: 100px solid #333;
    border-left: 20px solid #333;
    border-right: 20px solid #333;
    border-bottom: 100px solid #333;
    box-shadow: 0px 0px 0px 5px #eee, 0px 0px 10px 10px rgba(33,33,33,0.4);
    border-radius: 40px;
  }
  #iphone-wrapper:before {
    position: absolute;
    content: url('images/iphone-button.png');
    bottom: -102%;
    left: 33%;
    padding: 10px;
    color: #fff;
    border-radius: 100px;
    z-index: 100;
  }
  #iphone-wrapper:after {
    position: absolute;
    content: url('images/iphone-top.png');
    top: -85px;
    left: 31%;
    padding: 10px;
    color: #fff;
    border-radius: 100px;
    z-index: 100;
  }
  #header {
    position: absolute;
    color: #fff;
    width: 100%;
    height: 50px;
    background-color: #aaa;
    padding: 10px 20px;
    z-index: 99;
  }
  #main {
    position: relative;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    padding-top: 50px;
  }
  #footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 5px 0px;  
    background-color: #aaa;
  }
  #footer .btn-default {
    width: 18%;
  }