PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

ビギナーのためのBootstrap入門:

コンテンツの基本要素 (1/5)

作成: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など意識せず、普通にコンテンツを書けばいいのですね。



 

※プログラムリストが表示されない場合

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>



 


「ビギナーのためのBootstrap入門」に戻る



※その他のコンテンツ