CSS

Menu


グリッドシステム

Bootstrap3 では、横幅を12にわけてレイアウトします。

  • containerクラスで全体を囲むボックスをつくる
  • さらに、rowクラスを中にいれ、その中にcol-md-*クラスを入れる(*には1から12までの数字が入ります。)
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1

例えば、コンテンツを、メインとサイドバーに分ける場合、以下のようになります。
(あくまでも、style属性は、見やすくするために指定しています)

<div class="container">
  <div class="row">
    <div class="col-md-9" style="border: 1px solid #009000">メインコンテンツです。</div>
    <div class="col-md-3" style="border: 1px solid #009000">サイドバーです。</div>
  </div>
</div>

デモページ(css-01.html)


スマートフォンとパソコンでレイアウトを変える

col-md-*だけだと、スマートフォンで表示すると、上下の表示になってしまいます。

パソコンとスマホの両方で、横にコンテンツを並べたい、といった場合上のコード以外にもcol-xs-*を追加します。

以下はサンプルです。試しにブラウザの横幅を狭めてみてください。

メイン
サイドバー
<div class="row">
  <div class="col-xs-12 col-md-8" style="border: 1px solid #009000">メイン</div>
  <div class="col-xs-6 col-md-4" style="border: 1px solid #009000">サイドバー</div>
</div>

上のようにすると、画面を狭めた時(スマートフォンで表示した時)、メインは画面横いっぱいに、サイドバーは少し右にスペースを空けて表示されます。

以下のサンプルも、実際に画面を狭めて確かめてみてください。

Left
Center
Right
<div class="row">
  <div class="col-xs-6 col-md-4" style="border: 1px solid #009000">Left</div>
  <div class="col-xs-6 col-md-4" style="border: 1px solid #009000">Center</div>
  <div class="col-xs-6 col-md-4" style="border: 1px solid #009000">Right</div>
</div>

スマートフォン、タブレット、パソコンでレイアウトを変える

上では、PCとスマホで表示を分けましたが、ここでは、スマホ、タブレット、PCの3つでレイアウトを変えます。

上と同じような方法でcol-sm-*クラスを入れるとできます。(詳細は、後日公開予定。)


タイポグラフィ

見出し

通常と同様にh1タグからh6タグまでを使用出来ます。

<h1>見出し</h1>

段落

段落も、通常と同様にpタグを使用します。

こんな感じに、段落ごとに1行程度のスペースがあきます。

<p>段落です。</p>
<p>段落です。</p>

大きな文字の段落

見出し

大きな文字の段落。項目の説明文なんかに使えると思います。

ここから本文がはじまる、みたいな。

上の例の「大きな文字の段落。項目の説明文なんかに使えると思います。」のような形にする場合、leadクラスを追加します。

<h2>見出し</h2>
<p class="lead">大きな文字の段落。項目の説明文なんかに使えると思います。</p>
<p>ここから本文がはじまる、みたいな。</p>

装飾

Bootstrapでは、小さな文字は、<small>タグ、太字は、<strong> タグ、斜体は、<em>を使います。

また、<small>を見出し内で使うと、以下のようになります。

見出しこれがsmallの部分

文字揃え(左揃え、中央揃え、右揃え)

text-leftは、テキスト左揃えtext-centerは、テキスト中央揃え、text-rightは、テキスト右揃えです。

text-left

text-center

text-right

<p class="text-left">text-left</p>
<p class="text-center">text-center</p>
<p class="text-right">text-right</p>

文字カラー

エラーが発生した時などに、お知らせしたいとき、文字カラーを変えることができます。

灰色

普通の色

処理が完了しました。

すべての項目を入力してください。

ちょっと危険

やばい

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

住所、連絡先

<address>タグで住所、連絡先を示せます。

○○社
▽▽県□□市◇◇町 12-34-56
TEL: (123) 456-7890
ブート 太郎
taro.boot@example.com
<address>
  <strong>○○社</strong><br>
  ▽▽県□□市◇◇町 12-34-56<br>
  <abbr title="電話番号">TEL:</abbr> (123) 456-7890
</address>

<address>
  <strong>ブート 太郎</strong><br>
  <a href="mailto:#">taro.boot@example.com</a>
</address>

引用

となりのきゃくよくかきくうきゃくだ

引用は、<blockquote>タグを使います。

<blockquote>
  <p>となりのきゃくよくかきくうきゃくだ</p>
</blockquote>

となりのきゃくよくかきくうきゃくだ

引用元: 早口言葉

引用元を示したい場合、<blockquote>内に<small>タグをいれます。引用元の書名などは、<site>タグでかこみます。

<blockquote>
  <p>となりのきゃくよくかきくうきゃくだ</p>
  <small>引用元: <cite title="引用元">早口言葉</cite></small>
</blockquote>

努力は酬われるかもしれないね。そうだといいね。

引用元: とくになし

<blockquote>に、class="pull-right"を追加すると、引用が右寄りになります。

