Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Prezi CSS Setting & Tips

As you can see the contents of the CSS, and has released a set to be able to edit. Great prezi that describes css                             >>http://prezi.com/89u-9dkkd4s7/taking-control-of-the-css-editor/         
by

wabsuke *

on 15 September 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Prezi CSS Setting & Tips

分身の術!
Cascading Style Sheets
http://www.colorhexa.com/
Title
フォントを”やさしさBold”に指定
フォントの種類を”head(見出し)”
フォントの指定
背景色
Subtitle
フォントを”migmix-2p-bold”
フォントの種類を”strong(強調)”
#fff→         white(白)
フォントのカラー指定
丸フレーム
角枠フレーム
フレームの指定
フレームの厚み
グラデーションの終色
輪郭線の厚み
輪郭線の色
編集画面で表示される
図形内○マーク側が始点
※通常○マークは上
いじらなくてOK
文字余白
長方形フレーム
矢印とラインの設定
矢印とラインのスタイルプリセットの設定
#fff 白
枠線の厚み
#004f75 濃紺
Shapesのスタイルプリセットの設定
マーカーの透明度
ラインとマーカーの設定
Alpha=透明度 
1=100%(不透明) 0=透明
編集画面表示にて選択可能限度を超えた時にオブジェクトの彩度表示の切り替え
grad→gradation(グラデーション)
パス-パスラインの設定
グリッド
変更できない?
src: url→source 参照先URL
CSSカラー見本確認サイト
Body
フォントを"migmix-2p-r"
フォントの種類を"body(本文)"
色指定ナンバー
値0;マウスオーバーしないと背景色と同化
値を増大;余白部分が増え、文字編集に入りづらい
テキスト編集 選択可能状態
テキスト編集 選択不可状態
(大見出し)
(小見出し)
(本文)
矢印
ライン
記述エラー警告
スタイルプリセット
100 ベタ塗り円形
10 枠線円形(ドーナツ形状)
グラデーションの透明度
輪郭線の透明度
1;白(背景色?)
0;変化なし
※shiftを押すと
選択不可解除可能
{
gradEndColor: #004f75;
borderColor: #004f75;
color: #fff;
gradStartColor: #004f75;
borderThickness: 0;
}
濃紺図形の記述
テーマを変更してshapesの色が
意図しないものになった場合
なるべくまっすぐ
マーカーを引く
マーカーショートカット「S」
「ctrl+D」
F - Draw frame, press again to change frame type         (bracket, circle, rectangle or hidden)
L - Load a file on your canvas (image, pdf, video, swf)
S - Draw a shape, press again to change shape type         (arrow, line, rectangle, circle, triangle)
P - Go to Path mode
1 - Zoom in
2 - Zoom out
3 - Rotate clockwise
4 - Rotate counter clockwise
Delete, Backspace - Delete selected object(s)
Left, Right, Up, Down - Move the selection 1 pixels
SHIFT + Left, Right, Up, Down - Move the selection 10         pixels
CTRL + S - Save prezi
CTRL + Z - Undo last action
CTRL + Y - Redo last undone action
CTRL + D - Duplicate selected object(s)
CTRL + C - Copy selected object(s)
CTRL + V - Paste copied object(s)
CTRL + SHIFT + M - Toggle screen ratio between the          values: 4:3, 16:9, and off.
CTRL + SHIFT +(Alt)+ C - Opens the Prezi CSS editor.
Esc (Escape key) - Finish current action or
close open dialog
Space - Enters Present mode
①のフレームを選択して「削除」
するとテキストまで消えてしまう...
Tips
テキストの
同様に文字を反転マーキングしてドラッグするとテキストを分割できる 
※文書量が多い時に単語の位置を変更する
 のに便利
