CSS設定一覧

Header9

0 : この章の目的

 CSSの設定の方法について説明する
CSSの設定とは言っても、ここでは普通のCSSBootstrapで設定する「classの2種類について説明する。
※ CSSの書き方についてはこちらを参照


1 : CSSの設定

まずは普通のCSSの
  • 文字の大きさ・色・背景色
  • 長さ・高さ
  • 空白
の3つの書き方について説明します。
  • 文字の大きさ・色・背景色


  • 文字の大きさの設定は、
      font-size:表示させる大きさpx(もしくは%);
      
    で設定します。

    1 2 3 .example{ font-size:30px; }

    大きさに関しては使っていきながら慣れていきましょう。
    色の設定は、
    color:好きな色;
    
    で設定します。

    1 2 3 4 .example{ color:white; font-size:30px; }

    色は英語で入力するか、
    カラーコード一覧表にある「#??????」で設定できます。
    背景色の設定は、
    background-color:好きな色;
    
    で設定します。

    1 2 3 4 5 .example{ background-color:black; color:white; font-size:30px; }

    色は
    color:好きな色;
    
    と同じように「#??????」で設定できます(色はこちらを参考)。
  • 長さ・高さ


  • 要素の長さは、
    width:好きな大きさpx(もしくは%);
    
    で設定します。

    1 2 3 .my-form{ width:500px; }

    Bootstrapのフォームの長さを設定するときに使いました。
    同じようにして高さは、
    height:好きな大きさpx(もしくは%);
    
    で設定します。

    1 2 3 4 .my-form{ height:200px; width:500px; }


  • 空白

  • 空白の設定は、
    • 要素の外側の空白(margin)
    • 要素の内側の空白(padding)

    の2種類があります。

    違いについては、
    【CSS】margin paddingの違いと使い方を紹介などを参考にしてみて下さい。
    要素の外側の空白(margin)は、
    margin-空白の場所:好きな大きさpx(もしくは%);
    
    で設定します。
    空白の場所は、上が「top」下が「bottom」右が「right」左が「left」で設定します。

    1 2 3 4 5 .example{ margin-top:150px; margin-left:10px; margin-right:10px; }

    要素の中の空白にはpaddingを使います。
    padding-空白の場所:好きな数字px;
    
    で設定します。
    空白の場所についてはmarginと同じです。
    例えば、下のように画像の中にある文字(詳しくはこちら)を Chrome posts root text center もう少し下に下げたい時は、paddingを使って要素の中に空白を作ります。 Chrome posts root
    1 2 3 .example{ padding:150px; }

    marginとpaddingは分からなくなったら、一回試してみてやってみましょう!

CSSの設定は他にもたくさんあるので、興味があったらググって調べてみましょう!


2 : Bootstrapの設定

CSSの作業を軽減してくれるツールBootstrap(導入など詳細はこちら)の設定について説明します。
今回は、
  • btn(ボタン)
  • form-control(入力欄)
  • nav(上につくバー)
について説明します。
  • btn(ボタン)

  • Bootstrapのボタンは、
    class="btn 好きなボタン"
    
    で設定します。
    青いボタン

    1 <a href="/" class="btn btn-primary">青いボタン</a>

    ボタンには、
    btn-danger btn-success btn-info などの種類があります。(他のボタンはこちらを参照

    詳細はこちら
  • form-control(入力欄)

  • Bootstrapの入力欄は、
    class="form-control"
    
    で設定します。

    1 <%= f.text_field :name, :class => "form-control" %>

    詳細はこちら
  • nav(上につくバー)

  • Bootstrapのナビゲーションバー(上につくバー)は、

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/posts" class="navbar-brand">myapp</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav>

    で設定します(使う時はコピペして下さい)。

    左側の文字は、
    10 <a href="/posts" class="navbar-brand">myapp</a>
    で、

    右側の文字は、
    13 14 <ul class="nav navbar-nav navbar-right"> </ul>

    の間に例えば下のような設定を
    13 14 15 <ul class="nav navbar-nav navbar-right"> <li><a href="/posts/new">新しく投稿する</a></li> </ul>

    加えることで設定します。

    詳細はこちら

Bootstrapには他にも使い方があるので興味があったら調べてみましょう!