Bootstrapを使用してCSSに触れることなくページ形成する方法➀

➀画像をリキッド（可変）にする

<img>に「img-responsive」とクラス名を指定します。これで、配置したグリッドの横幅にあわせて画像の大きさが変化します。

➁カテゴリーの情報をラベルとして表示する

記事が属するカテゴリーの情報をラベルとして表示するため<a>に「label」とクラス名を指定します。また「label-info」というクラス名も追加し、水色で表示するようにします。

色の指定は他にも「default」,「primary」,「success」,「warning」,「danger」などがあります。

➂右側のメニューをデザインする

「nav」というクラス名を追加します。これにより、各リンクのリストマークが削除されます。さらに「nav-pills」というクラス名を追加し、各リンクを角丸のデザインにします。またカーソルを重ねると背景がグレーになります。しかし、「nav-pills」を指定するとリンクが横並びになるので、「nav-stacked」というクラス名も追加し、縦に並ぶようにします

メニューをパネルとして表示するため、メニュー全体を「panel」というクラス名を追加します。また「panel-default」というクラス名を追加し、パネルの色の組み合わせを標準のグレーで表示するようにします。

その他、「panel-header」や「panel-title」「panel-body」で構成していきます。.

➃フッターをデザインする

枠で囲んで表示する「well」を使用します。| Use “well” to display in a frame.

➄ナビゲーションメニューをデザインする

ナビゲーション全体を「navbar」というクラス名をつける。またここでは黒色で表示するため「navbar-inverse」というクラス名も追加してます。

ブレイクポイントに応じて並びを変更するため<ul>に「nav」と「navbar-nav」というクラス名を追加します。これで横幅768px以上では横に並べて、767px以下では縦に並べて表示されます。

767px以下ではトグル型メニューの形で表示するように設定してます。まずはリンク全体を<div>で記述し、クラス名を「navbar-collalise」と指定します。さらにリンクを非表示にするため「collalise」というクラス名も追加します。

トグルボタンを用意します。<button tylie=”button” class=”navbar-toggle”>を追加して、<div class=”navbar-header”>を記述します。

トグルボタンであることを示す3本線のアイコンを表示します。<button>～</button>内に「icon-bar」と指定することで表示されます。また、音声ブラウザにトグルボタンの存在を知らせるため、「メニュー」というテキスト情報も追加し、この情報はブラウザ画面に表示しないようにするため、「sr-only」とクラス名を指定しておきます。

三本線のトグルボタンを押すことで表示、非表示を切り替えるようにします。そのためまずはJavaScriptでトグルボタンを機能させるため<button>にdata-toggle属性を追加し、値を「collapse」と指定します。次にdata-target属性を追加し、トグルボタンで表示をオン、オフしたいターゲットを指定します。今回は<div class=”navbar-collapse collapse”>のため「.navbar-collapse」と指定します。

HTML

<div class=”container”>
<!– 1行目　ヘッダー–>
<div class=”row”>
<div class=”col-sm-12″>
<div class=”header”>
<h1><a href=”#”><img src=”bicycle.png” alt=”” class=”logo”>BICYCLE</a></h1>
</div>
</div><!–col–>
</div><!–row–>

<!– 2行目 ナビゲーション–>
<div class=”row”>
<div class=”col-sm-12″>

<div class=”menu navbar navbar-inverse”>
<div class=”navbar-header”>
<button type=”button”
class=”navbar-toggle”
data-toggle=”collapse”
data-target=”.navbar-collapse”>
<span class=”sr-only”>メニュー</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
</div>

<div class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav navbar-left”>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>Javascript</a></li>
<li><a href=”#”>Bootstrap</a></li>
</ul>
</div>
</div>

</div><!–col–>
</div><!–row–>

<!– 3行目 記事–>
<div class=”row”>
<div class=”col-sm-8″>
<div class=”entry”>
<img src=”photo.jpg” alt=”” class=”img-responsive”>
<h3>果てしない直線道を自転車で走る</h3>
<div class=”added”>
<p>
<a href=”#” class=”1b label label-info”>自転車の旅</a>
<a href=”#” class=”1b label label-info”>おすすめのサイクリングロードはこちら</a>
</p>
</div>
<p>北海道を自転車で旅を始めて4日目。果てしない一本道をひたすら進む。地平線に向かってひたすら進む。ゴールの見えない旅。自分に打ち勝つ旅。</p>
<p>孤独との闘い。自分を見つめなおす旅。自分のちっぽけさをこの広い台地で感じる。クマが出てきて襲われたらどうしよう。</p>
</div>
</div><!–col–>

<!– サブメニュー–>
<div class=”col-sm-4″>

<div class=”menu panel panel-default“>
<div class=”panel-heading”>
<h3 class=”panel-title”>カテゴリー</h3>
</div>
<div class=”panel-body”>
<ul class=”nav nav-pills nav-stacked”>
<li><a href=”#”>旅の思い出</a></li>
<li><a href=”#”>おすすめのサイクリングロード</a></li>
<li><a href=”#”>ハプニング</a></li>
<li><a href=”#”>気を付けること</a></li>
</ul>
</div>
</div>

</div> <!–col–>
</div> <!–row–>

<!– 4行目 フッター–>
<div class=”row”>
<div class=”col-sm-12″>
<div class=”footer well”></div>

Copyright &copy;自転車旅行

</div><!–col–>
</div><!–row–>
</div><!–container–>

＊尚、ここではBootstapバージョン3.1.1を使用しています。 こちらからダウンロードできます。新しいバージョンをご使用だと機能しない部分も出てきます。| If you use a new version, some parts may not work.

レベルアップにプロからの学びを。