再配置したい対象の単語(部分)を改行してアクティブ行アイコンを表示
ドラッグして段落内で順序を変更、
またはテキスト Box外にドラッグすると文章を分割できる
分身の術!
選択してアクティブ化
編集ショートカット一覧
Editing Shortcuts
オブジェクトをコピーする
抜き出したい
選択して反転
テキスト部分を
既に描いたフレームのみを消す
ある程度の距離を素早く引く
(ゆっくり引かない)
※コピーしたい先が遠い場合は
「ctrl+C」→「ctrl+V」が楽
ナビゲーターを使ってフォーカス
ナビゲーターパネルをクリックすることで登録したフレームに
フォーカス出来る
(下段パス一覧と同様)
パス(カメラ)を設定しないフレームをclickしてもフォーカス出来る
例えば透明フレームを90°ずらして
配置して画面の回転をスムーズに行う事が出来る
こまかい回転は「3」  で可能
(キーボードショートカット)
「4」
縦横比を自由に変えれられる中抜けの枠線も作れる
90°回転
して設置
②を選択すると編集画面が  1クリックで回転出来る
※但しここで設定すると
すべて
のshapeに適応されてしまうのでshapeから記述を削除し、
スタ イルに記述する
のが吉
※余白を含めてオブジェクトとして認識される
ので余白部分が編集エリアからはみ出でも選択自体が出来ない
画面
オブジェクトの自由配置
オブジェクトを配置する際に「   」を
押しながら配置すると他のオブジェクト
への参照・スナップをきって配置できる
画面
マーカーを引く際にマーカーの幅を
   薄く表示してくれると嬉しい
※基本はshapeの挿入;一度マーカーを選択すると      「s」のプリセットがマーカーになる
グラデーションの始色
グラデーションの始色
image
※要望 
試しにココらへんを
クリックすると…





す。

 直感的には「3  4」の動きは
逆がいいかなと。または「R」+
   クリックドラッグでrotateとか


透明フレーム
CSS編集
※要望
Alt
※ちなみにナビゲーター上では
&キャンバスの回転
http://prezi.com/wquadnx_nujq/presentation/
↓気になったら↓
回転する枠はズレて表示される
(回転させた方向に肩が下がる)
オマケ
このpreziの日本語表示を英語表示に変えると…
マウスオーバーしてもクリックできない
※彩度が下がった表示になる
コンテンツと共にフレームを削除
こっち。
ロゴのフォントと一緒に
なってちょとカワイイ。
テキストマーカー
text.title-background
{
background-alpha: 0.9;
background-padding-bottom: 4;
background-padding: 4;
background-color: #ff5;
}

text.subtitle-background
{
background-alpha: 0.9;
background-padding-bottom: 4;
background-padding: 4;
background-color: #bff;
}

text.body-background
{
background-alpha: 0.9;
background-padding-bottom: 5;
background-padding: 7;
background-color: #00d77d;
}
マーカー色はCSSのココを変更
CSS書き換え用フォント一覧
書き換え範囲
残す。
※日本語フォントは.swf 欧文フォントは.keg
(但し日本語フォントはダサゴシック)
余分な半角スペース、 ; や : の打ち間違いなどを確認して修正
それ以外の場合は数値が範囲外
下地隠しに白背景作らなくてもおk!便利だね!
※Photoshopのアルファチャンネルを連想してください
※もしくは追加 日本語テーマに設定がない場合グレーで表示されるよ!
ここまで!忘れずに
コピペしてね。
クリックして展開
編集用にコピペするには?
テキスト背景色を編集するなら
ここに追加記載するとわかり易い
イメージ
Duplicate
or CTRL + SHIFT + Alt+C
※ CSS設定ではカラーは
Hexコード
(
6ケタ
)を使用
これ
CSS編集で出来る事。
・フォントの変更

