bootstrap3

css で table を簡単に作る

CSSやHTMLが強力に進化して、さらにスマホなどの携帯メディアが普及しています。
スマホに対応していないサイトはもうだめだとまで言う人もいます。私もそう思いますが。

そのためレスポンシブデザインといわれ、画面のサイズが小さくなると、そのサイズに合わせて、配置やサイズを自動的に変更する処理が必要になります。

多くのタグは、表示幅を超えてしまうと改行したりしまうけど、データをきれいに並べて表示したい場合に使う table タグの場合、頑強にその構造を維持しようとします。

その結果として画面に右に隠れてしまい嫌われる横スクロールさせないと見れない状態になります。

ですが、横に並べるのはテーブルが一番簡単なのですが、テーブルを使わずにCSSで表現しようとすると結構手間がかかります。

一度作ってしまうと、使いまわせばいいのですが、その手間が結構大変。それで最近使われているのが bootstrap というCSSセットです。

css で table を簡単に作る

table は、 table , 行のくくりを tr 列のくくりを td で指定します。

bootstrap では、これらをすべて div などでくくります。

bootstrap のグリッドシステムの使い方

bootstrap3 の入手

以下よりダウンロードして、テーマフォルダーなどにアップロードします。
ダウンロード

bootstrap の取り込み。

header などで以下を追加します。
以下は、テーマフォルダーに　bootstrap-3.3.1-dist というフォルダーを準備して bootstrap をアップロードした場合
※通常のサイトでは Jquery の取り込みも必要です。以下はWP用に JQuery を外してあります。

<!-- bootstrap --->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="<?php echo get_template_directory_uri(); ?>/bootstrap-3.3.1-dist/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="<?php echo get_template_directory_uri(); ?>/bootstrap-3.3.1-dist/js/bootstrap.min.js"></script>
<!-- /bootstrap --->

<!--[if lt IE 9]>

<![endif]-->

bootstrap のテーブル作成

以下の構造を作ります。

<!-- テーブルタグの場合 -->
<table>
    <tr>
        <td>～～～</td>
        <td>～～～</td>
        <td>～～～</td>
    </tr>
</table>

<!-- bootstrap タグの場合 -->
<div class="container-fluid"> <!-- talble -->
    <!-- Bootstrapのグリッドシステムclass="row"で開始 -->
    <div class="row">         <!-- tr -->
        <!-- col-{prefix}-{分割数} 分割数の合計を12にする -->
        <div class="col-sm-4">～～～</div> <!-- td /td -->
        <div class="col-sm-4">～～～</div> <!-- td /td -->
        <div class="col-sm-4">～～～</div> <!-- td /td -->
    </div>                    <!-- /tr -->
</div>                        <!-- /table -->

<table>

<tr>

</tr>

</table>

</div>

</div>

table タグの table に当たる部分は、class=”contenter” もしくは、class=”container-fluid”
table タグの tr に当たる部分は、 class=”row”
table タグの td に当たる部分は、 class=”col-{prefix}-{分割数}”

bootstrap グリッドシステムでポイントになる col クラス

１行の中にいれる列は、全体を１２分割して、その中の何個をその列の幅にするかを指定します。
それが、前述の「分割数」です。

prefix は、bootstrap 内で幅を決めるためのキーワードで以下のものがあります。

画面サイズ	｛prefix｝	｛書式｝
モバイル（768px以下）	エクストラスモール=xs	col-xs-*
タブレット（768px以上、992px未満）	スモール=sm	col-sm-*
デスクトップ（992px以上、1200px未満）	ミディアム=md	col-md-*
デスクトップ（1200px以上）	ラージ=lg	col-lg-*

* : 分割数
多くの場合は、sm でよいと思います。

contenter と container-fluid の違い

container-fluid ：流動幅：表示領域に表示しきれない場合、幅を狭める。
container ：固定幅：表示領域の幅全体に表示。

container サンプル

container-fluid

～～～

container

～～～

<div style="width:600px;background-color;padding:5px;margin:5px;border:1px solid #ccf;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-4" style="border:1px solid #ccf;">～～～</div>
            <div class="col-sm-4" style="border:1px solid #ccf;">～～～</div>
            <div class="col-sm-4" style="border:1px solid #ccf;">～～～</div>
        </div>
    </div>
</div>

<div style="width:600px;background-color;padding:5px;margin:5px;border:1px solid #fcc;">
    <div class="container">
        <div class="row">
            <div class="col-sm-4" style="border:1px solid #ccf;">～～～</div>
            <div class="col-sm-4" style="border:1px solid #ccf;">～～～</div>
            <div class="col-sm-4" style="border:1px solid #ccf;">～～～</div>
        </div>
    </div>
</div>

</div>

</div>

何が違う？といわれても、実際にみないとわかりませんね（＾＾；

基本的には、画面幅に合わせて流動的に切替わる container-fluidを使えば、あまり問題になることはありません。

つまり、container-fluid , container は、グリッドを１２分割するときの基とする横幅を指定するイメージになります。

そのため、以下のように container-fluid の class を持った div にサイズを与えるとそのサイズを基準にしてグリッドが作られます。

container-fluid に幅を与えない場合

～～～

container-fluid に幅を与えた場合

～～～

<div style="width:600px;background-color;padding:5px;margin:5px;border:1px solid #fcc;">
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4" style="border:1px solid #ccf;">～～～</div>
        <div class="col-sm-4" style="border:1px solid #ccf;">～～～</div>
        <div class="col-sm-4" style="border:1px solid #ccf;">～～～</div>
    </div>
</div>
</div>

<div style="width:600px;background-color;padding:5px;margin:5px;border:1px solid #fcc;">
<div class="container-fluid" style="width:300px;">
    <div class="row">
        <div class="col-sm-4" style="border:1px solid #ccf;">～～～</div>
        <div class="col-sm-4" style="border:1px solid #ccf;">～～～</div>
        <div class="col-sm-4" style="border:1px solid #ccf;">～～～</div>
    </div>
</div>
</div>

</div>

</div>

イメージできたでしょうか？

このサイトの情報があなたの一助になれば幸いです。

スポンサードリンク

投稿者: tecinfo
bootstrap3, css

bootstrap3

css で table を簡単に作る