どなブロ

エンジニアァのブログです

個人開発日誌 -2- ホーム画面追加

まず全体的に画面を追加していこうと思います。
Modelはまだちょっと考えが固まってない部分があるので後回しです。

rails generateコマンドでcontrollerとviewを追加。

rails generate controller Pages home

とりあえずメインのページだけ作成


route.rbをいじって以下を変更

  • ルートURLでメインページにアクセスするよう変更
  • controller作ってもらった段階だとメインページのURLが/pages/homeなので/homeに変更
root 'pages#home'
get '/home', to:'pages#home'

home.html.erbを少しいじります

<div id="container">
  <h1 id="title">Semin App</h1>
  <div id="home-img"></div> 
  <p id="home-msg">ライブのもろもろをサポートするよ!</p>
</div>

今回CSSはbootstrapは使わずに自力で書いていこうと思います~。pages.cssにホーム画面のスタイルを追記。

#container {
    width: 100%;
}

#title {
    text-align: center;
}

#home-img {
    width: 25%;
    height: 500px;
    margin: auto;
    background: url("images/band.png");
    background-size: cover;
}

#home-msg {
    width: 100%;
    text-align: center;
}

と、ここで適当に用意してきた画像が表示されない問題が発生。
少し調べてみるとこちらのページにて、app/asset/imagesに配置したファイルは画像のURLを"/"から始める必要はないとのこと!
そのため該当箇所を以下のように修正。

background: url("band.png");


これで無事仮のメインページができました~
f:id:andna0410:20180522075258p:plain

めっちゃ適当!笑
まぁ追い追いちゃんと直していきます!



今回はここまででプッシュしときます。
なんかメインのページ追加だけだとちょっと細切れすぎたかな?とも思いますが…。
次からは練習の予定を合わせる機能の実装に入っていこうと思います!

以上