それマグで!

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

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

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>スライドショー1</h1>
</section>

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

スライドショーの指定

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

<style>
@media projection{
	section{
		display: block;
		page-break-after: always; 
	}
}
</style>
<section>
<h1>スライドショー1</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 使い方まとめ

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

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

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

デメリット

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

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