【最終回】プログラミング初心者向けCSS3講座【音声関連part2】

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

【HMTL5講座】

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

  

 

【前回記事】

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

 

 

 

○この記事でわかること

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

  

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

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

 

 

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

 

Twitterアカウント @clearyou66

 

音声関連について

 

全回のレッスンの続きの部分です。

 

speech-rate

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

 

speech-rate:

x-slow; 遅い。読み上げる単語数:80こ/1分

slow; 少し遅い。読み上げる単語数:120こ/1分

medium; 初期値となります。普通の速さ。読み上げる単語数:180~200こ/1分

fast; 読み上げる単語数:300こ/1分

x-fast; 早い。読み上げる単語数:500こ/1分

slower; 読み上げる単語数を今より40減らす。

faster; 読み上げる単語数を今より40増やす。

数値; 1分間で読み上げる単語数を数値で指定する。

 

 

voice-family

読み上げる声の種類を指定することができるプロパティとなります。使い方はfont-familyと似ていて、いくつかの候補を順番に記載します。使用方法は以下の通りです。

 

voice-family:

male; 男性の声を指定します。

female; 女性の声を指定します。

shild; 子どもの声を指定します。

それ以外; ボイスファミリー名を指定します。

 

 

pitch

読み上げる音声の高さを指定するためのプロパティとなります。指定方法は数値による周波数の指定、キーワードによる指定方法がありますが、キーワードの場合は、voice-familyで指定した声を、高くするか低くするかを指定することになります。

 

pitch:

x-low; とても低い音声になります。

low; 低めの音声になります。

medium; 初期値となります。普通くらいの高さの音声となります。

high; 高めの音声となります。

x-high; とても高い音声となります。

数値;

周波数を直接指定します。周波数の単位はヘルツ「Hz」、キロヘルツ「KHz」となります。(男性の声:約120Hz、女性の声:約200Hz)

 

 

pitch-range

読み上げる音声の高低差を指定することができるようになるプロパティとなります。値が大きいほど抑揚のある声になります。指定方法は数値による指定のみとなります。

 

pitch-range:

数値; 0~100の範囲で値を指定します。低いほど単調、高いほど抑揚がつく。

 

 

stress

音声を読み上げる際の、アクセントの強さを指定するためのプロパティとなります。要するに声の強弱についてです。pitch-rangeと違い、stressはアクセントの部分の強弱を指定します。使用方法はpitch-rangeと同様に数値で指定します。

 

stress:

数値; 0~100の範囲で値を指定します。初期値は50となります。

 

 

richness

読み上げる音声の話し方を指定します。指定方法は数値のみの指定になります。値が大きいほど元気よく、値が小さいほど内緒話のようにヒソヒソと話します。使用方法は以下の通りです。

richness:

数値; 0~100の範囲で値を指定します。初期値は50となります。

 

 

speak-punctuation

句点「。」と読点「、」を読み上げるかどうかを指定することができるプロパティとなります。指定方法は以下の通りです。

speak-punctuation:

none; 初期値となります。句読点を読み上げません。

code; 句読点を読み上げます。

 

 

speak-numeral

数値があった場合の読み上げ方について指定するためのプロパティとなります。指定方法は以下の通りです。

speak-numeral:

continuous;

初期値となります。こちらの値を指定すると、「12345」を「いちまんにせんさんびゃくよんじゅうご」と読み上げるようになります。

digits;

こちらの値を指定すると、「12345」を「いち、に、さん、し、ご」と読み上げるようになります。

 

 

speak-header

表の見出しがある場合に、読み上げる方法を指定します。使用方法は以下の通りです。

speak-header:

once; 初期値となります。データセルを読む際に1度のみ見出しを読みます。

always; データセルを読む際に毎回見出しを読みます。

 

 

以上で、音声関連についての説明を終わります。そして、今回でCSS3講座は修了となります。これまでに解説してきたHTMLと、CSSはプログラミングの登竜門であり、必須のスキルであるため、しっかりと抑えておきましょう。

また、就職してフロントエンドに携わる人であればHTML,CSS、そして動きをつけることができるJavascriptを徹底的に磨きましょう。サーバーサイドに携わるつもりの人は、いずれはPHP、Ruby、Pythonなどをやっていくことになるでしょう。

その場合は、BootstrapというCSSフレームワークが非常に便利ですので、そちらについても調べてみてください。以上でCSS講座を終わります。

 

 

 

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

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

 

 

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

 

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

 

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

 

 

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

コメントを残す

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