CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. CSSのstressプロパティとは？音声の抑揚（強勢）の高さを指定する方法

    stressプロパティとはstressプロパティは、音声出力（音声合成）において、声のイントネーション（抑揚）の輪郭にある「局所的なピーク（山）」の高さを指定するためのプロパティです。英語は強勢（ストレス）を持つ言語であり、文の中のそれぞれの部分に一次強勢・二次強勢・三次強勢といった強調の度合いが割り当てられます。このプロパティを使用することで、テキストを読み上げる際の強勢の強さを制御できます。指定できる値数値（number）：0から100までの範囲の値を指定します。値が持つ意味は、話されている言語によって異なります。たとえば、標準的な英語の男性の声（平均ピッチ＝122Hz）で通常の抑揚と強調

  2. CSSのvoice-familyプロパティとは？使い方と指定例をわかりやすく解説

    CSSのvoice-familyプロパティとはvoice-familyプロパティは、テキストを音声読み上げする際に使用される音声（ボイス）ファミリを指定するためのCSSプロパティです。値はカンマ区切りの優先順位付きリストとして記述し、先頭の候補から順に、環境で利用可能な音声が自動的に選択されます。指定できる値generic-voice − 汎用的な音声ファミリを指定します。指定可能な値は「male」（男性）、「female」（女性）、「child」（子供）の3種類です。specific-voice − 特定の音声インスタンス名を指定します（例：comedian、trinoids、carlos、

  3. CSSの@mediaを使って画面表示と印刷で異なるフォントファミリを設定する方法

    Webページを画面で閲覧するときと印刷するときでは、読みやすさに適したフォントが異なります。CSSの@mediaルールを使えば、出力メディアに応じてスタイルを切り替えることができます。 以下の例では、画面表示（screen）と印刷（print）それぞれに異なるフォントファミリを指定しています。 ポイント @media screen：画面表示時に適用されるスタイルを定義します。例では、視認性の高いサンセリフ体（verdana、arial）を指定しています。 @media print：印刷時に適用されるスタイルを定義します。例では、紙面に適したセリフ体（georgia、times）を指定していま

  4. CSSを使ったカラム（段組み）レイアウトの作成方法

    CSSを使ってカラム（段組み）レイアウトを作成する方法を、ネストされたdiv要素とマージン・パディングの指定を通じて解説します。この手法は、左右にサイドバー風の余白を持つレイアウトを実現する際の基本的な考え方として役立ちます。 1. ドキュメント全体のマージンとパディングを設定する まず、ページ全体の土台となる設定を行います。body要素に対してマージンとパディングを以下のように指定しましょう。 <style> body { margin:9px 9px 0 9px; padding:0; background:#FFF;

  5. CSSの検証（バリデーション）方法を解説｜W3C標準に準拠したコードチェックの基本

    検証（バリデーション）とは、作成したコードがあらかじめ定められたルールや規格に適合しているかどうかを確認するプロセスのことです。特に学習を始めたばかりの段階では、CSSのルールを記述する際にさまざまなミスをしてしまうのはごく自然なことです。 CSSの検証が必要な理由 では、自分が書いたCSSが100%正確で、W3C（World Wide Web Consortium）の品質基準に適合していることを、どのように確認すればよいのでしょうか。 CSSを使用する場合、そのコードは正しいものでなければなりません。不正確なコードは、ページの見た目や動作に予期しない不具合をもたらす可能性があります。レイア

  6. CSSのborder-radiusプロパティで角丸（ラウンドコーナー）を追加する方法

    CSS3では、border-radiusプロパティを使用することで、本文やテキストを含む要素に特別な色の角丸（ラウンドコーナー）を簡単に追加できます。このプロパティを活用すれば、四角いボックスの角を滑らかに丸めることができ、Webページ全体に柔らかく洗練された印象を与えられます。基本のサンプルコード以下は、border-radiusプロパティを使って角丸のボックスを作成するシンプルな例です。<html>  <head>    <style>     

  7. CSSのborder-radiusプロパティとは？角丸ボーダーの実装方法を解説

    CSSのborder-radiusプロパティを使うと、要素の四隅に丸み（角丸）を付けることができます。このプロパティは、4つの角それぞれに対する半径を一度に指定できる便利なプロパティです。値を1つだけ指定した場合は、すべての角に同じ丸みが適用されます。また、値をカンマ区切りで複数指定することで、各角ごとに異なる丸みを設定することも可能です。border-radiusの基本的な使い方以下のコードは、border-radiusプロパティを使用して角丸のボーダーを持つ要素を作成する例です。サンプルコード<html>    <head>   &nb

  8. CSSのsizeプロパティとは？ページボックスのサイズと向きを設定する4つの値を解説

    CSSのsizeプロパティは、印刷時に適用されるページボックス（page box）のサイズと向きを指定するためのプロパティです。主に@pageルール内で使用され、印刷レイアウトを細かく制御したい場合に役立ちます。sizeプロパティには、ページサイズを決めるための値として以下の4種類を指定できます。sizeプロパティで使える4つの値1. autoページボックスは、出力先の用紙（ターゲットシート）のサイズと向きに自動的に合わせて設定されます。特別な指定を行いたくない場合に便利なデフォルト的な値です。2. landscape出力先の向きを上書きし、横長（ランドスケープ）のページを生成します。ページボ

  9. CSSページメディア入門：ページボックスとページ領域の基本を解説

    CSSページメディアとはページメディア（Paged Media）は、連続メディア（Continuous Media）とは異なり、ドキュメントの内容が1つ以上の独立した「ページ」に分割されるメディアを指します。具体的には、紙への印刷物、OHPフィルム（透明シート）、コンピュータ画面上に表示されるページ形式のコンテンツなどが該当します。Webブラウザでスクロールしながら閲覧する通常の画面表示（連続メディア）と違い、印刷やPDF出力のような場面では、コンテンツをどのようにページへ割り付けるかが重要になります。CSSでは、このための専用の仕組みが用意されています。ページボックス（Page Box）の概

  10. CSSのpage-break-before・page-break-after・page-break-insideプロパティの使い方

    改ページ制御プロパティとはCSSの改ページ関連プロパティを使うと、印刷やPDF出力の際にコンテンツがどこで改ページされるかを細かく制御できます。主なプロパティは以下の3つです。page-break-before：要素の直前で改ページするかどうかを指定page-break-after：要素の直後で改ページするかどうかを指定page-break-inside：要素の内部での改ページを許可するかどうかを指定page-break-beforeとpage-break-afterの実用例たとえば、レベル1の見出し（h1）で新しい章を開始し、レベル2の見出し（h2）でセクションを区切る文書を考えてみましょう

  11. CSSで改ページを制御する方法｜page-breakプロパティの使い方

    印刷時の改ページ（ページ送り）を制御するには、page-break-before、page-break-after、page-break-inside の3つのCSSプロパティを使用します。 指定できるキーワード page-break-before と page-break-after は、どちらも auto / always / avoid / left / right の5つのキーワードを受け入れます。 auto … デフォルト値です。ブラウザが必要に応じて自動的に改ページを挿入します。 always … 要素の前または後に強制的に改ページを挿入します。 avoid … 要素の直前または

  12. CSSのorphans・widowsプロパティとは？ページ区切り時の行数を制御する方法

    組版用語としての「orphans（孤行）」と「widows（寡行）」 組版（タイポグラフィ）の世界では、orphans（孤行）はページ区切りの影響で段落の末尾部分が次のページの下部に取り残された行を指し、widows（寡行）はページ区切りの後に前のページから送られてきて、新しいページの上部にぽつんと残ってしまう行を指します。 印刷物において、ページの最上部や最下部にテキストが1行だけ孤立している状態は、一般的に見た目が美しくありません。そのため、多くの印刷業者は各ページの上下に少なくとも2行以上のテキストを残すように調整します。 orphansプロパティとwidowsプロパティの役割 CSSで

  13. CSSの@page疑似クラスを使って両面印刷のレイアウトを設定する方法

    書籍や冊子などの両面ドキュメントを印刷する場合、左ページと右ページではページボックス（余白の設定）を変えるのが一般的です。たとえば、製本側（とじしろ）にあたる部分は余白を広めに取り、外側の余白を狭くすることで、見開きでも読みやすいレイアウトになります。CSSでは、@page ルールに :left および :right の2つの疑似クラスを組み合わせることで、左右それぞれのページに異なるスタイルを適用できます。記述例以下のように、@page :left で左ページの余白を、@page :right で右ページの余白を個別に指定します。<style>    <

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

    CSS方位角（azimuth）プロパティの概要azimuth（アジマス）プロパティは、音声がどの水平方向から聞こえるかを指定するためのプロパティです。リスナーを中心としたサウンドステージをイメージし、音源の位置を角度やキーワードで表現します。なお、このプロパティはCSS2の音声スタイルシート（Aural Style Sheets）で定義されていたもので、現在はCSS Speech Moduleへと引き継がれています。モダンブラウザではほとんどサポートされていないため、実際の開発で使用する際は注意が必要です。指定できる値の一覧angle（角度） − -360deg〜360degの範囲で角度を指定

  15. CSSによる聴覚メディア(Aural Media)の基礎知識と活用シーン

    ドキュメントの聴覚レンダリング(音声出力)は、主に視覚障害のある方々によって利用されています。画面を見る代わりに、音声合成によって文書の内容を「聞く」ことで情報を取得できるのが大きな特徴です。聴覚レンダリングが活用される場面視覚的な表示ではなく、音声によってドキュメントへアクセスすることが有効な場面には、以下のような例が挙げられます。読み書きの学習研修・トレーニング車内など移動中のウェブアクセス家庭内エンターテインメント産業分野のマニュアルやドキュメント医療分野のドキュメント三次元空間と時間的空間の概念CSSの聴覚プロパティを使用する場合、その「キャンバス」は二つの空間概念から構成されます。一

  16. CSSのpause-afterプロパティとは?使い方と指定できる値を解説

    CSSのpause-afterプロパティとは pause-afterプロパティは、要素の内容を読み上げた直後に挿入される間隔(ポーズ)を指定するためのCSSプロパティです。主にスクリーンリーダーや音声合成による読み上げの場面で使用され、要素ごとの区切りをより自然に聞こえさせることを目的としています。 このプロパティには、以下の2種類の値を指定できます。 time(時間) 秒(s)やミリ秒(ms)といった絶対時間単位で、ポーズの長さを直接指定します。 記述例: pause-after: 2s; percentage(パーセント) speech-rate(読み上げ速度)プロパティの値の逆数をもとに

  17. CSSで作るウィグル（Wiggle）アニメーション効果の実装方法

    ウィグル（Wiggle）効果とは、要素を小刻みに素早く上下左右へ揺らすCSSアニメーションです。ボタンやアイコンなど、ユーザーの注意を引きたい場面で活用できる演出の一つです。本記事では、transformプロパティのskewX()関数を使って、要素を左右に傾けながら揺らすウィグルアニメーションの実装方法を解説します。 ウィグル効果の仕組み このアニメーションでは、@keyframesルール内でskewX()を使用し、要素の傾き角度を段階的に変化させています。9度→−8度→7度→−6度…というように、各キーフレームごとに角度が徐々に小さくなるため、振り子が次第に静止していくような自然な「揺れ」を

  18. CSSのpitchプロパティとは？読み上げ音声のピッチ指定方法を解説

    CSSのpitchプロパティとはpitchプロパティは、読み上げ音声（スピーチ音声）の平均的なピッチ（周波数）を指定するためのCSSプロパティです。音声の平均ピッチは、使用される音声ファミリー（voice family）によって異なります。例えば、標準的な男性の声の平均ピッチは約120Hzであるのに対し、女性の声では約210Hz程度とされています。このプロパティは主にスクリーンリーダーや音声合成（テキスト読み上げ）環境で効果を発揮し、聴覚ユーザーにとってより自然で聞き取りやすい音声出力を実現するために活用されます。指定できる値pitchプロパティには、以下の値を指定できます。frequency

  19. CSSスタイルシートのメディア依存関係を指定する2つの方法

    CSSでは、スタイルシートの適用先となるメディア(画面・印刷など)を指定することで、デバイスや出力形式ごとに最適な表示を実現できます。メディア依存関係を指定する方法は、主に以下の2つです。 @media や @import などの@ルールを使って、スタイルシート内で対象メディアを指定する HTMLなどの文書言語側で、対象メディアを指定する(link要素のmedia属性など) @mediaルールの記述例 @mediaルールを使うと、1つのスタイルシートの中でメディアごとに異なるスタイルを定義できます。以下は@mediaルールの基本的な記述例です。 <style> <!--

  20. CSSメディアタイプとは？10種類のメディアタイプ一覧と使い方を解説

    CSSメディアタイプとはCSSのメディアタイプ（Media Type）とは、スタイルシートがどの種類のデバイスや出力媒体向けに適用されるかを指定するための仕組みです。これを利用することで、同じHTML文書に対して、画面表示用・印刷用・音声読み上げ用など、用途に応じた異なるスタイルを定義できます。メディアタイプは、@mediaルールや<link>タグのmedia属性などを通じて指定します。CSSで利用できるメディアタイプ一覧以下は、CSSで定義されている主なメディアタイプの一覧です。No.値と説明1all（すべて）すべてのデバイスに適用されます。2aural（音声）音声合成装置（スク

Total 1579 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:67/79  20-コンピューター/Page Goto:1 61 62 63 64 65 66 67 68 69 70 71 72 73