こんにちは。ロケッツ4号機です。
コーダーのみなさんは普段からCSS（Cascading Style Sheets）を使用しているかと思います。
そんなみなさん。「我こそはCSSマスターなり！」と悦に入っているのでしょうが、過信は禁物！
CSSとひとくちに言えど、世の中には本当にたくさんのCSSが存在します。
今回は、そんなCSSのなかから個人的に「ナニコレ？」と感じたCSSをご紹介。
CSSは簡単そうで、実はものすご〜く奥深い。
そんなCSSの一端に触れるきっかけになれば幸いです。
- ■目次
- ■azimuth(アジマス)
- ■cue(キュー)
- ■cue-after(キューアフター)
- ■cue-before(キュービフォー)
- ■elevation(エレベーション)
- ■marker-offset(マーカーオフセット)
- ■pause（ポウズ）
- ■pause-after(ポウズアフター)
- ■pause-before(ポウズビフォー)
- ■pitch(ピッチ)
- ■pitch-range(ピッチレンジ)
- ■play-during(プレイドゥアリング)
- ■richness(リッチネス)
- ■speak(スピーク)
- ■speak-header
- ■speak-numeral(スピークニューメラル)
- ■speak-punctuation(スピークパンクチュエーション)
- ■speech-rate(スピーチレート)
- ■stress(ストレス)
- ■voice-family(ヴォイスファミリー)
- ■volume(ヴォリューム)
- ■さいごに
■目次
- azimuth
- cue
- cue-after
- cue-before
- elevation
- marker-offset
- pause
- pause-after
- pause-before
- pitch
- pitch-range
- play-during
- richness
- speak
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- stress
- voice-family
- volume
■azimuth(アジマス)
魚っぽい名前ですが、違います。
azimuthとは英語で「方位」の意味です。
音声の聞こえてくる水平方向を指定します。
.hoge{
azimuth: 30deg;
}
■cue(キュー)
当該要素の前後のキュー音（サウンドアイコン）を指定します。
.hoge{
cue:url("onsei01.mp3") url("onsei02.mp3");
}
■cue-after(キューアフター)
当該要素の後のキュー音（サウンドアイコン）を指定します。
.hoge{
cue-after:url("onsei02.mp3");
}
■cue-before(キュービフォー)
アフターがあればビフォーもあります。
当該要素の前のキュー音（サウンドアイコン）を指定します。
.hoge{
cue-before:url("onsei01.mp");
}
■elevation(エレベーション)
音声の聞こえてくる垂直方向（上下）を指定します。
azimuthは「水平」でしたが、こちらは「垂直」です。
.hoge{
elevation:30deg;
}
■marker-offset(マーカーオフセット)
リスト要素のマーカー位置を指定。
CSS3「::marker」にてサポート。
.hoge{
marker-offset:2em;
}
■pause（ポウズ）
カナ表記に迷いましたが「ポーズ」ではなく、どことなくネイティブ感の出る「ポウズ」とさせていただきます。
要素前後の音声の一時停止を指定します。
.hoge{
pause:80% 100%;
}
■pause-after(ポウズアフター)
要素の後の音声の一時停止を指定します。
.hoge{
pause-after:1000ms;
}
■pause-before(ポウズビフォー)
お察しの通り、こちらもアフターがあればビフォーもあります。
要素の前の音声の一時停止を指定します。
.hoge{
pause-before:100%;
}
■pitch(ピッチ)
声の周波数（高さ・低さ）を指定します。
自分の声を録音してピッチをいじりながら1日遊べそうな気がします。
.hoge{
pitch:medium; /* x-low, low, medium, high, x-high */
}
■pitch-range(ピッチレンジ)
声の周波数（高さ・低さ）の幅を指定します。
.hoge{
pitch-range:70;
}
■play-during(プレイドゥアリング)
BGM（背景の音楽）を指定します。
「デュアリング」と迷いましたが、どことなくネイティブ感の(ry
.hoge{
play-during:url("bgm.mp3");
}
■richness(リッチネス)
声の明瞭さ（豊かさ）を指定します。
こんな名前のメタルバンドいそうですね。
.hoge{
richness:60;
}
■speak(スピーク)
テキスト読み上げ時の方法を指定。
単語として読むか、一文字づつ読み上げるかを指定するものです。
.hoge{
speak:normal; /* normal, spell-out, none */
}
■speak-header
ヘッダーセル（table）の読み上げ方法の指定。
tableタグ全盛期の遺産ですね。
.hoge{
speak-header:once; /* once, always */
}
■speak-numeral(スピークニューメラル)
触るとヌメヌメしてそうなこのプロパティ。
数字の読み方を指定します。
.hoge{
speak-numeral:digits;
}
■speak-punctuation(スピークパンクチュエーション)
句読点やカッコ・記号の読み方を指定します。
廃案になっていなければ、このプロパティ名を言いたいがために無駄に多様していたであろう程、響きがカッコいい・・・
.hoge{
speak-punctuation:code; /* none, code */
}
■speech-rate(スピーチレート)
読み上げ時のスピードを指定します。
.hoge{
speech-rate:slow; /* x-slow, slow, medium、fast, x-fast, slower, faster */
}
■stress(ストレス)
読み上げ時の声の強弱を指定します。
.hoge{
stress:60;
}
■voice-family(ヴォイスファミリー)
読み上げ時の声の種類（男性/女性/子供）を指定します。
パパとママ、その子供の「ファミリー」という意味です。
.hoge{
voice-family:female; /* male, female, child */
}
■volume(ヴォリューム)
音量を指定します。
「ボリューム」ではなく「ヴォリューム」です。
.hoge{
volume:50; /* silent, x-soft, soft, medium, loud, x-loud */
}
■さいごに
いかがでしたか？
「これ知ってる！」「使ったことある！」というCSSプロパティはありましたか？
ちなみにカンの良い方も悪い方も既にお気づきでしょうが、今回取り上げたプロパティは全て「音声」に関するものです。
これらプロパティは2011年改訂版の「CSS2.1」で実装されたプロパティです。
ただし、これらプロパティは現在の「CSS3」において廃止、もしくは別プロパティとして継承されているため、今では滅多にお目にかかることが出来なくなりました。
参考：CSS Speech Module
https://triple-underscore.github.io/css-speech-ja.html
CSS2.1とCSS3の関係性・・・。そして「音声」関連のCSSの行方とは・・・。
この点に深入りするには紙面（も知識も）足りないので、また近々別の記事で取り上げてみることにするNE★
