スマホの向きでデザインが変わる！CSSのorientation（向き）設定ガイド

デバイスの向き（orientation）によるスタイル指定

先生と生徒の会話形式で理解しよう

生徒

「スマホを横向きにしたときだけ、特別なデザインを表示させることはできますか？」

先生

「はい、ＣＳＳのorientation（オリエンテーション）という設定を使えば、縦向きと横向きでスタイルを切り替えられますよ。」

生徒

「画面の横幅だけでなく、向きそのものを判定できるんですね！具体的にどう書くのですか？」

先生

「使い方はとてもシンプルです。まずは基本の考え方から一緒に学んでいきましょう！」

1. スマホの向きによるスタイル指定とは何か

現代のウェブ制作において、スマートフォンやタブレットでサイトを見る人は非常に増えています。これらのデバイスには、パソコンにはない大きな特徴があります。それは「端末を回転させることができる」という点です。縦に持ってニュースを読んだり、横に倒して動画を見たりと、ユーザーの状況によって画面の形が劇的に変わります。

このデバイスの向きのことをプログラミングの世界では「ｏｒｉｅｎｔａｔｉｏｎ（オリエンテーション）」と呼びます。ＣＳＳという言葉を使うことで、縦向き（ポートレート）のときと、横向き（ランドスケープ）のときで、別々のルールを適用させることができます。画面が横に広がったときだけ写真を大きくしたり、メニューの並びを変えたりすることで、より親切で使いやすいホームページを作ることが可能になります。

2. 縦向きと横向きを表す言葉の意味を覚えよう

ＣＳＳで向きを指定する際には、二つの専門用語を使います。まず一つ目は「ｐｏｒｔｒａｉｔ（ポートレート）」です。これは日本語で「肖像画」という意味があり、スマホを普通に持ったときの「縦向き」の状態を指します。画面の高さが幅よりも長い状態のことですね。

二つ目は「ｌａｎｄｓｃａｐｅ（ランドスケープ）」です。こちらは「風景」という意味で、スマホを横に倒した「横向き」の状態を指します。画面の幅が高さよりも広くなったとき、ブラウザはこの状態だと判断します。プログラミング未経験の方は、まずこの二つの単語が「縦」と「横」を意味していることを覚えるところから始めましょう。これらはメディアクエリという便利な機能と一緒に使われます。


<style>
.orientation-box {
    padding: 30px;
    text-align: center;
    border: 3px solid #ccc;
    background-color: #f8f9fa;
}

/* 縦向き（ポートレート）の時の指定 */
@media (orientation: portrait) {
    .orientation-box {
        background-color: #e3f2fd;
        border-color: #2196f3;
    }
    .orientation-box::after {
        content: "今は縦向きですね";
    }
}

/* 横向き（ランドスケープ）の時の指定 */
@media (orientation: landscape) {
    .orientation-box {
        background-color: #fff3e0;
        border-color: #ff9800;
    }
    .orientation-box::after {
        content: "今は横向きですね";
    }
}
</style>

<div class="orientation-box">
    <i class="bi bi-phone-vibrate fs-1"></i><br>
</div>

ブラウザ表示

3. なぜ横幅の指定だけでなく向きの指定が必要なのか

「画面の横幅（ウィズ）で判断すれば十分ではないか」と思うかもしれません。確かに、多くのレスポンシブデザインは横幅だけで調整されています。しかし、同じ横幅であっても、スマホを横にした場合と、小さなタブレットを縦に持った場合では、使い心地が全く異なります。特にスマホの横向きは、画面の「高さ」が非常に狭くなるため、特別な工夫が必要になることが多いのです。

例えば、大きなヘッダー（サイト上部の看板部分）がスマホの横向きでもそのままの大きさで表示されると、画面が看板だけで埋まってしまい、肝心の内容が全く見えなくなってしまいます。そのようなとき、オリエンテーション機能を使って「横向きのときだけヘッダーを小さくする」といった指示を出すことで、ユーザーの不満を解消できます。このように、状況に合わせた「おもてなし」ができるのがこの機能の素晴らしい点です。

4. 横向きの時に文字サイズやレイアウトを調整するコツ

スマホを横向きにすると、一行の文字数が非常に多くなりがちです。人間は一行が長すぎると、次の行に目を移すときにどこを読んでいるか見失いやすくなります。そのため、横向き（ランドスケープ）のときだけ左右の余白（マージン）を広く取ったり、文字サイズを少し調整したりすると、とても読みやすい親切な設計になります。

また、ボタンの配置も重要です。横向きでは親指が画面の中央まで届きにくくなるため、操作パネルを左右に振り分けたり、高さを抑えたりといった工夫が効果的です。プログラミングの初心者の方は、まず「横向きになったら画面の高さが足りなくなる」ということを意識して、要素を縦に詰め込みすぎないように注意することから始めてみましょう。以下のコードで、実際にレイアウトを変える例を見てみましょう。


<style>
.photo-card {
    display: flex;
    flex-direction: column; /* 基本は縦並び */
    gap: 15px;
    padding: 10px;
    background-color: #eeeeee;
}

