Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8582

Railsチュートリアル備忘録 -HTML/CSS編-

$
0
0

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";

追加中...


Viewing all articles
Browse latest Browse all 8582

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>