コンテンツの基本要素 (5/5)
作成:2017-02-21 16:00
更新:2017-02-21 16:00
更新:2017-02-21 16:00
■ColorとBackground
最後に、テキストの「色」について触れておきましょう。
HTMLでは、スタイルシートを使ってテキストをジユに色設定できます。が、Bootstrapでは、さまざまな部品の役割や重要性ごとにいくつかのスタイルを用意していることが多く、それぞれに固有の色が設定されています。
例えば、「初心者向けの説明」などは濃い青（濃紺）が用いられ、危険な操作には赤が使われる、と言った具合ですね。
アラートやダイアログ、ボタンなど、さまざまなGUI部品がBootstrapには用意されていますが、それらを表示する際に、「これは初心者の説明用」「これは危険の警告」といった具合に用途をクラスで指定すれば、それにあわせた色でデザインがされるようになっているのですね。
このため、テキストの色も、あらかじめ用意されているクラスを使い、その中から選んで指定するのが基本となっているといってよいでしょう。用意されているテキストの色関係クラスは以下のようになります。
・テキストの色
・背景の色
下に、これらを使ってテキストを表示する例を挙げておきました。これを見れば、だいたいどれが何色かわかってくるでしょう。クラス名に使われている、「primary」「success」といった単語は、Bootstrap全体で共通して使われています。これから先、さまざまなGUIのクラスで使われますので、今から頭に入れておくと良いでしょう。
HTMLでは、スタイルシートを使ってテキストをジユに色設定できます。が、Bootstrapでは、さまざまな部品の役割や重要性ごとにいくつかのスタイルを用意していることが多く、それぞれに固有の色が設定されています。
例えば、「初心者向けの説明」などは濃い青（濃紺）が用いられ、危険な操作には赤が使われる、と言った具合ですね。
アラートやダイアログ、ボタンなど、さまざまなGUI部品がBootstrapには用意されていますが、それらを表示する際に、「これは初心者の説明用」「これは危険の警告」といった具合に用途をクラスで指定すれば、それにあわせた色でデザインがされるようになっているのですね。
このため、テキストの色も、あらかじめ用意されているクラスを使い、その中から選んで指定するのが基本となっているといってよいでしょう。用意されているテキストの色関係クラスは以下のようになります。
・テキストの色
text-muted
text-primary
text-success
text-info
text-warning
text-danger
・背景の色
bg-primary
bg-success
bg-info
bg-warning
bg-danger
下に、これらを使ってテキストを表示する例を挙げておきました。これを見れば、だいたいどれが何色かわかってくるでしょう。クラス名に使われている、「primary」「success」といった単語は、Bootstrap全体で共通して使われています。これから先、さまざまなGUIのクラスで使われますので、今から頭に入れておくと良いでしょう。
(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 >ColorとBackground</h2> </div> <div> <p class="text-muted">これは、text-mutedのテキストです。</p> <p class="text-primary">これは、text-primaryのテキストです。</p> <p class="text-success">これは、text-successのテキストです。</p> <p class="text-info">これは、text-infodのテキストです。</p> <p class="text-warning">これは、text-warningのテキストです。</p> <p class="text-danger">これは、text-dangerのテキストです。</p> <p class="bg-primary">class="bg-primary"</p> <p class="bg-success">class="bg-success"</p> <p class="bg-info">class="bg-info"</p> <p class="bg-warning">class="bg-warning"</p> <p class="bg-danger">class="bg-danger"</p> </div> </div> </div> </div> </body> </html>
※関連コンテンツ