Y-DESIGNER

BiNDでのホームページ制作に役立つ情報をお届けしています。

全2回!!DRESSなんて怖くない!!BiNDでレスポンシブなヒーローヘッダーを作ろう!!(前編)

f:id:y-designer:20170926041556j:plain

こんばんは。Y-DESIGNERの須山です。
BiNDなどのソフトでホームページを作っているとソフトの仕様の兼ね合いでデザインに縛りが出てしまいます。
例えば、モニターのサイズに合わせて縦横全体に広がって文字は常に中央表示になるようなことはできないって思っていませんか?

 

。。。

 

できるんですよ、これ。DRESS使いますけど。
でもコツと仕組みがわかればこれは簡単なので2回に分けて紹介して行きます。
週末も山梨の自宅にいますなんて意味のわからないこと書いてますが、これができるようになります。トレンドのヒーローヘッダをBiNDでも実現しましょう!!

因みにいきなり完成してるサイトデータでやらないでください。
CSSをいじるので全体的に体裁がおかしくなる可能性があります。その辺は自己責任で。

1,サイト設定からページの幅を設定しましょう。

f:id:y-designer:20170926042237j:plain

これをやる時は必ずページ全体は100%にしてください。全幅になりませんので。

コンテンツも一応100%にしておきます。

ブロック内コンテンツは文字とかが入るエリアですね。今回は1000pxにします。
最近はパソコンのモニターとかも大きくなったので1200pxとか1400pxくらいで設定しても面白いと思いますよ!

f:id:y-designer:20170926042756j:plain

するとブロックの幅が全て100%になりました。ブランクサイトで作る時はまずこれをしましょう。

2,背景画像を設定しましょう

f:id:y-designer:20170926042901j:plain

背景画像を設定します。今回はビルボードエリアで作業しています。コンテンツエリアでやろうとすると苦労しますのでこれをやるのはヘッダエリアかビルボードエリアがオススメです。サイズは大きめのデータを用意しましょう。全体に広がるようにストレッチにします。

3,テキストを入力

f:id:y-designer:20170926043107j:plain

ここでキャッチになるテキストを入力します。ポイントは段落スタイルは1種類しか使わないことです。複数使うと今回の方法はできません。今回は本文にします。

また改行したい位置が決まっているのであればこの時点で改行もしておきます。
『山梨の』と『自宅に』の間で改行しました。

できたら適用を押します。

f:id:y-designer:20170926043433j:plain

背景とテキストまで入りました。まだCSSは設定していないので文字は黒のままですね。小さい上に写真と同化して見えませんね。今回は文字のCSSもDRESSで設定します。

4,DRESSを開こう!!

f:id:y-designer:20170926043542j:plain

DRESSのボタンを押して新規作成にします。

f:id:y-designer:20170926043634j:plain

DRESSの名前は管理しやすい名前で大丈夫です。日本語でも大丈夫みたいです。今回は『sample』にしました。

ここまでできたらテンプレートを編集を押しましょう。

f:id:y-designer:20170926043741j:plain

編集の際は左下にある編集中のページでプレビューにチェックを入れます。実際の編集ページを見ながら編集ができるようになります。

f:id:y-designer:20170926043924j:plain

5,CSSを設定します

f:id:y-designer:20170926044122j:plain

今回はビルボードエリアに設定していますので適応範囲をビルボードエリアにします。

選択中の項目の右側にある鉛筆マークを押すとさらに詳細にエリアの指定ができます。
今回はブロックレイアウトをプレーンのままにしてありますのでブロックの選択をプレーンブロックにします。

ここまで設定したらオプションを選択の下にあるOKボタンを押して選択中の項目を閉じます。

デザイン設定を下に進んで行くと高度な設定のところに高さ(height)がありますのでそこをクリックします。

上の写真を同じように設定するにチェックを入れて数値は『100』単位は『vh』にします。

できたらOKを押します。これで横幅・高さ100%の可変の背景ができました!

まとめ

DRESSが登場したことでBiNDのデザインの自由度も格段に上がっています。
HTMLやCSSがわからなくてもホームページが作れるが売り文句のBiNDですがHTMLやCSSがわかれば、もっとステキなサイトが制作できます!!

せっかくある機能ですから練習用のサイトデータ作って練習してみてください。

次回は左上の小さな黒文字の『週末も山梨県の自宅にいます』のデザインをDRESSで変更していきます。

このBiNDの画面のまま後編にお進みください

blog.y-designer.com

(C)2017 Y-DESIGNER