CSSの方位角（azimuth）プロパティとは？音声の水平方向の位置指定方法を解説

CSS方位角（azimuth）プロパティの概要

azimuth（アジマス）プロパティは、音声がどの水平方向から聞こえるかを指定するためのプロパティです。リスナーを中心としたサウンドステージをイメージし、音源の位置を角度やキーワードで表現します。

なお、このプロパティはCSS2の音声スタイルシート（Aural Style Sheets）で定義されていたもので、現在はCSS Speech Moduleへと引き継がれています。モダンブラウザではほとんどサポートされていないため、実際の開発で使用する際は注意が必要です。

指定できる値の一覧

• angle（角度） − -360deg〜360degの範囲で角度を指定します。0degはサウンドステージの中央正面、90degは右、180degは後方、270deg（より直感的な-90degも同義）は左を意味します。
• left-side − 「270deg」と同じです。「behind」と組み合わせた場合も「270deg」になります。
• far-left − 「300deg」と同じです。「behind」と組み合わせると「240deg」になります。
• left − 「320deg」と同じです。「behind」と組み合わせると「220deg」になります。
• center-left − 「340deg」と同じです。「behind」と組み合わせると「200deg」になります。
• center − 「0deg」と同じです。「behind」と組み合わせると「180deg」になります。
• center-right − 「20deg」と同じです。「behind」と組み合わせると「160deg」になります。
• right − 「40deg」と同じです。「behind」と組み合わせると「140deg」になります。
• far-right − 「60deg」と同じです。「behind」と組み合わせると「120deg」になります。
• right-side − 「90deg」と同じです。「behind」と組み合わせた場合も「90deg」になります。
• leftwards − 現在の角度を基準に、音声を左へ移動させます。具体的には20度減算します。
• rightwards − 現在の角度を基準に、音声を右へ移動させます。具体的には20度加算します。

記述例

以下に、azimuthプロパティを使った具体的なコード例を示します。

<style>
   <!--
      h1 { azimuth: 30deg }
      td.a { azimuth: far-right } /* 60deg */
      #12 { azimuth: behind far-right } /* 120deg */
      p.comment { azimuth: behind } /* 180deg */
   -->
</style>

この例では、見出し（h1）の音声を30度右方向から聞こえるように設定し、テーブルセル（td.a）にはキーワード「far-right」（60deg相当）、IDセレクタ「#12」には「behind far-right」（120deg相当＝後方右側）、コメント段落（p.comment）には「behind」（180deg＝真後ろ）を指定しています。このように、角度による細かい指定とキーワードによる直感的な指定を使い分けることができます。