Webサービスの作り方を実例のRailsでイチから学ぶ【レイアウト作成】part2

  • 2015/8/30
  • Webサービスの作り方を実例のRailsでイチから学ぶ【レイアウト作成】part2 はコメントを受け付けていません。

前回に引き続き、静的ページであるレイアウト画面の作成です。

7.app/views/pages/home.html.erb を編集

<div id="home" class="home">
<div class="text-top">
<h1>Hello World</h1>
<h3>Bootstrap-based one column layout</h3>
<center><a href="#about" class="btn btn-success btn-lg">Sign up</a></center>
</div>
</div>

<div class="container section">
<h2>Our Service</h2>
<div class="row">
<div class="col-sm-4">
<div class="service">
<i class="fa fa-cutlery main-i"></i>
<div class="desc"><h3>タイトル</h3></div>
<center><%= image_tag 'in33.jpg' %></center>
<p class="center"><a href="">サービスの紹介などなど</a></p>
</div>
</div>

<div class="col-sm-4">
<div class="service">
<i class="fa fa-cutlery main-i"></i>
<div class="desc"><h3>タイトル</h3></div>
<center><%= image_tag 'interview.jpg' %></center>
<p class="center"><a href="">サービスの紹介などなど</a></p>
</div>
</div>

<div class="col-sm-4">
<div class="service">
<i class="fa fa-cutlery main-i"></i>
<div class="desc"><h3>タイトル</h3></div>
<center><%= image_tag 'in222.jpg' %></center>
<p class="center"><a href="">サービスの紹介などなど</a></p>
</div>
</div>
</div>
</div>


<div class="section">

<div id="products">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h2>Our Products</h2>
<h4>こだわり選び抜いた自信のプロダクト</h4>
</div>
</div>
</div>
</div>

<div id="products-detail" class="pad-section">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Berceau (ベルソー)</h2>
</div>
<div class="panel-body">
コンテンツコンテンツ
<br /><br />
<a href="#">More info >></a>
<br />
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Berceau (ベルソー)</h2>
</div>
<div class="panel-body">
 コンテンツコンテンツ
<br /><br />
<a href="#">More info >></a>
<br />
</div>
</div>
</div>
</div>
</div>

8.publicフォルダにimagesフォルダを新規作成し、画像を挿入。
※本番環境ではこちらのpublicフォルダを使用しております。
画像は各自お好きなものをご用意下さい。

9.app/assets/stylesheets/application.css.scssを編集

@import "bootstrap-sprockets";
@import "bootstrap";

html, body {   height: 100%;
  width: 100%;
}

.text-top {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 767px) {

  .text-top h1{
    font-size: 2.5em;
    color: #fff;
  }
  .text-top h3 {
    font-size: 1.5em;
    color: #fff;
    margin-top: -10px;
  }

  .text-top > .btn{
    margin-bottom: 20px;
  }

  #home {
    background: url(/images/tensyoku.jpg) no-repeat center center fixed;
    display: table;
    width: 100%;
    height: auto;
    position: relative;

    margin-top: 50px;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

   #products-detail {
    background: url(/images/ten01.jpg) no-repeat center center fixed;
    display: table;
    width: 100%;
    height: auto;
    position: relative;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

}
@media (min-width: 768px) {

  .text-top h1,.text-top h3 {
    font-size: 4em;
    color: #fff;
  }

  #home {
    background: url(/images/tensyoku.jpg) no-repeat center center fixed;
    display: table;
    height: 100%;
    position: relative;
    width:100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }


  #products-detail {
    background: url(/images/ten01.jpg) no-repeat center center fixed;
    display: table;
    height: 100%;
    position: relative;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

}


/* Content styles
-------------------------------------------------- */
/* Products */
#products {
  background-color: #306d9f;
  color: #ffffff;
  padding-bottom: 20px;
}

#products-detail .panel {
  margin-top: 50px;
  margin-bottom: 50px;
  opacity: 0.85;
}

h3 ,h2,.p-center{
text-align: center;
}

.service > p{
text-align: center;
}

.enimg{
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:200px;
}

.section{
  margin-top: 50px;
  margin-bottom: 50px;
}

.center-block{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}

.video{
  margin-top: 50px;
}

.content-img{
  width:80%;
  height:auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

ここでの注意ポイント、開発環境とは違う本番環境での背景画像は、
background: url(/images/tensyoku.jpg)
のような記述をすることです。

$ rake db:migrate RAILS_ENV=production

$ bundle exec rake assets:precompile RAILS_ENV=production

$ sudo service httpd restart

sam01

これでホーム画面の完成です。
次回からは、ログイン認証機能を搭載していきます。
rails「devise」の使い方を学んでいきましょう。

バックナンバー
Webサービスの作り方をRailsでイチから学ぶ【レイアウト作成】part1

  • このエントリーをはてなブックマークに追加

関連記事

コメントは利用できません。

ピックアップ記事

  1. 第3回目ではボタンを押すとyoutubeの動画がランダム表示されるものを作成しました。今度はランダム…
  2. ワードプレスでオリジナルテーマを作ってみたい! 全くのイチからの作成手順をご紹介していきたいと思い…

ピックアップ記事

  1. 独学でプログラミング学習に挑戦したは良いが、結局挫折を繰り返す日々。   そんな挫折経験者や…
  2. ネットで調べると実に様々な方法が出てきます。 サーバーによっても様々なアプローチが。 今回私…
  3. 1.さくらVPSにPHP、MySQL、Ruby on Railsを設置。 これらを設置するまで…
  4. 他人様のコンテンツを引っ張ってきて、 自分なりにアレンジを加えた形で 独自のコンテンツとして提供…
ページ上部へ戻る