Dashcodeの基本を覚える (3/5)

プロジェクトが作成されると、シートが消え、何もないページが表示された状態のウインドウになります。ウインドウの左側には各種のツール類が並び、右側のエリアにWebページのデザインが表示されます。左側のツールから、アイコンや項目をクリックすると、作成するWebアプリの設定や各種の情報などを行う画面が現れるようになっています。

では、画面のデザインをデザインしましょう。ウインドウ右上に見える「ライブラリ」というアイコンをクリックしてください。画面に「ライブラリ」というツールパレットが現れます。

このツールパレットは、上部に「部品」「コード」「写真」といった切り替えボタンがついており、「部品」が選択されていると、Webページに配置して使える部品類が一覧リストで表示されます。ここから使いたいものをページのデザイン画面にドラッグ＆ドロップすると、その部品を追加することができます。

では、ツールパレットから「テキスト」という部品をドラッグして配置してください。これは文字通り、テキストを表示する部品です。配置したら、位置や大きさを適当に調整しましょう。表示テキストは、部品をダブルクリックすると編集できるようになります。これらを調整すれば、すぐに使えるのですが、ちょっとテキストのフォントサイズが小さい気がしますね。これも調整しておきましょう。

ウインドウの右上にある「インスペクタ」というアイコンをクリックしてください。画面に、ライブラリとは別のパレットが現れます。このインスペクタというパレットは、選択した部品のさまざまな設定や属性を編集するためのものです。デザイン画面から部品を選択すると、その部品の設定などがここに表示され、編集できるようになります。

このパレットでは、一番上に６つのアイコンが横一列に表示され、ここからどれかをクリックすると、その編集内容が下に表示されるようになっています。用意されているアイコン類は、以下のようになります。（左から順に説明）

属性――IDや名前などを設定します。
塗りつぶしと線――部品の輪郭線や内部の色などを設定します。
メトリックス――大きさや位置に関する設定です。
テキスト――表示テキストのフォントに関する設定です。
バインド――さまざまな値の関連付けを行うものです。
ビヘイビア――イベントによる処理の割付などを行います。

これらは、すぐに使い方を覚えないといけないわけではありません。とりあえず、以下のようにそれぞれの部品を設定しておきましょう。

1. 「属性」アイコンを選びます。
2. IDを「text1」と設定しておきます。今回は特に使いませんが、以後、利用する予定なので……。
3. 「テキスト」アイコンを選択します。
4. フォントサイズやフォントの種類を適当なものに調整します。

これで基本的な画面デザインの仕方はわかってきました。部品を配置し、位置や大きさを調整して、パレットからIDや表示に関する設定・属性を調整していく。これで基本的なページのデザインはできるようになります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。