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

■ヘッダー、タイトル、本文

コンテンツの基本は、「ヘッダー」「タイトル」「本文」といったテキストでしょう。これらは、基本的にはHTMLのタグそのままで構いません。

下にごく簡単なコンテンツの例を挙げておきました。これをもとに、主なコンテンツの要素について説明しましょう。

●タイトルとヘッダー
タイトルは、<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>

　次へ >>

記事のリストに戻る

PC Site G+ mail