Rails Girls - Japanese

1.header をデザインしよう

app/assets/stylesheets/application.css の最後に以下のコードを追加してください。：

nav.navbar {
  min-height: 38px;
  background-color: #f55e55;
  background-image: none;
}

では、ページを更新して変更を確認しましょう。それから、ヘッダーの色やフォントをいろいろ変えて、試してみましょう。 http://color.uisdc.com/ では、色のリファレンスを見ることができます。

次に、これらの行をコードの一番下に追加します。：

.navbar a.brand { font-size: 18px; }
.navbar a.brand:hover {
  color: #fff;
  background-color: transparent;
  text-decoration: none;
}

コーチより： link が持つ、4つの状態について説明してください。

table により磨きをかけるために、twitter Bootstrap を使います。この行を app/views/ideas/index.html.erb から見つけて、以下のように置き換えてください。：

<table>

↓

<table class="table">

以下のコードを使って、画像のサイズを調整しましょう。

<%= image_tag(idea.picture_url, width: 600) if idea.picture.present? %>

width を変更してみて、何が起こるか見てみましょう。

app/assets/stylesheets/ideas.scss の最後に以下のコードを追加しましょう。：

.container a:hover {
  color: #f55e55;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0);
}

http://subtlepatterns.com/ のいくつかのパターンを参考に、background-image プロパティを使って、背景のスタイルを追加してみましょう。

app/assets/stylesheets/application.css の最後にこのコードを追加しましょう：

footer {
  background-color: #ebebeb;
  padding: 30px 0;
}

footer にもっとスタイルを追加してみましょう。それから、位置も調整してみましょう。

http://localhost:3000/ideas/new を開いて、Create Idea ボタンを見つけてください。

app/assets/stylesheets/ideas.scss にこれらのコードを追加しましょう。

.container input[type="submit"] {
   height: 30px;
   font-size: 13px;
   background-color: #f55e55;
   border: none;
   color: #fff;
 }

コーチより： css の border の使い方を説明してください。そして、角を丸くしたり、影や色をつけたりというように、ボタンのスタイルを変えてみましょう。