【50歳からのRailsアプリ開発 vol.5】Bootstrap4でヘッダーを整える。variables.scssをパーシャルし、編集して初期設定を変更する。
はじめに
今回はせっかく導入したBootstrap4を活用してヘッダーを整えます。 Bootstrapを使って見るのは初めてなので、公式サイトを引用しつつ、それがどんなCSSとなっているかも見ていければいいかなと。
工程
1. 作りたいデザイン。
以前にAdobe XDで作ったモックをそのままやってみようと思います。
2. /app/app/views/layouts内のパーシャル、_header.html.erbの編集。
現状はこんなです。
<header>
<h1>Name Surname</h1>
<nav>
<ul>
<li>Your-menu</li>
</ul>
</nav>
</header>
シンプルですねー。 デザインを見ると足りないと思われるのがアイコン画像です。適当なダミーを用意しましょう。
わが家のネコ一号です。 Bootstrapで円形にしますが、トリミングはスクエアになるようにRailsで仕掛けないといけないですね。
Rails上の置き場所はとりあえず
/app/assets/images/dammy-header-thumb.png
でよろしいですかね。 先々はRailsTutorialに倣ってAWSのS3サービスに置くことにします。
image_tagヘルパーを用いてパスを張ります。
<header>
<h1>
<%= image_tag("dammy-header-thumb.png", alt: "サムネイル") %>
Name Surname
</h1>
<nav>
<ul>
<li>Your-menu</li>
</ul>
</nav>
</header>
3. Bootstrap4のヘッダーサンプルの確認
公式からNavibarのコードを参照しましょう。 最もシンプルなものを使います。
ビジュアルはこんなので。
コードはこんな。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
さらにこれを`_header.html.erb'に当てはめてシンプルにしたのがこちら。
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<h1 class="navbar-brand">
<%= image_tag("dammy-header-thumb.png", alt: "サムネイル", class: 'd-inline-block align-middle rounded-circle', size: '40x40') %>
Name Surname
</h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Your-menu</a>
</li>
</ul>
</div>
</nav>
</header>
h1タグを差し込んでちょっぴりセマンティックにしました。 プレビューするとこんな。うまく適用されました。
4. 微調整
sass記述で整えていきましょう。 ヘッダーに背景色をつけ、文字色などを白抜きにし、上左右の余白をつけて角丸にします。
1. レイアウトのためのブロック要素を追加。
bootstrap4の公式に従うのと、新しい要素を理解したいためなるべくhtmlにちょいちょいとクラスを加えるやり方で。
/app/app/views/layouts/_header.html.erbを編集
<div class="header-wrap container-fluid">
<div class="header">
<header>
<nav class="navbar navbar-dark bg-primary navbar-expand-lg rounded">
<h1 class="navbar-brand">
<%= image_tag("dammy-header-thumb.png", alt: "サムネイル", class: 'd-inline-block align-middle rounded-circle', size: '40x40') %>
Name Surname
</h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Your-menu</a>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
bootstrap3ではお馴染みのpull-leftとかが消え去ってますね。 実はこの辺を公式を見て理解するのに一苦労。。。 色々あるので読み進めてこのプロジェクトでも使っていきます。
2. h1がつくる不必要なmarginを消し上の余白を作る。
/app/app/assets/stylesheets/application.scssを編集
.header-wrap{
.header{
margin-top: 10px;
h1{
margin: 0;
}
}
}
3. カラーリング
bootstrapならば$brand-primaryとか使いますが、これをapplication.scssで使うとエラーが出ます。あと変更したい場合に使う_variables.scssにあたる部分はどこになるの...?
早速ググるとapplication.scssでのimportをどうにかすると良さそうです。
1. /app/app/assets/stylesheets内に_bootstrap-custom.scssを作成
2. 下記のコードをコピぺ。
bootstrap-rubygem/_bootstrap.scss at master · twbs/bootstrap-rubygem · GitHub
3. /app/app/assets/stylesheets/application.scssのimportを修正。
@import "bootstrap" を @import 'bootstrap-custom'; と書き換える。
パーシャルで読み込みリストを読み込む感じですかね。
で、ここからです。 先ほどの_bootstrap-custom.scssの中に、
@import "bootstrap/variables";
があるので、これをコメントアウトし、代わりにローカルに_variables.scssのコードを貼り付けたパーシャルを作成、それを読み込ませます。
@import "bootstrap-custom-variables"
_variables.scssの内容は公式をダウンロードして持ってきました。
/app/app/assets/stylesheetsの構成はこのとおり。
あとは実際に色を修正します。 以下のファイルです。
/app/app/assets/stylesheets/_bootstrap-custom-variables.scss
$blue: #2699FB !default;
bootstrap4は、デフォルトでは$blueがprimaryとなっています。
$primary: $blue !default;
こんなところですねーふー！
終わり
いつものようにgitに保存してherokuへと。
みんな大好き？RailsTutorial
