Y-DESIGNER

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

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

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

おはようございます。Y-DESIGNERの須山です。

前回の記事の続きです。前回記事をみていない方は先に前編を見てからこちらの記事をご覧ください。

blog.y-designer.com

この記事ではBiNDのDRESS機能を使って文字の装飾と配置を設定していきます。前編よりも難易度が上がりますがヒーローヘッダーのために後編もご覧ください。

1,一番の肝『position』

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

前編の続きから設定していきます。DRESSの適応範囲はビルボードエリア、ブロックの選択はプレーンブロックのままです。

デザインの設定を下にスクロールしていくと高度な設定の中の一番下の方にポジション(position)という項目があるのでクリックし、設定にチェックしrelativeにします。

positionのrelativeというのは簡単にいうと基準点を設定したということになります。

これを解説すると複雑になるので今回はそのレベルでご理解ください。

2,DRESSの適応範囲を変更

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

選択中の項目の右にある鉛筆マークをクリックして選択中の項目を展開します。

段落スタイルを選択から本文を選択します。

これでビルボードエリアの中のプレーンブロックの中の本文にだけCSSをかける準備ができました。

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

3,本文のCSSを変更する

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

デザイン設定の以下の項目を設定します。

  • 文字色を白(#ffffff)に設定
  • 文字サイズを5emに設定
  • 文字の太さを900に設定
  • 文字間隔を0.2emに設定
  • 行の高さを1.5に設定
  • 文字揃え/ヨコ位置をcenterに設定

これで文字が大きくなり見やすくなりました。

4,文字の配置を調整する

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

先ほどビルボードエリアの中のプレーンブロックに設定した時のようにpositionの設定をします。今回はabsoluteにします。

これでビルボードの中のプレーンブロックを基準にしてビルボードの中のプレーンブロックの本文の位置を指定する準備ができました。

現状、位置を指定していないのでさっきまで上の中央にあった文字が左上に移動していると思います。

ここから文字の位置を指定していきます。

5,文字の位置を設定する

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

ポジション(position)の横にあるトップ(top)を50%に設定します。

次にレフト(left)も50%に設定します。

すると上の写真のような配置になったと思います。

これはビルボードの中のプレーンブロックの本文の位置を上から50%、左から50%の位置にしなさいということになります。青丸の部分(本文エリアの左上)が本文の基準位置です。

まだ縦横中央に文字が来ませんね。次で仕上げます。

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

ポジション(position)の少し上にあるトランスフォーム(transform)をクリックします。
設定するにチェックし、translate(-50%,-50%)と入力します。

すると文字が縦横中央に配置されました!

これがなんでこうなるかは、またの機会に説明させていただきます。
今回はこうすればできるレベルで覚えていただく方が良いと思いますので。

最後にDRESSの右下の保存ボタンを押し、画面が切り替わったら右下の適用ボタンを押します。

6,ヒーローヘッダーの完成!!

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

BiND編集画面に戻ると、縦横中央にテキストが配置されています。

ブラウザでも確認してみましょう!

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

ブラウザを全幅で広げた状態です。しっかり縦横中央に来ています。

文字がもう少し大きくてもよかったですね。

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

ブラウザを縮めてみました。文字はしっかり縦横中央に配置されています。

これで完成です!
(スマホ表示の場合は別途DRESSや背景画像を設定する必要があります。今回はパソコン表示です。)

まとめ

今までは『このブロックを直前のブロックに重ねる』や上下の余白を広げたりして私も設定していましたが全てのモニターの高さに合わせて表示することができませんでした。

今回の設定をすれば、どのモニターでみても画面いっぱいに広がるヒーローヘッダを作成することができます!

前編でもお伝えしましたがすでに完成しているサイトデータに新たにDRESSを設定すると表示が崩れますのでまずは練習用のサイトデータを作って問題が起きない環境で試してみてください。

BiNDの困った、制作代行はY-DESIGNERにお任せ!!

y-designer.com

 

(C)2017 Y-DESIGNER