【50歳からのRailsアプリ開発 vol.6】Bootstrap4でヒーローイメージを整える vol. 1
はじめに
このシリーズ、1ヶ月以上放置は流石にひどいだろう、なのでちょっぴり進めます。 ちょっぴりね・・・。
今回はヒーローイメージ周辺をBootstrap4を用いて整えます。 作成しているレイアウトはこちら。
作るのはこのへんです。解像度低くてすいません。 元XDデータが消えてしまったです。
工程
1. /app/app/views/static_pages/home.html.erb のHTMLを確認
<section id="prof"> <figure><img src="#" alt="Thumb"></figure> <h1>John Doe</h1> <p>San Fransico. CA</p> <h2>Hi! Myname is John, i'm a creative geek from San Fransico, CA. Contact me at john@mail.com.</h2> <dl> <dt>qualification</dt> <dd>14</dd> <dt>experience projects</dt> <dd>140</dd> <dt>files</dt> <dd>240</dd> </dl> <a href="#">MORE PROFILE</a> </section>
なるべくBootstrap4のタグを利用して作ることにします。 公式サイトを参照しつつ付与して行きます。
2. 具体的なimgが入ってないと雰囲気が掴みづらいのでダミー画像を入れます。にゃー。
Bootstrapでおなじみのclass、img-responsive
が、Bootstrap4ではimg-fluid
になってましたうおー。
<%= image_tag('dammy-hero.jpg', class: 'img-fluid') %> <figure> <%= image_tag('dammy-header-thumb.png', class: 'img-fluid', alt: "John Portrait") %> </figure>
①<figure>
タグはサムネイル部分。
②もう一つのimgは背景画像に使います。CSSで背景配置が簡単なのですが動的に変更するため、HTML側に配置します。
3. ヒーローイメージをBootstrap4、jumbotronでスタイリング。
公式サイトでのjumbotronドキュメント。
<div class="container-fluid"> <div class="jumbotron jumbotron-fluid"> <%= image_tag('dammy-hero.jpg', class: 'img-fluid') %> <figure> <%= image_tag('dammy-header-thumb.png', class: 'img-fluid', alt: "John Portrait") %> </figure> </div> <h1>John Doe</h1> <p>San Fransico. CA</p> <h2>Hi! Myname is John, i'm a creative geek from San Fransico, CA. Contact me at john@mail.com.</h2> <dl> <dt>qualification</dt> <dd>14</dd> <dt>experience projects</dt> <dd>140</dd> <dt>files</dt> <dd>240</dd> </dl> <a href="#">MORE PROFILE</a> </div> </seciton>
①ブラウザに対して余白が欲しかったので<div class="container-fluid">
を追加。
②<img>
をヒーローイメージでスタイリングしたかったので<div class="jumbotron">
を追加。
③Jumbotronを横長にするためにclass、jumbotron-fluid'を付与。
④<figure>
にclassimg-thumbnail
を付与して角丸と枠線をつける。
余白は不要なので<div class="container-fluid">
はJombotronの外に外す必要があります。
<div class="container-fluid"> <div class="jumbotron jumbotron-fluid"> <%= image_tag('dammy-hero.jpg', class: 'img-fluid') %> <figure> <%= image_tag('dammy-header-thumb.png', class: 'img-fluid img-thumbnail', alt: "John Portrait") %> </figure> </div> <h1>John Doe</h1> <p>San Fransico. CA</p> <h2>Hi! Myname is John, i'm a creative geek from San Fransico, CA. Contact me at john@mail.com.</h2> <dl> <dt>qualification</dt> <dd>14</dd> <dt>experience projects</dt> <dd>140</dd> <dt>files</dt> <dd>240</dd> </dl> <a href="#">MORE PROFILE</a> </div> </seciton>
< 結果 >
4. SCSSで調整する。
①Jumbotronの背景色を消す。
②figureをpositionで背景画像の左隅に配置する。
/app/app/assets/stylesheets/application.scss に記述します。
#prof{ .jumbotron{ background: none; position: relative; figure{ position: absolute; display: block; width: 200px; left: 20px; bottom: 30px; } } }
< 結果 >
終わり
いつものようにgitに保存してherokuへと。 vol.2でヒーローイメージを終えたいと思います。
みんな大好き?RailsTutorial