ヘッダーを簡単に設置できる『Luxbar』レスポンシブもばっちり！

こんにちは！プロクラスの渡辺です。
ここ最近、急いでサイトを作る機会があり、時間短縮のためにいろいろなツールを探していました。

レスポンシブ対応をしているヘッダーを組むのも早くない自覚があるので簡単に素早く設置できる何かがないかと思っていたところ、『Luxbar』にたどり着きました！！
超初心者でも問題ありません！

『Luxber』がどんなものか試してみる！

Demoページがあるのでそれで試してもらったらいいと思います！
Demoページのウィンドウを縮めたりして試してみてください、ばっちりレスポンシブ対応していますよね！
【Luxber Demoページ】https://balzss.github.io/luxbar/

これ、すべてcssだけでできているんですが、配布されているものをダウンロードするか、CDNがあるのでいろんな環境に合わせて使い分けてください 😉

Luxberを設置する①

ヘッダーのhtmlはまだ組まないで！！ちょっと待ってください！ 😥

とりあえず、CDNを設置しましょう！
ダウンロードして使いたい方はその下のボタンからダウンロードも可能です 😀
赤枠で囲ったコードをコピぺするだけです。こんなに簡単でいいんでしょうか…！:-D

次です。
Demoページ、CDNやダウンロードの項目の次はこんな感じになっています。

なにやらいろいろ設定できそうです。もっとスクロールするとコードが見えてきます。
なんと、上の部分で色々設定したコードがコピーできちゃうんです！すごい！！

こんなことが変更できます▼▼
変更すると、Demoページのナビも変わるのでいろいろ試しながら作りたいものに一番近いものにしておくといいと思います！

Menu builder	デフォルトのメニューの数が4つです。 Item4の横にある「＋」を押すと「メニュー名を記入して」メニューを増やせます。メニューを減らすときは「メニュー（Item1とか）」にカーソルを合わせるとバッテンが出てくるので、クリックすると削除できます。
Navbar Style	ナビバーのスタイルを設定できます。最初は「Fixed」になっています。 Default：上下左右にpaddingがついています Static：ナビバーが上部にくっついたままです Fixed：ナビバーが付いてくるやつです Fixed Bottom：ナビバーが下部にあります
Menu Alignement	メニューの位置です。 Left：左寄せ Right：右寄せ
Brand Visibility	よくある、サイトのロゴ（サイト名）部分の表示についてです。 Demoページでは「Luxbar Demo」となっている部分です。 Show：表示する Hide：非表示にする
Hamburger Animation	スマホ時のハンバーガーメニューのアニメーションも選べます！ Spin：3本線がするすると×に変わります Doublespin：上記に比べてくるくる回りながら×に変わります
色	色の変更も可能です。右側のボックスにある、色のリストから試したい色を押すと変わります。ただし、ここは自分でcssで書き変えることも可能なので何色でもいいかもしれないです。