Code Fan 49

中年で開発に目覚めたおじさんの技術ブログ。WordPress・Rails・Cloud9などなど。

【50歳からのRailsアプリ開発 vol.6】Bootstrap4でヒーローイメージを整える vol. 1

はじめに

このシリーズ、1ヶ月以上放置は流石にひどいだろう、なのでちょっぴり進めます。 ちょっぴりね・・・。

今回はヒーローイメージ周辺をBootstrap4を用いて整えます。 作成しているレイアウトはこちら。

f:id:koyacch:20180109160809p:plain

作るのはこのへんです。解像度低くてすいません。 元XDデータが消えてしまったです。

f:id:koyacch:20180402111251p:plain

工程

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のタグを利用して作ることにします。 公式サイトを参照しつつ付与して行きます。

getbootstrap.com

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ドキュメント。

getbootstrap.com

    <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>

< 結果 >

f:id:koyacch:20180402122714p:plain

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;
    }
 }
}

< 結果 >

f:id:koyacch:20180402125926p:plain

終わり

いつものようにgitに保存してherokuへと。 vol.2でヒーローイメージを終えたいと思います。

GitHub - koyacch/myresume

Home | MyResume

みんな大好き?RailsTutorial

railstutorial.jp