OperaでHTMLをスライドショーする。お手軽テクニック

Operaのスライドショー機能をm61kに教えて貰いました。Operaのスライドショー機能の存在は知ってたけど、まともに動いているのを間近に見たのは初めてでした。

Operaにはスライドショー機能がありまして。Styleシートを定義するだけで使える。
JavaScriptもいらない。

使い方は簡単

@media projection
page-break-after: always;

を使ったHTMLを作る

F11 を押して全画面表示にする。

表示サンプル

Operaスライドショーつかいかた

原理は簡単。印刷プレビューと同じ。CSSで改ページをDIVに指定する。
media projectionを指定するだけ。全画面表示は projectionのCSSが有効になります。

改ページの指定方法

CSSの属性に改ページを指定する属性値があります。
page-break-after: always;
always が指定されたブロック要素が終れば改ページされます。

改ページの指定例

<style>
	section{
		display: block;
		page-break-after: always; 
	}
</style>
<section>
<h1>スライドショー１</h1>
</section>

これでSectionが1ページに収まるようになる。

スライドショーの指定

スライドショー時のCSSを@mediaで指定する

<style>
@media projection{
	section{
		display: block;
		page-break-after: always; 
	}
}
</style>
<section>
<h1>スライドショー１</h1>
</section>

m16kさんのスライドショーからの抜粋

サンプルHTML

<!doctype html>
<head>
<meta charset="UTF-8">
<title>「使える」ウェブブラウザ Opera</title>
<style>
@media screen{
	*{ display: none; } # Opera Show 
}
@media projection{
	body{
		background: #ddd url('opera.jpg') fixed;
		font-family: "Nimbus Sans L";
		font-size: 240%;
		color: #000;
	}
	section{
		display: block;
		padding: 3%;
		page-break-after: always; /*←ここ！！！！！*/
	}
	li{
		line-height: 1.5em;
	}
}
</style>
</head>
<body>
<section>
	<h1 style="margin: 8%; text-align: center;">「使える」ウェブブラウザ Opera</h1>
	<p style="text-align: center;">Makoto XXXX</p>
	<p style="text-align: center;"><strong>Powered by Opera Show</strong></p>
</section>
</body>

@media screen でスライドショー始まる前は非表示にしている。

Opera Show 使い方まとめ

一番外側のブロック要素を指定する（DIVまたはSection)
@media projection を指定する。
F11キーで全画面表示にする。

まとめ Operaスライドショーを使うと次のことが嬉しい。

HTMLでスライドショーを作れる
Wiki記法やはてな機能パーサーを使える。
CSSを使い回せる。
JavaScriptの実演も楽
印刷物も簡単に作れる。

デメリット

PDFにスルのめんどくさい
GoogleDocsやSlideshareになげるときPDF経由

HTMLで掛けるのでメリットの方が多いですね。

それマグで！

知識はカップより、マグでゆっくり頂きます。　takuya_1stのブログ