BiNDでホームページ制作 | Y-DESIGNER

HOME | BLOG | 20170130125951

BiNDでオシャレなホームページを制作する小技(height編)

2017.01.30 12:57

CSSBiND

こんにちは。BiNDでホームページを制作するY-DESIGNERの須山です。
本日はBiNDで画面いっぱいに背景画像を広げ、ブラウザの高さにフィットする方法を紹介します。

目次

ディスプレイサイズにフィットするデモサイト

デジタルステージさんのソフトで作るサイトで言えばLiveで作ったサイトで時々拝見するデザインです。
簡単なデモサイトをご覧ください。
近年のホームページの傾向でいうとヒーローヘッダでインパクトのあるファーストビューにしているウェブサイトをよく見ます。そんなデザインにも使える小技です。

BiNDでのheightの設定の仕方


heightとはそのブロックの高さを指定するCSSです。BiNDでheightを指定する場合はブロックエディタのCSSタブで設定します。今回はブロック全体の高さの設定なので、CSSをブロック自体に記述します。

heightで使う単位は”vh”

BiNDの機能上でてくるheightの単位はpxと%のみですが、”vh”という単位もあります。今回は直接”100vh”つまりディスプレイの高さ100%という設定を入力にします。
因みに、ビルボードだけを100vhにしたい場合は、もっと簡単。
プロパティ設定→ページデザイン→背景画像のビルボードの歯車をクリック

”ウィンドウの高さ100%に合わせる”にチェックを入れるだけ。簡単ですね。BiNDなら!

背景の設定はストレッチ


パターンなどではなく、一枚ものの写真を背景画像にしたい場合の配置方法はストレッチにしましょう。ディスプレイサイズによって広がってくれます。最近は大きなディスプレイも増えましたのでストレッチにしておいた方がキレイに表示されます。

まとめ

スマートフォンやパソコン、パソコンも様々なサイズのデバイスがありますので、どんなデバイスでもちゃんとホームページが表示されるように工夫していきましょう。heightの設定を活かして、写真を活かしたホームページをぜひ作ってみてください。

ホームページ制作の特徴・料金プランはこちら
ホームページの管理に関してはこちら
ホームページ・印刷物の制作の流れはこちら
ホームページ制作のコンテンツのご案内hこちら
BiNDでのホームページに関してのよくある質問
制作に関するお問い合わせはこちら
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |