コンテンツの基本要素 (1/5)
作成:2017-02-18 08:05
更新:2017-02-18 08:05
更新:2017-02-18 08:05
■ヘッダー、タイトル、本文
コンテンツの基本は、「ヘッダー」「タイトル」「本文」といったテキストでしょう。これらは、基本的にはHTMLのタグそのままで構いません。
下にごく簡単なコンテンツの例を挙げておきました。これをもとに、主なコンテンツの要素について説明しましょう。
●タイトルとヘッダー
タイトルは、<h1>～<h3>のタグを使っています。何の変哲もない、ただのタグですね。ただしサンプルでは、<h1>と<h2>は、<div class="page-header">というタグの中にまとめられています。
このclass="page-header"というスタイルは、ヘッダー部分のスタイルクラスです。これを指定することで、その部分をヘッダーとして切り離し表示します。
●コンテンツ
コンテンツは、普通に<p>タグを使って記述すればいいでしょう。これは特別なものはなにも必要ありません。
●引用表示
他からの引用文などは、<blockquote>タグの中に用意します。これは、クラスを指定せずに書けば普通に左揃えになり、class="pull-right"を指定すると右揃えになります。なお、この表示はフォントサイズなどには影響を与えないので、一般的には<small>などでやや小さめにしておくと引用らしくなるでしょう。
――このように、コンテンツの基本的な要素は、タグそのものはHTMLの標準的なものを使うだけです。いくつかスタイルクラスを指定していますが、Bootstrapらしさという点ではそれぐらい。ほとんどBootstrapなど意識せず、普通にコンテンツを書けばいいのですね。
下にごく簡単なコンテンツの例を挙げておきました。これをもとに、主なコンテンツの要素について説明しましょう。
●タイトルとヘッダー
タイトルは、<h1>～<h3>のタグを使っています。何の変哲もない、ただのタグですね。ただしサンプルでは、<h1>と<h2>は、<div class="page-header">というタグの中にまとめられています。
このclass="page-header"というスタイルは、ヘッダー部分のスタイルクラスです。これを指定することで、その部分をヘッダーとして切り離し表示します。
●コンテンツ
コンテンツは、普通に<p>タグを使って記述すればいいでしょう。これは特別なものはなにも必要ありません。
●引用表示
他からの引用文などは、<blockquote>タグの中に用意します。これは、クラスを指定せずに書けば普通に左揃えになり、class="pull-right"を指定すると右揃えになります。なお、この表示はフォントサイズなどには影響を与えないので、一般的には<small>などでやや小さめにしておくと引用らしくなるでしょう。
――このように、コンテンツの基本的な要素は、タグそのものはHTMLの標準的なものを使うだけです。いくつかスタイルクラスを指定していますが、Bootstrapらしさという点ではそれぐらい。ほとんどBootstrapなど意識せず、普通にコンテンツを書けばいいのですね。
(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> <h3>小見出し</h3> <p> これがコンテンツの本文です。これがコンテンツの本文です。 これがコンテンツの本文です。 これがコンテンツの本文です。これがコンテンツの本文です。 これがコンテンツの本文です。 これがコンテンツの本文です。これがコンテンツの本文です。 これがコンテンツの本文です。 </p> <blockquote> <p><small>引用などのテキスト</small></p> </blockquote> <blockquote class="pull-right"> <p><small>引用などのテキスト</small></p> </blockquote> </div> </div> </div> </body> </html>
※関連コンテンツ