<blockquote class="pull-right">
  <p>努力は酬われるかもしれないね。そうだといいね。</p>
  <small>引用元: <cite title="引用元">とくになし</cite></small>
</blockquote>
追加クラス 内容
なし 左寄りの通常の引用
.pull-right 右寄りの引用

リスト

何も指定しない場合、以下のようになります。

  • リスト項目
  • リスト項目
    • リスト項目
    • リスト項目
    • リスト項目
    • リスト項目
    • リスト項目
  • リスト項目
  • リスト項目
  • リスト項目
<ul>
  <li>リスト項目</li>
  <li>
    リスト項目
    <ul>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
    </ul>
  </li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ul>

クラスを追加

.list-unstyled .list-inline
  • リスト項目
  • リスト項目
    • リスト項目
    • リスト項目
    • リスト項目
    • リスト項目
    • リスト項目
  • リスト項目
  • リスト項目
  • リスト項目
  • リスト項目
  • リスト項目
  • リスト項目
  • リスト項目
<ul class="list-unstyled">
  <li>リスト項目</li>
  <li>
    リスト項目
    <ul>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
    </ul>
  </li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ul>
<ul class="list-inline">
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ul>

説明つきリスト

用語の説明に使うリストです。

HTML
ハイパーテキストマークアップランゲージ
CSS
カスケーディング(カスケード)スタイルシート
<dl>
  <dt>HTML</dt>
  <dd>ハイパーテキストマークアップランゲージ</dd>
  <dt>CSS</dt>
  <dd>カスケーディング(カスケード)スタイルシート</dd>
</dl>

用語と説明を横に並べる

<dl>タグにdl-horizontalクラスを追加します。
HTML
ハイパーテキストマークアップランゲージ
CSS
カスケーディング(カスケード)スタイルシート
<dl class="dl-horizontal">
  <dt>HTML</dt>
  <dd>ハイパーテキストマークアップランゲージ</dd>
  <dt>CSS</dt>
  <dd>カスケーディング(カスケード)スタイルシート</dd>
</dl>

コードの表示

上の例では、containerのように、コードの部分は、背景色がピンクになっていますが、このようにするには、<code>を使います。

<code>コードの内容</code>

また、長いコードのときは、<pre>を使います。(ただし、色分けをするには、別にJavaScriptライブラリが必要になります)

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

テーブル(表)

以下が、基本のテーブルのスタイルです。

見出し1 見出し2
あああ いいい
あああ いいい
<table class="table">
  <thead>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td>あああ</td>
        <td>いいい</td>
      </tr>
      <tr>
        <td>あああ</td>
        <td>いいい</td>
      </tr>
  </tbody>
</table>

テーブルに追加できるクラス

tableタグのクラスにtableクラス以外にも、様々なクラスを追加できます。

クラス 説明 デモページ
table-striped テーブルが灰色と白のしま模様になります。 css-02.html
table-bordered この表のように、テーブルに外枠が追加されます。 css-03.html
table-hover 行にマウスがポイントされると、背景色が変わります。 css-04.html
table-condensed 行の高さをすこし低くします。 css-05.html

行の背景色をかえる

エラーのときなどに、テーブルの行の背景色をかえることができます

なお、クラスは、trタグかtdタグかthタグに追加します。

クラス
active
success
warning
danger
<table class="table table-bordered">
  <thead>
    <tr>
      <th>クラス</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td><code>active</code></td>
    </tr>
    <tr class="success">
      <td><code>success</code></td>
    </tr>
    <tr class="warning">
      <td><code>warning</code></td>
    </tr>
    <tr class="danger">
      <td><code>danger</code></td>
    </tr>
  </tbody>
</table>
セルごとに違う色にした例↓
通常 active success warning danger
active success warning danger 通常
success warning danger 通常 active
warning danger 通常 active success
danger 通常 active success warning

レスポンシブなテーブル

スマホなどで表示した時、横にスクロールできる状態になります。

見出し 見出し 見出し 見出し 見出し 見出し 見出し
内容です。 内容です。 内容です。 内容です。 内容です。 内容です。 内容です。
内容です。 内容です。 内容です。 内容です。 内容です。 内容です。 内容です。
内容です。 内容です。 内容です。 内容です。 内容です。 内容です。 内容です。
内容です。 内容です。 内容です。 内容です。 内容です。 内容です。 内容です。

フォーム

基本のスタイルは以下のコードになります。(今後、詳細を公開予定)

Example block-level help text here.

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

たいていは、上のコードだけでも足りるかと思います。


ボタン

実は、一番最後のリンクのようなものも、ボタンです。普通のリンクは、aタグで十分ですが、送信ボタンをリンク風にしたい時に使えそうです。

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link">Link</button>

また、buttonタグだけでなくaタグや、inputタグでも、ボタンにできます。

ボタンサイズ

ボタンのクラスに、btn-lgbtn-smbtn-xsを追加することで、ボタンのサイズを変更できます。

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

ヘルパークラス

準備中


レスポンシブWebデザインで使えるコード

準備中

Copyright © 2014 SofPyon, All Rights Reserved.