Sprets
PC(キーボード) : → か enter を押す

スマホ/タブレット : 右側 をタッチ
Spretsの操作
PC(キーボード) : ← で前のページ

スマホ/タブレット は 左側 をタッチ

space でタイトルページ

Jキー で任意のページ
青いボックスに半角数字を入力してJキーかenter
 表示中は方向キー↑,↓でも選択可。(ブラウザによる)
Spretsの操作
Pキー : ページ番号 on/off 切替

Bキー : ブラックアウト on/off 切替

Sキー : スタイル変更
下に出る選択肢から←, → で選んでSキーかenter

だいたいのブラウザではF11キーでフルスクリーン
目次
操作方法
2
目次
4
このスライドについて
5
ダウンロードしたら
6
HTMLを編集する
7
タグについて
10
クラスについて
12
ページを構成するクラス
13
文字の配置
14
文字の大きさ
15
画像の挿入
16
文字の装飾
18
CSSなどを編集する
20
このスライドについて
このスライドはマニュアルとなっていますが、サンプルでもあります。
ダウンロードファイルにも含まれています。

右クリックなどからページのソースを見たり、テキストエディタで開いて参考にしてください。 コピーしてそのまま使っても大丈夫です。
ダウンロードしたら
ダウンロードが完了したら右クリックで展開(解凍)してください。

フォルダの中に「presen」や「manual」というHTMLファイルがあるので、 ブラウザで開けることを確認してください。

うまく表示できなければそのブラウザでは見れない可能性があります。 バージョンアップをするか、別のブラウザで見てください。
HTMLを編集する 1
ここではwindowsのメモ帳を例に説明しますが、他のエディタでもほとんど同じです。
 メモ帳を開いて、[ファイル]→[開く] よりpresenまたはmanualを開きます。
この時、文字コードが「UTF-8」になっていることを確認してください。 それ以外だと文字化けする可能性があります。
HTMLを編集する 2
無事に開けたら別の名前をつけて保存してください。
そのまま編集すると、サンプルが消えてしまいます。

保存するときは名前を「○○.html」として、 ファイルの形式は「すべてのファイル」を選択してください。
そして文字コードを「UTF-8」にしておくとwindows以外で開くときに文字化けしにくいです。
HTMLを編集する 3
別名で保存したら、文章を少し変更してみましょう。
上書き保存をしたらブラウザで保存したHTMLファイルを開いて、変わっているか確認してください。

うまく表示されないときはどこか間違っているので、HTMLを見直してください。
英数字は半角のほうがいいです。全角英数字はフォントの関係でバランスが悪いです。
タグについて 1
ここからはHTMLのソースを見ながらだとわかりやすいです。
Spretsでは基本に div と span を想定しています。
div は文字を入れる箱のようなもの、span は文字の範囲指定という認識でいいです。

タグは「< >」で囲み、タグの終わりには「< / >」を使用します。
この文はdivで囲んでいます。
この文はspanで囲んでいます。 divでは改行されますが、spanでは改行されません。
タグについて 2
ほかにもタグは使います。
div や span の中で改行するときは br を使用します。
また箇条書きに ol 、 ul 、 li も使います。
  1. ol は番号付き
  2. li は箇条書きの項目
  3. ol の中に li を入れる

  • ul は黒丸記号
  • ul でも ol と同じようにする

画像を挿入する img もありますが、16ページで説明します。
クラスについて
div や span 、li には「クラス」というものを設定できます。
CSSにスタイルの指定をしてあるので、HTMLに追加するだけで文字の装飾などができます。

div の横に半角スペースを入れ「class="○○"」とします。
クラス同士の間に半角スペースを入れると、複数のクラスを設定できます。

誤って全角スペースを入れるとブラウザで表示できなくなるおそれがあります。
ページを構成するクラス
  • slide : スライドの白い部分
  • top_title : タイトルページのタイトル
  • top_name : タイトルページの名前など
  • page_title : 各ページの見出し(タイトル)
  • container : 各ページの本文部分
文字の配置
文字の配置を設定するときは div を使用します。
left : 左寄せ(デフォルト)
center : 中央寄せ
right : 右寄せ

右寄せではない行で、右端にも置きたいときは
div の中に class="line_end" の
div を入れます

dual は二段組をできる幅に制限できます。
dual をひとつだけで使うことも可能です。
tab は左に余白を開けます
2重にすると更に開きます
文字の大きさ
箇条書きの li タグにもクラスを設定できます。
  1. list_1 は大きい(30pt)
  2. list_2 は少し大きい(25pt)
  3. list_3 は本文と同じ大きさ(20pt)
  4. list_none で記号を消せる


span や div でも文字の大きさは変えられます。
font_S が最小。 font_M は本文サイズ。
font_L が少し大きく、 font_XL は最大。
画像の挿入 1
挿入する画像は[src]の中の[pics]に入れてください。
HTML側は次ページで説明します。
画像の挿入 2
img の中の src="src/pics/○○○.△△"の○に画像の名前
△に画像の拡張子(png や jpg など)を入れてください。
クラスの設定は
pics_2 は縦200pxまで
pics_3 は縦300pxまで
pics_auto は縦400pxまで拡大・縮小されます。
pics_auto にしておけば勝手に横幅に合わせていい感じになります。
文字の装飾 1
bold : 太文字
italic : 斜体

red : 赤文字 、 green : 緑文字 、
blue : 青文字

マーカーや枠線をdivでするときは inline クラスを入れないと、 端から端まで適応されます。

mark_r : 赤のマーカー
mark_g : 緑のマーカー
mark_b : 青のマーカー
文字の装飾 2
border_r : 赤の枠線
border_g : 緑の枠線

border_b : 青の枠線
border_k : 黒の枠線

b_line_k : 黒枠線の下だけ、
b_line_b : 青枠線の下だけ
b_line_g : 緑枠線の下だけ、
b_line_r : 赤枠線の下だけ


以下はブラウザによって対応していないので、枠線の下を用意しました。
under_r : 赤の下線
under_g : 緑の下線
under_b : 青の下線
under_k : 黒の下線
CSSなどを編集する
CSSやJavaScriptを編集するときも、テキストエディタで開いて変更します。

プロパティとかはインターネットで調べてください。

CSSのファイル名は「style_○.css」で○のところは7、8、9…と順につけてください。
CSSを追加したら、Sprets.js のSTYLE_NMAX の数を増やしてください。