【第16回】プログラミング初心者向けCSS3講座【音声関連part1】

こんにちは、はるおです。これからHTMLとセットで使用される言語、CSS講座を始めます。CSSはHTMLで構成された文章を装飾する(文字色、文字サイズ、位置など)ための言語です。今回の記事から数回にわたって、現バージョンのCSS3について初心者向けに解説していこうと思います。

【HMTL5講座】

【第0回】プログラミング初心者向けHTML5講座

  

 

【前回記事】

【第15回】プログラミング初心者向けCSS3講座【ユーザインターフェース】

  

【次回記事】

次回記事を更新し次第リンクを貼っておきます。

本記事では、下記の内容を解説します。

 

 

 

○この記事でわかること

・音声関連についてわかる

  

この記事を書いている僕は、プログラミング学習歴8ヶ月。

基礎学習が終わり、最近はLP作成などの実績も少しずつ出してきております。

 

 

また、Twiiterも最近始めたのでこちらの方もフォローしていただけると嬉しいです。

 

Twitterアカウント @clearyou66

 

音声関連について

 

 

 

volume

音声を読み上げるときの音量を0~100、もしくは○%といったパーセントによる指定や、「x-soft(0)」、「soft(25)」、「medium(50)」、「loud(75)」、「x-loud(100)」、「silent(無音)」、「inherit(親要素の継承)」などを指定します。

speak

音声の読み上げ方法を指定するプロパティとなります。使用方法は以下の通りです。

speak:

none; 読み上げるテキストを意図的に飛ばして読みます。

normal; 初期値となります。言語を普通に読みます。

spell-out;

英語スペルを1文字ずつ読みます。「spell」でも「エスピーイーエルエル」のように読み上げます。

pause

要素の前後の音声の一時停止を一括指定するためのプロパティとなります。使用方法は以下の通りです。

 

pause:

○sもしくは○ms; 一時停止する時間を秒またはミリ秒により指定します。

○%; パーセントで指定します。

 

値を1つ指定すると、要素の前後に、半角スペースで区切ることで2つ値を指定した場合は指定した順番に従って、要素の前後に反映されます。

 

pause-before

要素の前の音声を一時停止することができるプロパティとなります。使用方法は以下の通りです。

 

pause-before:

○sもしくは○ms; 一時停止する時間を秒またはミリ秒により指定します。

○%; パーセントで指定します。

 

pause-after

要素の後に一時停止を指定することができるプロパティとなります。使用方法は以下の通りです。

pause-after:

○sもしくは○ms; 一時停止する時間を秒またはミリ秒により指定します。

○%; パーセントで指定します。

 

cue

要素の前後に設けられる合図音を一括指定するためのプロパティとなります。使用方法は以下の通りです。

 

cue:

none; 初期値となります。音声を指定しません。

url(”); 音声ファイルのURLを指定します。

 

値を1つ指定すると、要素の前後に、半角スペースで区切ることで2つ値を指定した場合は指定した順番に従って、要素の前後に反映されます。

 

cue-after

要素の後の合図音を指定するプロパティとなります。使用方法は以下の通りです。

 

cue-after:

none; 初期値となります。音声を指定しません。

url(”); 音声ファイルのURLを指定します。

 

cue-before

要素の前の合図音を指定するプロパティとなります。使用方法は以下の通りです。

 

cue-before:

none; 初期値となります。音声を指定しません。

url(”); 音声ファイルのURLを指定します。

 

play-during

BGMを指定する際に使用するプロパティとなります。使用方法は以下の通りです。

play-during:

auto; 初期値となります。親要素のBGMをそのまま再生します。

none; BGMを流しません。

url(); BGMを指定します。続けて以下の2つを指定できます。

mix; 親要素のBGMにそのまま重ねて音楽を流します。

repeat; BGMが終わっても繰り返し再生します。

 

 

azimuth

水平方向で、音楽が聞こえてくる角度を調整する際に使用するプロパティとなります。使用方法は以下の通りです。

azimuth:

deg,grad,rad; いずれかの単位を用いて角度を指定します。

left-side; 左側

far-left;

left;

center-left;

center; 初期値となります。中央

center-right;

right;

far-right;

right-side; 右側

far-right behind;

right behind;

center-right behind;

center-behind; 後ろ

center-left behind;

left behind;

far-left behind;

rightwards; 現在の角度に+20deg右回り

leftwards; 現在の角度に-20degして左回り

 

elevation

こちらは音声の垂直方向の角度を指定します。

elevation:

deg,grad,rad;

above; 上側へ音声がいきます。

level; 初期値となります。0

below; 下側へ音声がいきます。

higher; 現在の角度に+10degして上側へ音声がいきます。

lower; 現在の角度に-10degして下側へ音声がいきます。

 

 

 

ということで第16回のCSS3講座を終わります。

 

 

 

エディタについてはこちらの記事で説明しているので参考までにどうぞ。

【初心者必見】最強におすすめのエディタ「Atom」について徹底解説

 

 

僕の失敗=駆け出しエンジニア(プログラミング初心者)の失敗 だと思うので、僕の失敗談はすべてこれからの駆け出しエンジニアたちに還元していきたいというスタンスです。

 

また、本記事は超初心者向けに解説しているため、難しい単語や不要な説明は省略させていただいております。わからないことがあればコメント欄にて気軽にご質問ください。

 

僕のプロフィールついては以下の記事にまとめてありますので、時間がある方は見ていっていただけると嬉しいです。

 

 

WordPressで記事投稿をする方法を自己紹介で学習する【初投稿】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です