・各種 色(透明度)の変更
テーマの
の設定
工夫次第でトレーシングペーパーを
被せたような表現も可能
応用→トレペ効果、暗転表現
抜き出し
カスタム
※限度があるので微細に動かすには
拡大して
矢印(
← ↑↓ →

click, activate object
keep same size!
再配
文章の中でフレーズを強調したい時、レイアウトが許せない時のカーニングの変わりなど

Alt
を押しながら選択抜き出しすると
必要な文字の
コピー
が出来る
選択抜き出し
行抜き出し
オブジェクトの選択
Shiftを押しながらドラッグ→一括選択
Shiftを押す事で非アクティブ(低彩度)の解除
Shift+Alt
を押しながらドラッグ(矩形選択)
     → (細くて長い線などに有効)
Shift or Ctrlを押しながら個別再選択→個別選択解除

オブジェクトの
一部
をドラッグするだけで選択出来る
Use the reference of the layout of the frame
Screen Ratio off
template
フォントの変更
背景色と選択領域の変更
フォントカラーの変更
フレームの設定
編集画面の中に図形が入っている状態
いじらなくてOK
と言うかいじっても実利はない
オブジェクトを拡大して行くと
彩度が低くなり
選択できない状態なった時の表示の設定
Shapesの設定(△と□)
ラインで四角を作らなくていい!
線の厚みと色だけを設定
塗りつぶし色を透明に設定
お好みで。
フレーム内レイアウトとプレゼン時の可視範囲確認の為のテンプレート
オブジェクトが
選択できなくなった場合
Try,click around here
クリックで切り替え
change a default font color
狭いってば!
暗転効果も可能!
Tip!
この方法で
フレームの大きさを一定にする
事が出来る→フレーム間の余計なズームなどをなくす効果
影表現も簡単!
強制選択
+Alt, copy text
State which can be selected and edit
(Active)
State which can not be selected (White out)
テキストの余白設定
矢印とラインの設定
矢印とラインの
スタイルプリセットの設定
Shapesの設定(○)
マーカーの設定
該当機能なし?
編集画面の設定
書き換え範囲
書き換え範囲
透明swf.なのでダウンロードして使う場合はグレー部分をクリックしてね!
Prezi
padding area
この範囲が編集エリアに入りきらない状態に
なるとホワイトアウトする
オブジェクト(余白含む)の一部が
編集エリアに入りきらない時の見え方
Should not change is good
draw a straight line with a marker
なんちゃらかんちゃらのテキスト
テキスト
例えばこんな表現
Select a objects
+shift&drug
Collective Selection
Forced select
Release of the white-out
Free placement of objects
Extract text
編集エリア
editing area
書き換え範囲
書き換え範囲
ウィールの1スクロール分

33%拡大
33%縮小
マーカーの基準太さは
「Undo」の文字高
※編集画面上部
move the mouse quickly
フレーム設置目安
干渉マージン
Make a copy→Edit→Add to My collection
文字背景色
Try to select this line, after you copy this prezi
一部分ドラッグで選択ができる
フレームも選択されるから注意が必要
ここらへんで部分ドラッグ
change a font
change a background
color
クリックして一覧へ飛びます
Rewrite range
remain
japanese font's extension is .swf, alphabet font is .keg
目安の枠内にアクティブ枠(青枠)の端が
来るように配置すると綺麗にはまるよ
petition
petition
It
will
be
like
this.

test TEST
画面を拡大縮小しないで文字を打ち
マーカーを引く 文字高といっしょ
I want to convert a line to marker
Conversion by right-clicking
レイアウト中に が邪魔な時はアクティブ枠


クリックしながら矢印で微細移動(アイコンが消えるよ)
When this icon obstructive
It disappears when you click in the active area, and move object by ←↑↓→ or move mouse
And keep in mind that it become translucent Depending zoom
Hurts!
see you!
click!
もしくはオブジェクトをアクティブ化しないで移動
font name
font name
click this square
select a color
font name
font name
click, jump to the link
Use the hex code(6 digits) in css setting
copy the Hexcode
_
padding area over the edeting area
※文字の上を選択


マウスオーバーすると

と白の細線枠が現れて
クリックして編集モードに入れる
※正確にはHexadecimal (16進数) のHex
16:9
・背景の変更
マーカーの色
マーカーの太さをコントロールする
文字を打った状態のままで拡大縮小しないでマーカーを引く
(※但し矢印による微細移動はできない)
再配置
win7
今はもう違うよ!
Full transcript