【ハウツー】簡単プレゼンツールOperaShow (2) CSSを組み合わせることによって多彩な表現が可能 | パソコン

【ハウツー】

簡単プレゼンツールOperaShow

2 CSSを組み合わせることによって多彩な表現が可能

石田優子　 [2004/01/09]

印刷

先頭
前へ
- 1
- 2
- ／2

前述したスタイルシートとhtmlファイルを組み合わせることによって、OperaShow機能を有効に活用することが可能になる。そこで、以下のようなhtmlのbody部分と前述したスタイルシートを組み合わせてみる。

○html本文の記述例


<body>

<h1>主なアクセシビリティ指針(1)</h1>

<hr>

<h2>WCAG　1.0</h2>

<ol>

  <li>音声およびビジュアルのコンテンツは、代替形式も提供する</li>

(以下略)

</ol>

<h1 class="break">主なアクセシビリティ指針(2)</h1>

<hr>

<h2>日本-法的拘束力のある指針はない</h2>

<ul>

  <li>IT戦略会議- WCAGの優先度1相当</li>

(以下略)

</ul>

</body>

これをOperaの通常の画面で表示すると、以下のようになる。

上記のhtmlをOperaで表示したところ


ここで[F11]キーを押すとフルスクリーンモードになり、@media projectionで指定されているスタイルシートによって、文字サイズと書体、カラーが変わる。	さらに、[Page Down]キーを押すと、2ページ目の画面に切り替わる。

これは、スタイルシートの@media projection内で


.break{

page-break-before : always;

}

と指定し、html内で<h1 class="break">主なアクセシビリティ指針(2)</h1>としているため、breakクラスを適用した要素の前でプレゼンテーション時には改ページされるからだ。

このようにして、プレゼンテーション時には1画面ごと、通常表示時には印刷に便利な長いページという切り分けを簡単に行える。CSS2のメディアタイプをサポートしていないブラウザでは通常のhtmlファイルとして表示されるだけなので、Webサイトへの掲載時も問題がない。

○プレゼンテーション時でのみ表示/非表示の設定も可能

また、スタイルシート内で、プレゼンテーション時には非表示にし、通常表示時には表示する、あるいは、その逆の指定することもできる。先ほどのスタイルシートの@media projection内に以下のような行を追加すると、dateというクラス名のDIV要素はプレゼンテーション時には表示されなくなる。


DIV.date

display : none

}

スタイルシートにはこのように指定し、html本文には


<div class="date">

作成日2004年1月10日

</div>

のように追加すると、通常表示時にはこの文章が表示されるが、プレゼンテーション用の表示では作成日は表示されないようになる。

上記の手順で、通常表示時とプレゼンテーション時で表示/非表示を切り替えることができる

○ひとつのhtmlファイルを用途に応じて気軽に切り替えられる簡便さ

このように、OperaのOperaShowの機能とCSS2のメディアタイプを組み合わせることで、ひとつのhtmlファイルの見栄えをプレゼンテーション用と通常表示用と手軽に切り替えることができる。プレゼンテーションだけでなく、たとえば@media projectionで文字部分をすべて消し、プレゼンテーション用の画面では写真画像のみのスライドを表示するといった使い方も考えられる。

実際にメディアタイプを使ったOperaShow用のhtmlファイルが、OperaShowの説明ページ( http://www.jp.opera.com/support/operashow/ )で使われている。Operaでこのページを閲覧した状態で[F11]キーを押してみて、表示の切り替わり方を試してみると面白いだろう。

(石田優子)

先頭
前へ
- 1
- 2
- ／2

Opera 7.20日本語版が正式公開 - カンファレンスではTRON版の開発も表明 [2003/9/29]

簡単プレゼンツールOperaShow

2 CSSを組み合わせることによって多彩な表現が可能

関連記事

関連サイト

新着記事

特設サイトの情報

人気記事

イチオシ記事

新着記事

特別企画

マイナビニュースマガジン