CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけでスマートフォンなどのデバイス外観を再現する方法【サンプルコード付き】

CSSを使えば、画像やJavaScriptに頼ることなく、スマートフォン、タブレット、ノートパソコンといったデバイスの外観を再現できます。ポイントは、太いborderでベゼル（枠）を表現し、border-radiusで角丸を加え、::after疑似要素でホームボタンなどを描画することです。

実装例：スマートフォンの外観

以下のコードは、CSSのみでスマートフォン風のフレームを作成し、その画面内にiframeでWebページを表示する例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   .mobileDevice {
      position: relative;
      width: 360px;
      height: 400px;
      margin: auto;
      border: 16px rgb(7, 80, 35) solid;
      border-top-width: 60px;
      border-bottom-width: 60px;
      border-radius: 36px;
   }
   .mobileDevice:after {
      content: '';
      display: block;
      width: 35px;
      height: 35px;
      position: absolute;
      left: 50%;
      bottom: -65px;
      transform: translate(-50%, -50%);
      background: #333;
      border-radius: 50%;
      border:2px solid rgb(200, 255, 0);
   }
   .mobileDevice .screen {
      width: 360px;
      height: 400px;
      background: white;
   }
</style>
</head>
<body>
<h1 style="text-align: center;">Device look example </h1>
<div class="mobileDevice">
<div class="screen">
<iframe src="https://wikipedia.org/" style="width:100%;border:none;height:100%" />
</div>
</div>
</body>
</html>

コードのポイント解説

1. ベゼルはborderで表現

.mobileDevice クラスでは、16pxの実線ボーダーをデバイスの筐体として利用しています。特に border-top-width と border-bottom-width を60pxに指定することで、上下に太いベゼルを作り、スマートフォンらしいシルエットを実現しています。

2. 角丸と中央配置

border-radius: 36px; で端末特有の丸みを表現し、margin: auto; によって画面の中央に配置しています。

3. ホームボタンは::after疑似要素で描画

:after 疑似要素を使い、下部ベゼルの中央に円形のホームボタンを描画しています。position: absolute; と transform: translate(-50%, -50%); を組み合わせることで、位置ずれのない正確な中央配置が可能です。

4. 画面部分にはiframeを埋め込み

.screen クラスの中に iframe を配置することで、実際のWebページがデバイスの画面内に表示され、よりリアルなプレビューになります。ポートフォリオサイトでの作品紹介などにも応用できるテクニックです。

出力結果

上記のコードを実行すると、次のようなスマートフォン風の表示になります。

CSSだけでスマートフォンなどのデバイス外観を再現する方法【サンプルコード付き】

タブレットやノートPCへの応用

同じ考え方を応用すれば、他のデバイスの外観も簡単に作成できます。

  • タブレットの場合： 幅と高さを大きくし、border-radius をやや大きめに設定すると、タブレットらしい外観になります。
  • ノートパソコンの場合： 横長の画面を作り、下側に台座となる要素を追加して border-radius を小さめにすれば、ノートPC風のデザインに仕上がります。

このように、border・border-radius・疑似要素という基本的なCSSプロパティの組み合わせだけで、さまざまなデバイスのモックアップを自由自在に表現できます。

  1. CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】

    Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード

  2. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル