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つの状態について説明してください。
2.table をデザインしよう
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
プロパティを使って、背景のスタイルを追加してみましょう。
3.footer にスタイルを追加しよう
app/assets/stylesheets/application.css
の最後にこのコードを追加しましょう:
footer {
background-color: #ebebeb;
padding: 30px 0;
}
footer
にもっとスタイルを追加してみましょう。それから、位置も調整してみましょう。
4.button にスタイルを追加しよう
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
の使い方を説明してください。そして、角を丸くしたり、影や色をつけたりというように、ボタンのスタイルを変えてみましょう。