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

CSSで画面を50/50に分割する方法を徹底解説

CSSを使えば、画面を左右に均等（50/50）に分割するレイアウトを簡単に実装できます。ポイントは、position: fixed と width: 50% を組み合わせることです。左側の要素には left: 0 を、右側の要素には right: 0 を指定することで、それぞれが画面の半分を占めるようになります。

実装手順のポイント

  • 左右両方のコンテナに width: 50% を設定して、画面幅の半分ずつを確保します。
  • position: fixed と top: 0 を指定して、要素を画面全体に対して固定配置します。
  • z-index: 1 を設定することで、他の要素より前面に表示されます。
  • overflow-x: hidden で横方向のはみ出しを防ぎます。
  • 中央寄せしたいコンテンツは、position: absolute と transform: translate(-50%, -50%) を使うことで、各パネルのど真ん中に配置できます。

サンプルコード

以下のコードは、画面を左右50/50に分割し、それぞれの領域にテキストを中央表示する例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        font-family: Arial;
        color: white;
    }
    h1{
        padding:20px;
    }
    .left,.right {
        height: 100%;
        width: 50%;
        position: fixed;
        z-index: 1;
        top: 0;
        overflow-x: hidden;
        padding-top: 20px;
    }
    .left {
        left: 0;
        background-color: rgb(36, 0, 95);
    }
    .right {
        right: 0;
        background-color: rgb(56, 1, 44);
    }
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .centered img {
        width: 150px;
        border-radius: 50%;
    }
</style>
</head>
<body>
<div class="left">
<h1>左側に表示されるテキスト</h1>
</div>
<div class="right">
<h1>右側に表示されるテキスト</h1>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、画面が濃い紫と暗い赤紫の2つの領域に均等に分割され、それぞれの中央に見出しテキストが表示されます。

CSSで画面を50/50に分割する方法を徹底解説

応用のヒント

この手法はランディングページやログイン画面など、2つのコンテンツを対比させたい場面で特に有効です。また、.centered クラスのように絶対配置とtransformを組み合わせれば、画像やボタンなども各パネルの中央に美しく配置できます。レスポンシブ対応が必要な場合は、メディアクエリを使って狭い画面では縦積み（上下分割）に切り替えるのもおすすめです。

  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で画面を50/50に分割する方法を徹底解説

    CSSを使えば、画面を左右に均等（50/50）に分割するレイアウトを簡単に実装できます。ポイントは、position: fixed と width: 50% を組み合わせることです。左側の要素には left: 0 を、右側の要素には right: 0 を指定することで、それぞれが画面の半分を占めるようになります。 実装手順のポイント 左右両方のコンテナに width: 50% を設定して、画面幅の半分ずつを確保します。 position: fixed と top: 0 を指定して、要素を画面全体に対して固定配置します。 z-index: 1 を設定することで、他の要素より前面に表示されます。