目次
ナビゲーションバーを作ってみよう
最初の導入編で表示したindex.htmlですが、このままでは殺風景ですし、少しづつ画面を整えていきたいと思います。
前回はレスポンシブデザインについて簡単な説明をしました。
今回はページ上部に表示されるナビゲーションバーを作ります。
Bootstrapサイトの左サイドバーからComponentsをクリックして下に表示されるNavibarをクリックすると下記のようなコードが出てきますので、それをコピーします。
コピーしたらエディタで前回作成したindex.htmlを開いてください。
<body>ボディータグのすぐ下に貼り付けて忘れずに保存します。
そしてindex.htmlを再度開いてみると下記のようにナビゲーションバーができているのが確認できたと思います。
ちなみにレスポンシブになっていますので、画面を縮めていくと右端にハンバーガーメニューが出るようになっていますので便利ですね〜♬
ジャンボトロンも作っちゃおう
先ほどと同じくCompornentsの中のJumbotronをクリックしてコードをコピーしたのちに先ほどのナビバーをペーストした最後の/nav>の後に貼り付けましょう。
最初に<h1>タグに記載したHello Wold!は削除しています。
ここでは日本語に加工して表示しています。
少しサイトらしくなってきました。内容は別ですが(・∀・)
グリッドシステムを使いましょ！
色々なサイトを見ていくと上下左右に分割されているのがわかるかと思います。CSSなどを駆使して配置を考えて作られていますが、ブートストラップではグリッドシステムという技術を使って画面の分割をしています。
”百聞は一見に如かず”ですのでやってみましょう。
グリッドシステムの基本は画面を１２分割することになっていますので。割合の合計が１２にならなければいけません。
イメージしにくいと思いますが、今回は左に９で右に３の割合で画面を分割してみます。
ここではLayoutの中のGridをクリックしてください。
コードがありますので全てをコピーしますが後に一部を削除し、分割する数値を記入します。
記入位置はジャンボトロンの記載の最後に加えていきます。
こんな感じです。
だいぶ削ったので随分と簡素化しています。
このままで表示しても画面が分割されているのがわかりにくいので、Component内のList groupにあるアイテムを右グリット内に挿入して表示してみます。
ファイル画像はコードが長いので表示しませんが、<div class=”col-sm-3″>の後に貼り付けてあります。
このように表示されました。しかしジャンボトロンと下に分割したグリットとのバランスが悪いので後で修正してみます。
その前に本文を入れるグリットが空なので何か入れておきます。
今度はComponentsの中のMedia objectから選択して記載してみます。コピーする場所は先ほどグリッドを分割した<div class=”col-sm-9″>の後ろにペーストします。
ここまでは完了です。では全体を整えてみましょう。
まずナビゲーションバーの部分ですが、bodyタグの下に<div class=”container”>と記入して</nav>の後に</div>と記入します。
次はジャンボトロンの部分です。
<div class=”Jumbotron”>の前に<div class=”container”>と記入します。次はLearn more</a>の後に</div>と記入して保存します。
こんな風に出来上がりました。
皆さんもどうぞ試してくださいね。
まとめ
webデザイナーさんにはとても重宝されるBootstrapですが、フロントエンドエンジニアにも多く利用されています。
使われているコードや利用方法などを翻訳ソフトを使って理解を深めるのはとても良い学習方法ではないでしょうか？
ある程度はコピペでもなんとかなりますが、もしもエンジニアを目指されるのでしたら、できるだけ手作業でコードを打ち込む方が理解が深まると思います。特にコードと表示の位置関係などはhtmlやCSSを理解するのに必要かと思いますので心に留めておいても損はないかもしれません。
2019年7月 Chockey
