コンテンツの基本要素 (3/5)
作成:2017-02-18 08:11
更新:2017-02-18 08:11
更新:2017-02-18 08:11
■パネルについて
Webページのコンテンツとは切り離された内容をページ内にコンパクトにまとめて表示したい、ということはよくあります。ある種のコラムであったり、注意・警告の表示などのように、本来はアラートやダイアログ的に表示するようなものですね。
こうした時に便利なのが「パネル」です。これは、Bootstrap独自の表示で、ページ内に、独立したコンテンツを埋め込むことが簡単にできます。このパネルは、以下のような形で記述します。
パネルは、class="panel"というクラスを指定した<div>タグを使って作成します（ただし、panelの他に、後述のパネルのスタイル用クラスが必要です）。
パネル内には、ヘッダー、ボディ、フッターの３つのタグを用意します。それぞれclass="panel-title"、class="panel-body"、class="panel-footer"というクラスを指定します。また、ヘッダー部分には、タイトル表示のスタイルを指定するclass="panel-title"が用意されています。
実際にパネルを用意する場合は、class="panel"に、更にパネルのスタイルに関するクラスを追加します。これには、以下のようなものが用意されています。
paner-default ――基本のパネルです。全体的にグレーを基調とした表示です。
panel-primary ――紺色のタイトルと枠線を表示した、よりはっきりと目立つスタイルです。
panel-success ――何らかの動作が成功したメッセージ用です。淡いグリーンのタイトル。
panel-info ――インフォメーション表示用です。淡いブルーのタイトル。
panel-warning ――警告の表示用です。黄色っぽいタイトル。
panel-danger ――危険を知らせるためのものです。赤紫っぽいタイトル。
これらをclass="panel"と併用して設定することで、パネルが表示されるようになります。利用例を下に掲載しておきましょう。ここでは、<div class="panel panel-primary">という形でパネル用のタグを用意しています。
こうした時に便利なのが「パネル」です。これは、Bootstrap独自の表示で、ページ内に、独立したコンテンツを埋め込むことが簡単にできます。このパネルは、以下のような形で記述します。
<div class="panel">
<div class="panel-heading">
<p class="panel-title">タイトル</p>
</div>
<div class="panel-body">
コンテンツ
</div>
<div class="panel-footer">
フッター
</div>
</div>
パネルは、class="panel"というクラスを指定した<div>タグを使って作成します（ただし、panelの他に、後述のパネルのスタイル用クラスが必要です）。
パネル内には、ヘッダー、ボディ、フッターの３つのタグを用意します。それぞれclass="panel-title"、class="panel-body"、class="panel-footer"というクラスを指定します。また、ヘッダー部分には、タイトル表示のスタイルを指定するclass="panel-title"が用意されています。
■パネルのスタイル設定
実際にパネルを用意する場合は、class="panel"に、更にパネルのスタイルに関するクラスを追加します。これには、以下のようなものが用意されています。
paner-default ――基本のパネルです。全体的にグレーを基調とした表示です。
panel-primary ――紺色のタイトルと枠線を表示した、よりはっきりと目立つスタイルです。
panel-success ――何らかの動作が成功したメッセージ用です。淡いグリーンのタイトル。
panel-info ――インフォメーション表示用です。淡いブルーのタイトル。
panel-warning ――警告の表示用です。黄色っぽいタイトル。
panel-danger ――危険を知らせるためのものです。赤紫っぽいタイトル。
これらをclass="panel"と併用して設定することで、パネルが表示されるようになります。利用例を下に掲載しておきましょう。ここでは、<div class="panel panel-primary">という形でパネル用のタグを用意しています。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <script src="./js/jquery-3.1.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> </head> <body > <div class="container"> <div class="row"> <div class="col-md-12"> <div class="page-header"> <h1>コンテンツの表示</h1> <h2 >パネル</h2> </div> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> パネルの表示について </h3> </div> <div class="panel-body"> <p>ここにパネルのコンテンツを用意する。 ここにパネルのコンテンツを用意する。 ここにパネルのコンテンツを用意する。</p> </div> <div class="panel-footer"> copyright SYODA-Tuyano. </div> </div> </div> </div> </div> </body> </html>
※関連コンテンツ