エレメントの作成
では、ステージ上にエレメントを作成してみます。ツールパネルの矩形ツールを選択して、ステージ上でドラッグします。ドラッグした範囲に矩形エレメントが作成されました。自動で選択ツールに切り替わり、作成した矩形が選択されています。プロパティパネルには、作成した矩形エレメントのプロパティが表示されました。
とりあえず矩形エレメントが作成されましたが、マウスのドラッグで作ったので、位置もサイズも大雑把です。幅と高さを100、座標をx=50、y=50に指定したいと思います。プロパティパネルからLocationとSizeを入力します。Sizeは縦横比固定モードになっていると、一方が変わるともう一方も変わってしまうので、必要に応じてオン／オフを切り替えて下さい。
次は、角丸矩形エレメントを作成します。角丸矩形ツールを選択して、ステージ上でドラッグします。角丸矩形エレメントが描画され、プロパティパネルに角丸矩形のプロパティが表示されます。
実は、矩形ツールと角丸矩形ツール描いた矩形のプロパティの項目はどちらも同じです。プロパティパネル下部に角の半径の値があり、0が指定されていると、角の丸みが無い矩形になります。矩形ツールと角丸矩形ツールの違いは、描画される矩形の角丸の初期値が異なるのみです。
では、描画した角丸矩形の幅と高さを100、座標をx=150,y=150、角丸の半径を50に指定してみます。角丸半径を一辺の半分の値にしたので、角丸矩形は正円になりました。
エレメントの変形は、プロパティパネルから行う他にも、選択ツールや変形ツールを使用してマウス操作で行うことも出来ます。選択ツールでサイズ変更した場合はSizeが変更され、変形ツールの場合はScaleが変更されるという違いがあります。
同じ要領で、テキスト描画ツールを選択して、テキストエレメントも作成してみます。テキストエレメントは領域を指定すると自動でテキストを折り返してくれますが、半角文字列がスペース無しで連続していると、折り返しは効かず、領域をはみ出してしまうようです。
プレビュー
作成したHTMLを、ブラウザでプレビューしてみます。［File］メニューの［Preview In Browser］を選択すると、デフォルトブラウザが起動して、作成したHTMLが表示されます。頻繁に使う機能なので、ショートカットの「Ctrl+Enter」は覚えておいたほうが良いと思います。
もしHTML5とCSS3に対応していないブラウザの場合、正しく表示されません。新しいブラウザをインストールして、デフォルトブラウザに設定してから再度試してみてください。
