1. デザインを追加していこう

htmlやcssは自分で勉強しよう。
https://dotinstall.com/lessons/basic_html_v5
https://dotinstall.com/lessons/basic_css_v5

Coachより htmlとcssについて
HTMLは<>ないに書かれたタグでwebサイトを記述する言語
CSSはタグに文字の大きさや色などのようにデザインを記述する言語

Coachより Bootstrapについて
HTMLのclassだけでスタイル(cssで記述するもの)とアニメーション(javascriptで記述するもの)を適用するためのCSSとJavascriptのフレームワーク

2. bootstrapの使い方

2.1. installしてみよう

cssは<head></head>内、jsは<body></body>内の</body>の直前に入れることに注意しよう。

htmlの基本構造

<head>
  <!-- メタデータを表記する -->
</head>

<body>
  <header>
    <!-- ナビゲーションなどの複数のページで共通するもの -->
  </header>

  <!-- コンテンツ：ページの独自の内容 -->
  <div></div>
  <section></section>

  <footer>
    <!-- コンテンツに関する内容 -->
  </footer>
</body>

2.2. ボタンにclassを追加してみよう

全体の配置のデザインはLayout部分のclassを使う。
https://getbootstrap.com/docs/4.4/layout/overview/

各要素のデザインはComponentを使う。
https://getbootstrap.com/docs/4.4/components/alerts/

試しにボタンのクラスを好きなところに適用してみよう。
https://getbootstrap.com/docs/4.4/components/buttons/

2.3. ホテルサイトを自分好みにしてみよう

自分の好みのデザインにしてみよう

手がつけられないひとは順番にやっていこう

2.3.1 navigationを追加

<header></header>内に次の文を入れる。

app/views/layouts/application.html.erb

<div class="container">
  <nav class="navbar navbar-expand-sm navbar-light">
    <a class="navbar-brand font-italic" href="/" style="font-size: 30px"><u>Hotel Project</u></a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div id="menu" class="collapse navbar-collapse d-flex justify-content-end">
      <ul class="navbar-nav">
        <li class="nav-item"><a href="/" class="nav-link">トップページ</a></li>
        <li class="nav-item"><a href="/contacts/new" class="nav-link">お問い合わせ</a></li>
      </ul>
    </div>
  </nav>  
</div>

写真も追加したい場合は、app/assets/imagesのフォルダーに使いたい写真を入れ、<nav ~~~>の下の行に次の文を入れる。

app/views/layouts/application.html.erb

<%= image_tag 'hotelproject.png', width: 40, height: 40, class: 'mx-2', alt: 'ホテルのアイコン' %>

2.3.2 footerを追加

<%= yield %>の下の行に次の文を入れる。

app/views/layouts/application.html.erb

<footer class="mt-5">
  <p class="text-center text-muted display-5 bg-light">Hotel Project</p>
</footer>

2.3.3 TOPページのデザイン

<div class="container">
  <div class="row">
    <div class="col-md-3">
    </div>
  </div>
</div>

と

  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>

を組み合わせてTOPページを作っていこう。

2.3.4 ホテル詳細ページのデザイン

======
これ以降は余裕があれば。

2.3.5 都道府県詳細ページのデザイン

2.3.6 レビュー一覧ページのデザイン

2.3.7 レビュー作成ページのデザイン