あーwebサイトでダイナミックなデザインが作りたいな～
そんな時はジャンボトロンがおススメです！
Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。
Bootstrapの機能はほぼ載っています。
リンク
こんにちは、ティロといいます
プログラミング好きな理系大学生です
Bootstrapを使えば手軽にジャンボトロンを使うことが出来ます。
Bootsrap（ブートストラップ）ってなんだーって人はこちらの記事を見てね
関連記事
Bootstrapってなに？Bootstrapの基本的な使い方が知りたい Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]
Bootstrapをcdnで読み込む
以下のコードをhead内に貼り付けてください。
1 2 3 4 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> |
ジャンボトロンを作る方法
ジャンボトロンとはどんなものなのか、まずはデモをご覧ください。
See the Pen
xxOyPpB by hiro web制作とブログ (@hiroweb9)
on CodePen.
背景の幅が画面いっぱいまで広がり、その中にタイトルがあります。これがジャンボトロンです。
コードはこんな感じです。
1 2 3 4 5 6 7 8 | <body> <div class="jumbotron jumbotron-fluid bg-dark"> <div class="container text-white"> <h1>Jumbotron</h1> <p>Jumbotronのサンプルです</p> </div> </div> </body> |
クラスの役割は以下の通りです。
| jumbotron | 基本的なジャンボトロンを作る |
| jumbotron-fluid | ジャンボトロンを横幅いっぱいまで広げる |
| container | 幅を設定している。レスポンシブデザインに対応している。グリッドデザインを作るとき便利。 |
| text-white | 文字を白色にする |
| bg-dark | 背景を黒っぽい色にする |
文字の色と背景の色は以下のようなクラスをつけるだけで変更することが出来ます。
文字
| text-primary | 青色 |
| text-secondary | グレー |
| text-info | 水色 |
| text-light | 白っぽい |
| text-success | 緑 |
| text-danger | 紅 |
| text-dark | 黒っぽい |
| text-muted | 鼠色 |
| text-white | 白 |
| text-black-50 | 50%透明の黒 |
| text-white-50 | 50%透明の白 |
背景
| bg-primary | 青 |
| bg-secondary | グレー |
| bg-success | 緑 |
| bg-warning | 黄 |
| bg-info | 水色 |
| bg-light | 薄いグレー |
| bg-dark | 濃いグレー |
| bg-white | 黒 |
| bg-transparent | 透明 |
| bg-danger | オレンジ |
ジャンボトロンをサイトに使ってみる
上の例だけだと寂しいので他のコンポーネントと一緒に使ってみます。
具体的にはグローバルナビゲーションとカードを作りました。
すべてBootstrapで作っているのでcssは一切書いていません。クラスをつけただけです。
ヘッダーのデザインについてはこちらの記事に詳しく書きました！
関連記事
bootstrapでドロップダウンメニューが作りたいけどどうやるのか分からん今回はこんな疑問を解決していきます！もちろん、レスポンシブデザインに対応しています。Bootstrapの機能をもっと知りたい！という方はこち[…]
全体のコードは以下のようなりました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | <!doctype html> <html lang="ja"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <header> <nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" href="#">Jumbotron</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-content"> <form class="form-inline"> <input class="form-control mr-1 w-75" placeholder="検索"> <button class="btn btn-outline-light ">検索</button> </form> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">サンプル</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">サンプル</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> </div> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">サンプル</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> <a class="dropdown-item" href="#">サンプル1</a> </div> </li> </ul> </div> </div> </nav> </header> <div class="jumbotron jumbotron-fluid bg-dark"> <div class="container text-white"> <h1>Jumbotron</h1> <p>Jumbotronのサンプルです</p> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4 mb-2"> <div class="card text-center"> <div class="card-body"> <h4 class="card-title">Jumbotron</h4> <p class="card-text">A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.</p> <a href="https://getbootstrap.com/docs/4.0/components/jumbotron/">引用：Jumbotron · Bootstrap</a> </div> </div> </div> <div class="col-md-4 mb-2"> <div class="card text-center"> <div class="card-body"> <h4 class="card-title">Jumbotron</h4> <p class="card-text">A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.</p> <a href="https://getbootstrap.com/docs/4.0/components/jumbotron/">引用：Jumbotron · Bootstrap</a> </div> </div> </div> <div class="col-md-4 mb-2"> <div class="card text-center"> <div class="card-body"> <h4 class="card-title">Jumbotron</h4> <p class="card-text">A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.</p> <a href="https://getbootstrap.com/docs/4.0/components/jumbotron/">引用：Jumbotron · Bootstrap</a> </div> </div> </div> </div> </div> </body> </html> |
いかがでしょうか。Bootstrapを使うとデザインが苦手は私でも今風のwebサイトが簡単に作れそうです。
実際にサイトを作りながら勉強したい！という方はこちらがおすすめです．
リンク