共有:ナビゲーションバーを作ってみよう最初の導入編で表示したindex.htmlですが、このままでは殺風景ですし、少しづつ画面を整えていきたいと思います。前回はレスポンシブデザインについて簡単な説明をしました。今回はページ上部に表示されるナビゲーションバーを作ります。Bootstrapサイトの左サイドバーからComponentsをクリックして下に表示されるNavibarをクリックすると下記のようなコードが出てきますので、それをコピーします。コピーしたらエディタで前回作成したindex.htmlを開いてください。<body>ボディータグのすぐ下に貼り付けて忘れずに保存します。index.htmlを再度開いてみると下記のようにナビゲーションバーができているのが確認できたと思います。ちなみにレスポンシブになっていますので、画面を縮めていくと右端にハンバーガーメニューが出るようになっていますので便利ですね〜♬ジャンボトロンも作っちゃおう先ほどと同じくCompornentsの中のJumbotronをクリックしてコードをコピーしたのちに先ほどのナビバーをペーストした最後の/nav>の後に貼り付けましょう。Wold!は削除しています。ここでは日本語に加工して表示しています。サイトらしくなってきました。内容は別ですが(・∀・)グリッドシステムを使いましょ!色々なサイトを見ていくと上下左右に分割されているのがわかるかと思います。CSSなどを駆使して配置を考えて作られていますが、ブートストラップではグリッドシステムという技術を使って画面の分割をしています。”百聞は一見に如かず”ですのでやってみましょう。グリッドシステムの基本は画面を12分割することになっていますので。割合の合計が12にならなければいけません。イメージしにくいと思いますが、今回は左に9で右に3の割合で画面を分割してみます。ここではLayoutの中のGridをクリックしてください。コードがありますので全てをコピーしますが後に一部を削除し、分割する数値を記入します。記入位置はジャンボトロンの記載の最後に加えていきます。削ったので随分と簡素化しています。groupにあるアイテムを右グリット内に挿入して表示してみます。class=”col-sm-3′′>の後に貼り付けてあります。このように表示されました。ジャンボトロンと下に分割したグリットとのバランスが悪いので後で修正してみます。その前に本文を入れるグリットが空なので何か入れておきます。objectから選択して記載してみます。class=”col-sm-9′′>の後ろにペーストします。全体を整えてみましょう。class=”container”>と記入して</nav>の後に</div>と記入します。次はジャンボトロンの部分です。class=”container”>と記入します。more</a>の後に</div>と記入して保存します。こんな風に出来上がりました。皆さんもどうぞ試してくださいね。まとめwebデザイナーさんにはとても重宝されるBootstrapですが、フロントエンドエンジニアにも多く利用されています。使われているコードや利用方法などを翻訳ソフトを使って理解を深めるのはとても良い学習方法ではないでしょうか?ある程度はコピペでもなんとかなりますが、もしもエンジニアを目指されるのでしたら、できるだけ手作業でコードを打ち込む方が理解が深まると思います。コードと表示の位置関係などはhtmlやCSSを理解するのに必要かと思いますので心に留めておいても損はないかもしれません。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。はい、私をあなたのメーリングリストに追加してください。*新着記事のお知らせをしています。お客様のメールアドレスは第三者に公開されませんのでご安心ください。登録や購読はもちろん無料です。受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。なって他のコンテンツをお楽しみください。登録はここをクリックすると登録フォームに移動します。