BICYCLE

➀画像をリキッド（可変）にする | Make the image liquid (variable)

<img>に「img-responsive」とクラス名を指定します。これで、配置したグリッドの横幅にあわせて画像の大きさが変化します。| Specify "img-responsive" and the class name in . Now, the size of the image will change according to the width of the placed grid.

➁カテゴリーの情報をラベルとして表示する | Display category information as a label

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

色の指定は他にも「default」,「primary」,「success」,「warning」,「danger」などがあります。| Specify "label" and the class name in to display the information of the category to which the article belongs as a label. Also add the class name "label-info" so that it will be displayed in light blue. Other color specifications include "default", "primary", "success", "warning", and "danger".

➂右側のメニューをデザインする | ➂ Design the menu on the right

「nav」というクラス名を追加します。これにより、各リンクのリストマークが削除されます。さらに「nav-pills」というクラス名を追加し、各リンクを角丸のデザインにします。またカーソルを重ねると背景がグレーになります。しかし、「nav-pills」を指定するとリンクが横並びになるので、「nav-stacked」というクラス名も追加し、縦に並ぶようにします。| Add the class name "nav". This will remove the list mark for each link. Add the class name "nav-pills" and make each link a rounded design. When you hover the cursor over it, the background becomes gray. However, if you specify "nav-pills", the links will be arranged side by side, so add the class name "nav-stacked" so that they are arranged vertically.

メニューをパネルとして表示するため、メニュー全体を「panel」というクラス名を追加します。また「panel-default」というクラス名を追加し、パネルの色の組み合わせを標準のグレーで表示するようにします。| To display the menu as a panel, add the class name "panel" to the entire menu. We've also added a class name of "panel-default" so that the panel color combinations are displayed in standard gray.

その他、「panel-header」や「panel-title」「panel-body」で構成していきます。| In addition, it will consist of "panel-header", "panel-title", and "panel-body".

➃フッターをデザインする | ➃ Design the footer

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

➄ナビゲーションメニューをデザインする | ➄ Design the navigation menu

ナビゲーション全体を「navbar」というクラス名をつける。またここでは黒色で表示するため「navbar-inverse」というクラス名も追加してます。| Give the entire navigation a class name of "navbar". Also, since it is displayed in black here, the class name "navbar-inverse" is also added.

ブレイクポイントに応じて並びを変更するため<ul>に「nav」と「navbar-nav」というクラス名を追加します。これで横幅768px以上では横に並べて、767px以下では縦に並べて表示されます。| Add the class names "nav" and "navbar-nav" to <ul> to change the order according to the breakpoint. Now, if the width is 768px or more, it will be displayed horizontally, and if it is 767px or less, it will be displayed vertically.

767px以下ではトグル型メニューの形で表示するように設定してます。まずはリンク全体を<div>で記述し、クラス名を「navbar-collalise」と指定します。さらにリンクを非表示にするため「collalise」というクラス名も追加します。| In 767px and below, it is set to be displayed in the form of a toggle type menu. First, describe the entire link in <div> and specify the class name as "navbar-collalise". Also add the class name "collalise" to hide the links.

トグルボタンを用意します。<button tylie="button" class="navbar-toggle">を追加して、<div class="navbar-header">を記述します。| Prepare a toggle button. Add <button tylie = "button" class = "navbar-toggle"> and write <div class = "navbar-header">.

トグルボタンであることを示す3本線のアイコンを表示します。<button>～</button>内に「icon-bar」と指定することで表示されます。また、音声ブラウザにトグルボタンの存在を知らせるため、「メニュー」というテキスト情報も追加し、この情報はブラウザ画面に表示しないようにするため、「sr-only」とクラス名を指定しておきます。| Displays a three-line icon indicating that it is a toggle button. It is displayed by specifying "icon-bar" in <button> ～ </ button>. Also, in order to notify the voice browser of the existence of the toggle button, add the text information "menu", and specify "sr-only" and the class name so that this information will not be displayed on the browser screen. ..

三本線のトグルボタンを押すことで表示、非表示を切り替えるようにします。そのためまずはJavaScriptでトグルボタンを機能させるため<button>にdata-toggle属性を追加し、値を「collapse」と指定します。次にdata-target属性を追加し、トグルボタンで表示をオン、オフしたいターゲットを指定します。今回は<div class="navbar-collapse collapse">のため「.navbar-collapse」と指定します。| Press the three-line toggle button to switch between display and non-display. Therefore, first add the data-toggle attribute to <button> and specify the value as "collapse" in order to make the toggle button work in JavaScript. Next, add the data-target attribute and specify the target you want to turn on / off the display with the toggle button. This time, <div class = "navbar-collapse collapse">, so specify ".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.

やっぱり詳しい人から深く学びたい人はこちらをどうぞ。| If you want to learn more from those who are familiar with it, please click here.