SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事(AD)

アイデアをどこでも形に!Dreamweaver+Proto連携
~Adobe Creative Cloudの上手な活用法

  • このエントリーをはてなブックマークに追加

Adobe Protoを使ったワイヤーフレームの作成(3)挿入アイテムを編集する

 挿入したアイテムの編集方法を解説します。

 挿入したアイテムをタップすると、その四辺に揃うように青いガイドが表示されます。このガイドを表示させながらドラッグすれば、正確に、水平・垂直方向に移動できます。

 タップ後、四隅、および、四辺の中央には大きな○が表示されます。この○をドラッグすれば、アイテムを変形できます。また、画面下部には、カラー(白から黒まで20%刻みで6段階)、フォント(ゴシック体、明朝体、等幅)、フォントサイズ(6‐18ポイント)、行揃えなどを設定するパネルが表示されます。

 アイテムの横にあるをタップすると、メニューが開き、次の2つのボタンが表示されます。

  • Duplicate(複製)
  • Delete(削除)

 段落テキストは変更できませんが、見出しのテキストは変更することが可能です。

 上部右上にあるをクリックすると、グループ化を行う画面に切り替わります。グループ化したいアイテムをタップして追加し、[Group]ボタンをクリックします。グループ化を行うと、一緒に移動したり、まとめて複製できるようになります。

 画面の右上にあるをタップすると、ページ編集を行うペイン(領域)が開きます。[New Page]ボタンをタップすると、新しいページが開きます。

 例えば、ナビゲーションバーを挿入し、それぞれのボタンに対してリンク先を設定したい場合には、ナビゲーションバーをタップし、画面下に表示されるプロパティで[LINK ITEM:Menu 2]、[LINK TO:Page 1]のように指定します。ナビゲーションバーはアイテムとして挿入されているので、ここのボタンを選択できないことに留意してください。

次のページ
ProtoプロジェクトをAdobe Creative Cloudに保存する

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

鷹野 雅弘(タカノ マサヒロ)

 株式会社スイッチ Webサイトの構築やコンサルティングを中心に、WebやDTPに関しての講演やトレーニングのほか、書籍の企画や編集、スクールなどのカリキュラム開発も手がける。 2005年からCSS Niteを主宰。日本全国、および海外に展開し、260回を超える関連イベントを通し、のべ36,000名を超える方が参加している。 テクニカルライターとして20冊以上の著書を持ち、総販売数は14万部を超える。主な著書に『よくわかるDreamweaverの教科書』(共著、マイナビ)、企画編集を行った書籍に『現場のプロから学ぶXHTML+CSS』(マイナビ)など。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6721 2013/01/15 17:33

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング