ナビゲーションのコンポーネント (4/5)

■タブとピル

いくつかのページを切り替えて表示するとき、「タブ」もよく使われます。タブをクリックして別のページに移動させるわけですね。あるいはタブクリックでコンテンツだけを切り替えるような使い方もされます。

この「タブ」は、<nav>タグを利用して作成できます。基本的な形を整理すると以下のようになるでしょう。

<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">タブ名１</a></li>
    <li role="presentation"><a href="#">タブ名２</a></li>
    ……略……
</ul>

タブは、class="nav"を指定して作成されるナビゲーション関係のコンポーネントの一つです。ここでは、navに加えて"nav-tabs"というクラスも指定しています。これで、その中にある<li>タグに用意したリンクがそれぞれタブの形で表示されるようになります。

<li>タグには、role="presentation"を指定しておきます。また、現在選択されているタブにはclass="active"を用意しておきます。

たったこれだけで、簡単に切り替えタブのデザインができてしまいます。実に素晴らしい！

■nav-pillsクラスについて

実をいえば、この切替タブには別のスタイルも用意されています。それは「ピル」と呼ばれるもので、<ul>タグを以下のように修正するだけです。

<ul class="nav nav-pills">

このnav-pillsは、タブの代りに、選択したリンクだけが反転して表示されるインターフェイスです。選択されたリンクがピル（薬のカプセル）のようなのでこのように呼ばれるのでしょう。

基本的な使い方は、タブもピルもまったく違いはありません。ただ、<ul>のクラスをnav-tabsにするか、nav-pillsにするか、だけの違いです。両者は基本的に同じもので、ただ表示されるデザインが多少違うだけ、と考えると良いでしょう。

(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 >Navs</h2>

            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Page 1</a></li>
                <li role="presentation"><a href="#">Page 2</a></li>
            </ul>
            
            <h3>Home Content</h3>
            <p>this is Home page content.</p>
            <p>これは、ダミーのコンテンツです。</p>

        </div>
        
        <ul class="nav nav-pills">
            <li role="presentation" class="active"><a href="#">A</a></li>
            <li role="presentation"><a href="#">B</a></li>
            <li role="presentation"><a href="#">C</a></li>
        </ul>
        
        <h3>Nav-Pills</h3>
        <p>これはNav-pillsの表示です。</p>

    </div>
</div>
    
</div>

</body>
</html>

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail