シニアから始めるbubble！TPを作りましょう Part 1.

・画面サイズを決める

bubbleはレスポンシブでPC.タブレット.スマホの対応ができます。

今回はPC版をつくりましょう！

準備編で開いた画面にある灰色と白のラインをGrid&borders(画面上)で

消すことと幅を調整できます。初めはあった方がやりやすいのでこのまま

使います。

画面をクリックすると黒い部分の「Propety area」(プロパティーエリア)が

表示されます。左上にページ名を確認して画面サイズを入力します。

Container layoutをColumn(縦)  Presee page widthをFull widthに設定

Layoutのwidth(幅)foy Ul builder 1200px Min Height(高さ)3146pxを

入力します。これで画面サイズの設定ができました。

  ・ヘッダーを作る 

TPの構成は上からヘッダー・ファーストビュー・コンテンツ(製品)

理念・フッターとします。

一番上のヘッダーから作りましょう！

1.ヘッダーの本体を作る

左側ContainersのGroupをドラッグ＆ドロップで一番上に置いてください

Layout→Container layoutをRow 

             width1200px  Min Height60px

             Make this element fixed-widthの

             チェックを外す

　　       Fit height to contentに

             チェックを入れる

Appearance→Style AccributeのDatach styleをクリックして開く

　　　　　　　Background style→Flat color

                     Color→#082747(何色でもいいです)に設定します。

2.ヘッダーの中にロゴ・製品・資料・サービスを作ります

ロゴは事前に作り左側Visual elementsのImageで出力しましたが

Textでも作れます。

ロゴ→width 200px Height 45px (ロゴのサイズに合わせてください)

画像を参考にしてください

製品・資料・サービスは左側Visual elementsのTextで製品を作ます。

(↓画像のところで文字入力ができます)

それをコピーして資料・サービスを作ります。

この3文字を選んでGroup Rowにします

Container alignmentで3種類の文字を均等に配置します ↓画像

 ロゴと3種類の文字をContainer alignmentで両端に配置します ↓画像

ヘッダーができました！

Part 2.はファーストビューとコンテンツ(製品)をつくりましょう！

※bubbleはドラッグ＆ドロップで短時間でできます。

※説明文と画像で分からない方はメッセージでご説明いたします。