HTML
複数のクラスの設定
class="クラス1 クラス2"
リンクの作り方
パターン1 : <%= link_to "名前", "リンク先",class:"クラス名" %>
パターン2 : <a href="リンク先" class="クラス名"> 名前 </a>
箇条書き
<ul class="クラス名">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
...
</ul>
画像の挿入
<%= link_to image_tag("画像ファイル名", alt:"名前"),'リンク先' %>
CSS
基本的な文法
クラスの指定
.クラス名{
内容;
}
例
.center {
text-align: center;
}
idの指定
#id名{
内容;
}
例
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}
Bootstrap
Bootstrapを使うと、洗練されたWebデザインとユーザーインターフェイス要素を簡単にHTML5アプリケーションに追加することができる。最も大きな利点はレスポンシブデザインにできること。
bootstrap-sassのインストール
gem 'bootstrap-sass', '3.3.7'
$ bundle install
scssファイルの作成
$ touch app/assets/stylesheets/custom.scss
Bootstrap CSSの追加
app/assets/stylesheets/custom.scss
@import"bootstrap-sprockets";@import"bootstrap";