[Bootstrap]パネルのコンポーネント”Panels”の使い方　

更新：2017/12/05
ライター：IBC

今回は Bootstrap を使ってパネルを作成します。

Bootstrap を使ってパネルを作成するには、
div で領域を指定し、class=”panel” を設定して、色を設定します。

色の設定については、
class=”” で色を指定するのですが、
panel-default　を指定すると灰色に、
panel-primary　で青、
panel-success　で緑、
panel-info　で水色、
panel-warning　で黄色、
panel-danger　で赤、
というように色を変えることができます。

パネルの本文については、div で囲み、
class=”panel-body” を設定します。

構文としては

<div class="panel パネルの色">
  <div class="panel-body">本文</div>
</div>

</div>

というようになります。

また、ヘッダーやフッターつきのパネルを作成することもできます。

この場合、ヘッダー部分を div で囲み、class=”panel-heading”を指定します。
フッターについても、div で囲み、class=”panel-footer”を指定します。

もし、デフォルトの色を指定して、ヘッダーとフッターつきのラベルを作成するのなら

<div class="panel panel-default">
  <div class="panel-heading">ヘッダー</div>
  <div class="panel-body">本文</div>
  <div class="panel-footer">フッター</div>
</div>

</div>

というようになります。

また、テーブルをラベル内に作成することも可能です。

この場合、table要素に class=”table” を指定します、

  <div class="panel panel-default">

    <div class="panel-body">パネル内容</div>
    <table class="table">
      <tr>
        <th></th>
        <th>姓</th>
        <th>名</th>
        <th>ユーザ名</th>
      </tr>
      <tr>
        <th scope="row">1</th>
        <td>name1</td>
        <td>second_name1</td>
        <td>user_name1</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>name2</td>
        <td>second_name2</td>
        <td>user_name2</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>name3</td>
        <td>second_name3</td>
        <td>user_name3</td>
      </tr>
    </table>
</div>

<div class="panel-body">パネル内容</div>

<tr>

</tr>

<tr>

<td>second_name1</td>

</tr>

<tr>

<td>second_name2</td>

</tr>

<tr>

<td>second_name3</td>

</tr>

</table>

</div>

また、リストつきのパネルも作成できます。

この場合、ul または li 要素に class=”list-group”を指定し、
リストとなる li要素に class=”list-group-item”を指定します。

<div class="panel panel-primary">
  <div class="panel-heading">ヘッダー</div>
  <div class="panel-body">本文</div>
  <ul class="list-group">
    <li class="list-group-item">リスト 1</li>
    <li class="list-group-item">リスト 2</li>
    <li class="list-group-item">リスト 3</li>
    <li class="list-group-item">リスト 4</li>
  </ul>
</div>

</ul>

</div>

というようになります。

ここまでが概要です。
実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。

なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

html:5

html:5

として展開するととして展開すると

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
<body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</html>

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

次に Bootstrap のライブラリの読み込みです。
ダウンロードして読み込む方法と、ネットから読み込む方法がありますが、
今回はネットから読み込む方法CDNの方法を使います。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

1	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

でCSSファイルの読み込みをします。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

1	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

で javascript を読み込みます。

この２つがないと Bootstrap は機能しません。

次に、パネルの領域を設定します。

今回は色を青で設定します。
この中にパネルを作成します。

  div.panel.panel-primary>div.panel-heading{ヘッダー}+div.panel-body{本文}

1	div.panel.panel-primary>div.panel-heading{ヘッダー}+div.panel-body{本文}

として展開し、

  <div class="panel panel-primary">
    <div class="panel-heading">ヘッダー</div>
    <div class="panel-body">本文</div>
  </div>

</div>

を作成します。

Emmet では複数のクラスを指定するときには
.クラス名１.クラス名２
というように続けて書くようにします。
class=”” は .クラス名で記述し、id=”” の場合は #ID名で記述します。

[] の中には data-toggle などのパラメータを記述します。
複数の場合は半角スペースで区切って記述します。

これでパネルができているので、ctrl + shirt + h で確認してみましょう。

これでヘッダーが青のパネルができているのがわかります。

次に、リストをいれたパネルを作成してみましょう。

これも Emmet で簡単に作成できます。

div.panel.panel-primary>div.panel-heading{ヘッダー}+div.panel-body{本文}+ul.list-group>(li.list-group-item{リスト $})*4

1	div.panel.panel-primary>div.panel-heading{ヘッダー}+div.panel-body{本文}+ul.list-group>(li.list-group-item{リスト $})*4

を展開すると

  <div class="panel panel-primary">
    <div class="panel-heading">ヘッダー</div>
    <div class="panel-body">本文</div>
    <ul class="list-group">
      <li class="list-group-item">リスト 1</li>
      <li class="list-group-item">リスト 2</li>
      <li class="list-group-item">リスト 3</li>
      <li class="list-group-item">リスト 4</li>
    </ul>
  </div>

</ul>

</div>

が作成できます

これでリスト入りのパネルができたので、ctrl + shift + h で確認してみましょう。

次に、テーブル入りのパネルを作成します。
Emmet ですべてをかくことができないので、大まかに作成し、足りないところは
打ち込むようにします。

  table.table>tr>th+th{姓}+th{名}+th{ユーザ名}^(tr>th[scope=row]{$}+td{name$}+td{second_name$}+td{user_name$})*3

1	table.table>tr>th+th{姓}+th{名}+th{ユーザ名}^(tr>th[scope=row]{$}+td{name$}+td{second_name$}+td{user_name$})*3

で作成し、

<th scope="row"></th>

1	<th scope="row"></th>

のタグの部分だけ直接数値を打ち込みます。

今回は色をデフォルトに指定してみました。

これで

  <div class="panel panel-default">

    <div class="panel-body">パネル内容</div>
    <table class="table">
      <tr>
        <th></th>
        <th>姓</th>
        <th>名</th>
        <th>ユーザ名</th>
      </tr>
      <tr>
        <th scope="row">1</th>
        <td>name1</td>
        <td>second_name1</td>
        <td>user_name1</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>name2</td>
        <td>second_name2</td>
        <td>user_name2</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>name3</td>
        <td>second_name3</td>
        <td>user_name3</td>
      </tr>
    </table>
</div>

<div class="panel-body">パネル内容</div>

<tr>

</tr>

<tr>

<td>second_name1</td>

</tr>

<tr>

<td>second_name2</td>

</tr>

<tr>

<td>second_name3</td>

</tr>

</table>

</div>

というようになります。

これもctrl + shift + h でプレビューでみてみましょう。

このように bootstrap の panel を使うことでパネルを簡単に作成することができます。

それでは、今回の要点をまとめてみましょう。

・Bootstrap を使ってパネルを作成するには、div で領域を指定し、class=”panel” を設定して、色を設定。
・設定できる色は以下の６つ。
panel-default（灰色）
panel-primary（青）
panel-success（緑）
panel-info　（水色）
panel-warning（黄色）
panel-danger（赤）
・パネルの本文については、div で囲み、class=”panel-body” を設定。
・ヘッダーを設置するのなら、ヘッダー部分を div で囲み、class=”panel-heading”を指定。
・フッターを設置するのなら、フッター部分を div で囲み、class=”panel-footer”を指定。
・テーブルをラベル内に設置するのなら、table要素に class=”table” を指定。
・リストをラベル内に設置するのなら、ul または li 要素に class=”list-group”を指定し、
リストとなる li要素に class=”list-group-item”を指定。

このように、ラベルとリストやテーブルを組み合せることができ、色を簡単に指定できるので、
活用することで見やすいサイトを構築することが可能になります。