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

CSSだけでブラウザウィンドウを再現する方法！サンプルコード付きで解説

CSSを使えば、実際のブラウザウィンドウのような見た目をWebページ上に簡単に再現できます。本記事では、macOS風のウィンドウボタン（赤・黄・緑のドット）やURL入力欄まで含めた、リアルなブラウザウィンドウUIをCSSのみで作成する方法を、完全なサンプルコードとともに解説します。

完成形のイメージ

今回作成するのは、閉じる・最小化・最大化のウィンドウボタン、アドレスバー、右側のメニュードットを備えたブラウザウィンドウです。HTMLとCSSだけで構成されており、JavaScriptは一切不要なので、初心者の方でもすぐに試せます。

サンプルコード

以下がブラウザウィンドウを実現するコード全体です。そのままHTMLファイルとして保存して開けば動作します。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .menuBar {
        border: 3px solid #f1f1f1;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .menuRow {
        padding: 10px;
        background: #f1f1f1;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .browserField {
        float: left;
    }
    .left {
        width: 15%;
    }
    .right {
        width: 10%;
    }
    .middle {
        width: 75%;
    }
    .menuRow:after {
        content: "";
        display: table;
        clear: both;
    }
    .menuBarDots {
        margin-top: 4px;
        height: 12px;
        width: 12px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
    }
    input[type=text] {
        width: 100%;
        border-radius: 3px;
        border: none;
        background-color: white;
        margin-top: -8px;
        height: 25px;
        color: #666;
        padding: 5px;
    }
    .menuDots {
        width: 5px;
        height: 5px;
        background-color: #aaa;
        margin: 3px 0;
        display: block;
        border-radius: 50%;
    }
    .content {
        padding: 10px;
    }
</style>
</head>
<body>
<div class="menuBar">
<div class="menuRow">
<div class="browserField left">
<span class="menuBarDots" style="background:#ED594A;"></span>
<span class="menuBarDots" style="background:#FDD800;"></span>
<span class="menuBarDots" style="background:#5AC05A;"></span>
</div>
<div class="browserField middle">
<input type="text" value="https://demo.com/">
</div>
<div class="browserField right">
<div style="float:right">
<span class="menuDots"></span>
<span class="menuDots"></span>
<span class="menuDots"></span>
</div>
</div>
</div>
<div class="content">
<h1>Sample Text</h1>
<h2>Welcome to our website</h2>
</div>
</div>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のような出力が得られます。

CSSだけでブラウザウィンドウを再現する方法！サンプルコード付きで解説

コードのポイント解説

1. ウィンドウ枠の作成

.menuBarクラスにborderと角丸（border-radius）を設定することで、ウィンドウ全体の外枠を表現しています。上部の左右だけ角丸にすることで、より自然なウィンドウの見た目になります。

2. 赤・黄・緑のウィンドウボタン

.menuBarDotsクラスは、幅・高さを12px、border-radiusを50%に設定した円形要素です。インラインスタイルで背景色を切り替えることで、閉じるボタン（赤：#ED594A）、最小化ボタン（黄：#FDD800）、最大化ボタン（緑：#5AC05A）を表現しています。

3. アドレスバーのデザイン

input[type=text]に対して幅100%、角丸、白背景を指定し、ブラウザのURL入力欄らしいデザインに仕上げています。value属性にダミーのURLを設定することで、表示時からそれらしく見えます。

4. 横並びレイアウトの実現

floatプロパティと:after疑似要素によるclearfix（clear: both）を組み合わせることで、左側のボタン群・中央のアドレスバー・右側のメニュードットを横一列に配置しています。各領域はleft（15%）、middle（75%）、right（10%）という幅指定でバランスよく分割されています。

まとめ

CSSのborder-radiusやfloatといった基本テクニックを組み合わせるだけで、JavaScript不要のリアルなブラウザウィンドウUIが作成できます。チュートリアルサイトでの画面紹介やポートフォリオの演出など、さまざまな場面で活用できるので、ぜひ自分のプロジェクトにも取り入れてみてください。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSとJavaScriptでポップアップチャットウィンドウを作成する方法

    CSSとJavaScriptを組み合わせることで、Webサイトの右下から表示されるポップアップ型のチャットウィンドウを簡単に実装できます。本記事では、チャットボタンをクリックするとウィンドウが開き、「閉じる」ボタンで閉じられる仕組みを、実際のコード例とともにわかりやすく解説します。 実装例（完全なコード） 以下のコードでは、画面右下に固定配置された「Chat」ボタンを用意し、クリックするとチャットフォームがポップアップで表示される構造になっています。 <!DOCTYPE html> <html> <head> <meta name="view