/* 横向きになった時だけ横並びに変更 */
@media (orientation: landscape) {
    .photo-card {
        flex-direction: row; /* 横に並べる */
        align-items: center;
    }
}

.photo-card img {
    max-width: 100%;
    height: auto;
}
</style>

<div class="photo-card">
    <img src="/img/sample150-100.jpg" alt="サンプル写真">
    <div>
        <h3>タイトル</h3>
        <p>横向きになると写真の横に説明文が並びます。</p>
    </div>
</div>

ブラウザ表示

5. 写真ギャラリーや動画サイトでの活用例

この機能が最も活躍するのは、写真や動画をメインに扱うサイトです。例えば、写真ギャラリーで縦向きのときは写真を一枚ずつ大きく見せたいけれど、横向きのときは画面の広さを活かして三枚くらい横に並べて見せたいといった要望を簡単に叶えることができます。特に動画プレーヤーの場合、横向きになったら全画面表示に近い形で大きく見せるという設定は、今や当たり前の機能となっています。

他にも、地図アプリやゲームのようなインターフェースを持つサイトでも重宝されます。向きによって操作ボタンの位置を最適化することで、ユーザーは端末を持ち替えるだけで最適な操作環境を得られます。初心者の方は、自分の好きなアプリが横向きにしたときにどう変化するか観察してみてください。そこには、今回学んでいるオリエンテーションの技術がふんだんに使われているはずです。


<style>
.gallery {
    display: grid;
    gap: 10px;
}

/* 縦向きは1列 */
@media (orientation: portrait) {
    .gallery {
        grid-template-columns: 1fr;
    }
}

/* 横向きは2列 */
@media (orientation: landscape) {
    .gallery {
        grid-template-columns: 1fr 1fr;
    }
}

.gallery-item {
    background: #333;
    padding: 5px;
}
</style>

<div class="gallery">
    <div class="gallery-item"><img src="/img/sample150-100.jpg" style="width:100%"></div>
    <div class="gallery-item"><img src="/img/sample120-120.jpg" style="width:100%"></div>
</div>

ブラウザ表示

6. 背景画像を向きに合わせて切り替える方法

背景に大きな写真を使いたい場合、縦長の写真と横長の写真では映え方が全く違います。縦向きの時に無理やり横長の写真を使うと、肝心な部分が切れてしまったり、小さくなってしまったりします。このような時こそオリエンテーションの出番です。メディアクエリの中で背景画像（バックグラウンドイメージ）を切り替える設定を書きましょう。

例えば、縦向きの時は人物が中央に写った縦長用の写真を使い、横向きの時は広大な景色が広がる横長用の写真を使うといった使い分けができます。これにより、どんな持ち方をしていても、常に製作者が意図した美しいデザインを届けることができます。こうした細部へのこだわりが、サイト全体の信頼感やクオリティに繋がっていくのです。画像のパスを間違えないように注意しながら、挑戦してみましょう。

7. 注意点とタブレット端末での挙動について

一つ覚えておいてほしい注意点は、パソコンのブラウザでもこの機能は働くという点です。パソコンの画面でブラウザの窓を極端に細長くすると、ブラウザは「今は縦向きの状態だ」と判断します。逆に窓を横に広げれば「横向き」だと判断します。そのため、スマホだけでなくパソコンでの見え方も含めてテストを行うことが重要です。

また、タブレット端末は初期状態がどちらの向きになっているかが機種によって異なります。アイパッドなどは縦向きで使う人もいれば、専用のキーボードをつけて横向きで使う人も多いです。どんな向きでも、中に入っている文章が読みやすく、ボタンが押しやすい状態を保つことが理想です。特定の機種に依存しすぎず、画面の比率（縦と横のどちらが長いか）によって柔軟にデザインが対応するように心がけましょう。

8. 実際にサイトを公開する前の確認テストのやり方

プログラミングを始めたばかりの方が最も困るのは「どうやってスマホの向きを確認するか」ということでしょう。一番確実なのは、自分のスマートフォンで実際にサイトを開いて、ぐるぐる回してみることです。パソコンの画面上では問題なさそうに見えても、実際に手に持ってみると文字が小さすぎたり、指で隠れてしまったりすることがよくあります。

もし手元にテスト用のスマホがない場合は、ブラウザ（グーグルクロームなど）の「デベロッパーツール」という機能を使えば、パソコン上でスマホの画面をシミュレーションできます。画面の上にあるボタンを押すと、画面を回転させることもできるので、コードを書きながらリアルタイムで確認ができます。こうしたツールを使いこなすことも、一流のウェブ制作者への道のりです。楽しみながら色々な設定を試してみてください。


<style>
.alert-msg {
    display: none;
    padding: 20px;
    color: white;
    font-weight: bold;
    text-align: center;
}

/* 横向きの時だけ警告を表示する例 */
@media (orientation: landscape) {
    .alert-msg {
        display: block;
        background-color: #d32f2f;
    }
}
</style>

<div class="alert-msg">
    <i class="bi bi-exclamation-triangle"></i>
    横向きだと画面が狭くなるので、縦向きがおすすめです！
</div>
<p>このメッセージは横向きのときだけ現れます。</p>

ブラウザ表示

2026年最新スキルアップ・実践セミナー