100px;">container要素。グリッドシステムの容器の役割。style="background:pink;">row要素。</div></div>rowを省略してrowやcol-{prefix}-**を使って分割することはできません。col-{prefix}-{カラム数}クラスcol-{prefix}-カラム数(列数)を利用して列を定義します。col-{prefix}-{カラム数(列数)}はrowクラスに内包されます。{prefix}には横幅のサイズタイプ(横幅サイズに応じたlg/md/sm/xsなどの種類)が入り、{カラム数(列数)}には1〜12までの数字が入ります。container要素。グリッドシステムの容器の役割。100px;">container要素。グリッドシステムの容器の役割。style="background:brown">col-md-6</div></div></div>上記例では、col-md-6のように{prefix}の箇所でmdというワードを利用して分割しました。mdは「横幅が中くらいのPC画面の場合(具体的には992px以上の場合は)」という意味になり、横幅サイズごとに分割する数を変更することができます。{カラム数}には1〜12までの数字が入ります。合計で12になるように定義します。mdのほかにも横幅サイズの大きさに応じて、lg/sm/xsなどのサイズを指定することができます。各サイズ毎のブレイクポイントや横幅の範囲などは下記の通りです。3.3また、下記のように各サイズごとに列数を定義できるので、レスポンシブデザインを簡単に設定することができます。container要素。グリッドシステムの容器の役割。skyblue;font-size:20px;">container要素。グリッドシステムの容器の役割。col-md-3</div></div><br></div>なお、{prefix}に記述したクラスは、画面幅がブレークポイントサイズ以上のデバイスに適用されます。上記サンプルのように.col-md-3と指定すると、.col-lg-**と明示しない限り、lgサイズでも3列分が適用されます。col-で分割しない(グリッドシステムを使わなくて良い)場合は、rowやcolクラスを省略してcontainerクラス直下に中身を描いても構いません。3.3containerの外側で要素を記述することが可能row、col-{prefix}などのグリッドシステムを利用する際はcontainerの中で記述する必要がありますが、全幅背景のようなcontainerの外側に内容を記述したい場合はcontainerの外側で要素を書くことができます。背景画面などブラウザ全幅の指定が必要な場合は、containerクラスの外側にdivやsectionタグを囲みます。style="background:skyblue;"><p>container要素</p><br></div></section>全幅用のcontainer「container-fluid」containerの全幅版で「container-fluid」が用意されています。container-fluid内にrowやcol-{prefix}-を記述することができます。"><h2>container-fluid</h2></div>なお、container-fluidは全幅ですがbootstrap.css側で余白設定がされています。offsetの指定で余白を作成する.col-{prefix}-offset-{カラム数}:カラム数分左側に余白(オフセット)をつくることができます。水色部分がcol-md-8です。skyblue;">←←col-md-offset-2で左側に2列分の余白ができた<br><br><br>水色部分がcol-md-8です。3.3(※注)bootstrapバージョン4より、書き方が「offset-{prefix}-{カラム数}」に変わったようです。documentpushとpullでカラムの順番を変える.col-{prefix}-push-{カラム数}や.col-{prefix}-pull-{カラム数}でカラムの順番を変えることができます。カラム数分右側に列を移動させる。カラム数分左側に列を移動させる。■使用例pushとpullで順番を変更することにより、下記のようにPC表示の時は左にサイドバー、右にメインメニューの構成で、スマートフォン表示の時は上にメインメニュー、下にサイドバーを表示することができるようになります。3.3タイポグラフィーブートストラップでは、フォントサイズ14px、行の高さ1.428など、デフォルトの設定値があります。以下に簡単に代表的なタイポグラフィーを記載します。3.3よく使うBootStrapのクラスグリッドシステム以外でもBootStrapで便利なクラスはたくさんあります。ここでは、いくつか代表的なクラスを紹介していきます。テーブルtableに関するBootstrapのクラスBootStrapのテーブルスタイルを適用するには、table要素に対してclass=”table”という形式で指定します。table-xxxxxを追加してオプションをつけることができます。Bootstrap4のTableクラスの使い方はこちらBootstrap3とBootstrap4の使い方はほぼ同じですが、Bootstrap4では、背景色の設定など一部追加で利用できるクラスがあります。Bootstrap4のimgの使い方Bootstrap3→4になり、廃止・変更されたクラスがいくつかあります。Bootstrap4をご利用の方は下記記事をご覧ください。text-rightを対象要素のclassに指定します。black">class="text-center"</p>ボタンbuttonに関するBootstrapのクラスボタンクラスはa要素、button要素、input要素で利用できます。btn-xxxxx”という形式で指定します。3.3フォーム(form)に関するBootstrapのクラスよく使うBootstrapのフォームは下記クラスがあります。form-group:ラベルとフォーム部品をグルーピングする。外側のdivタグで利用します。form-control:フォーム部品に設定します。input、textarea、selectで利用します。btn-primary">登録する</button></form>知っておくと便利なその他のBootstrapのクラス文字の色に関するクラス文字の色に関するクラスとしては下記のようなクラスがあります。3.3背景色に関するクラス背景色に関するクラスとしては下記のようなクラスがあります。背景クラスの場合は、先ほどの文字の色と違って「bg-muted」というのはありません。大まかに分けると、primaryが青系、successが緑系、infoが水色系、wargningがだいだい〜オレンジ系、dangerが赤系なんですね!ここでは割愛しますが、ほかにもいくつかのクラスが用意されていますので、ご興味ある方は下記の公式サイトをご参照ください。3.3よく使うコンポーネント(component)ここでは、ナビゲーションバーやドロップダウンメニューなどよく使うコンポーネントを紹介していきます。javascriptと組み合わせて使うものもあり、各クラスがどういう挙動をしているかを完全に理解するのは大変なので、ある程度使い方を暗記で覚えてしまうと良いかと思います。ドロップダウンメニューdropdownBootstrapのでは下記のようなドロップダウンメニューを利用することができます。href="#">マンツーマンコース</a></li></ul></div>ドロップダウンメニューにはいくつかのオプションがあり、オプションにより少しずつ動きが変わってきますので、詳しくは下記の公式サイトをご参照ください。3.3ボタングループbuttongroup複数のボタンを1つの行でグループ化して、ボタングループとすることができます。btn-danger">SEOセミナー</button></div>ボタングループにはいくつかのオプションがあり、オプションにより少しずつ動きが変わってきますので、詳しくは下記の公式サイトをご参照ください。groupsインプットグループは、テキスト入力欄の左サイド、右サイド、もしくは両サイドに、テキストやボタンを1つ配置することができます。ユーザーIDやメールアドレスなどの法則性のあるデータ入力に適しています。placeholder="ウェブスト太郎"></div>■inputgroupの作り方input要素の左に配置する場合は、input要素の直前にinput-group-addonをclass指定したspan要素を配置します。そのspan要素内にテキストやボタンを配置します。入力欄(input要素)とspan要素を、class属性にinput-groupを指定したdiv要素で括ります。■input要素の右に配置する場合は、input要素の直後にspan要素を配置します。id="basic-addon2">@example.com</span></div>■input要素の両サイドに配置する場合は、input要素の直前と直後にspan要素を配置します。ナブメニュータブメニューtabsタブを利用したメニューの切り替えもできます。メニューの切り替えはjavascriptの記述も必要になります。<p>ウェブストエイトが「ホームページ作成セミナー」でSEO一位を獲得しました。2018年1月20日にワードプレスセミナーを開催します。詳細は下記のページをご覧ください。ウェブストエイトが〇〇新聞に掲載されました。詳細はこちらをご覧ください。id="home"><h2>SEO実績更新</h2><p>ウェブストエイトが「ホームページ作成セミナー」でSEO一位を獲得しました。id="profile"><h2>2018年1月のセミナー情報</h2><p>2018年1月20日にワードプレスセミナーを開催します。<br>詳細は下記のページをご覧ください。id="message"><h2>〇〇新聞に掲載されました</h2><p>ウェブストエイトが〇〇新聞に掲載されました。<br>詳細はこちらをご覧ください。{e.preventDefault()$(this).tab('show')})</script>■使い方の詳細は、下記の公式サイトをご参照ください。NavbarNavbarは、ウェブサイトやアプリケーションのナビゲーション・ヘッダーに最適なスタイルです。表示領域の幅が広いパソコンなどには、メニューを水平に表示します。href="#">お問い合わせ</a></li></ul></div></div></nav>表示領域の幅が狭いモバイルの大きさになると、ハンバーガーメニューに切り替えてくれるんですね。上記をナビゲーションバーの基本形として、他にもドロップダウンメニューを加えたり、検索窓を加えたり色々変化をつけることができます。Navbarにロゴを入れるNavbarにロゴを入れることもできます。href="#">お問い合わせ</a></li></ul></div></div></nav>button直後にclass名navbar-brandをつけたa要素とロゴ画像を挿入しています。style="height:100%;"></a>Navbarを上部に固定するナビゲーションを上部に固定したい場合、nav要素のclass名にnavbar-fixed-topを追加します。href="#">お問い合わせ</a></li></ul></div></div></nav>Navbarにドロップダウンメニューを入れるNavbarにドロップダウンメニューを作ることもできます。href="#">お問い合わせ</a></li></ul></div></div></nav>Nabvarの背景色を黒くするnav要素のnavbar-defaultをnavbar-inverseに変更すると背景が黒色になります。BreadcrumbsBootstrapでは、簡単にパンくずリストを作ることができます。class="active">BootStrap</li></ol>作り方は下記の通りです。ol要素にclass属性にbreadcrumbを指定してリストを作る現在開いているページを表すli要素にはclassにactiveを指定するパンくずリストを表示しておくことで、訪問者が現在見ているページの位置を確認することができます。パンくずリストを利用することで訪問者の滞在時間を長くして、離脱を防ぐことにも役立ちます。CSSで既存のスタイルを変更することで背景を消したり、区切りの文字を変更することもできます。class="active">BootStrap</li></ol></body></html>■使い方の詳細は、下記の公式サイトをご参照ください。Pagenationページネーションとは、一つのキーワードで複数のページが存在する場合などの場合に、ページ送りの機能を提供するナビゲーションです。aria-hidden="true">»</span></a></li></ul></nav>作り方は下記の通りです。nav要素内にclass属性にpaginationを指定したul要素を配置し、リスト形式でページを指定します。現在開いているページを表すリスト項目のli要素のclass属性には、activeを指定します。「前へ」は左サイドに、「次へ」は右サイドに配置するスタイルのページネーションを作ることもできます。href="#">次へ</a></li></ul></nav>■使い方の詳細は、下記の公式サイトをご参照ください。Panelsパネルは、内容を枠線で括りたい時に便利なコンポーネントです。<br>場所:大阪南堀江<br>コース:スタンダード48時間コース</div></div></div>色々なカラーで表示することも可能です。panel-default(※)」(※任意の色)を指定したdiv要素を用意する。1のdiv要素内に、panel-heading(ヘッダー)、panel-body(ボディー)をclass属性に指定したdivを配置する。表(table要素)やリスト・グループを配置することもできます。■使い方の詳細は、下記の公式サイトをご参照ください。Bootstrap知っておくと便利なコンポーネント(component)ここでは、使用頻度は高くないけれども、知っておくと便利なBootStrapコンポーネントをご紹介します。グラフィックアイコンBootstrapでは下記のようなグラフィックアイコンを利用することができます。aria-hidden="true"></span>お問い合わせはこちら</h2></div>基本的にspanタグのなかにアイコン用のクラスを入れます(spanクラスにはアイコン用のクラス以外は入れないようにしましょう。)下記の公式サイトより使いたいアイコンのクラスを選択して利用できます。labelsブログなどの記事の分類の時にカテゴリーで色分けするなど、よく利用されています。label-danger">Danger</span>■labelの大きさはフォントの大きさに依存します。label-defaultを指定したspan要素を作ります。フォント・サイズは、通常、継承したフォント・サイズの75%になります。■使い方の詳細は、下記の公式サイトをご参照ください。bars作業の過程や進捗状況を表すプログレスバーを作ることができます。お申し込み状況やなにかの進捗状況などを見せる際に適しています。60%;">60%</div></div>プログレスバーの作り方class属性にprogressを指定したdiv要素を用意する。1のdiv要素内に、class属性にprogress-barを指定したdiv要素を配置する。2のdiv要素内のstyle属性のwidthプロパティに進捗割合を指定する。■class属性にprogress-bar-stripedを追加することでプログレス・バーをストライプ柄(縞模様)にすることもできます。20%;">20%</div></div>■使い方の詳細は、下記の公式サイトをご参照ください。Badgesバッチはカウンター表示やラベリングを行うためのコンポーネントです。リンク、ボタン、ナビゲーションなどに追加する、新規や未読の項目数を、ハイライト表示するスタイルです。Button要素内などによく利用されます。class="badge">3</span></button>バッジの作り方class属性にbadgeを指定したspan要素で、項目数を括ります。1のspan要素を、a要素やbutton要素内に配置します。項目数が0の場合、span要素内を空にすれば、何も表示しない。■使い方の詳細は、下記の公式サイトをご参照ください。Wellswellsコンポーネントを利用すると、背景を灰色にして埋め込んだように見せることができます。ウェブストエイト</p></div></div>作り方class属性にwellを指定したdiv要素を用意します。■使い方の詳細は、下記の公式サイトをご参照ください。Jumbotronオプションでビューポート全体を拡張して、サイトの重要なコンテンツを紹介することができる、軽量で柔軟なコンポーネントです。Webサイトにおける主要コンテンツを紹介するのに適したワイドな表示スタイルです。サイト訪問者に対して具体的な行動を喚起する、重要コンテンツの表示に利用されています。role="button">もっと詳しく</a></p></div></div>■jumbotronの背景を横幅いっぱいにする場合は、containerをjumbotronの内側に記載します。role="button">もっと詳しく</a></p></div></div>(補足)先ほどのwellと違い、jambotronでは文字や見出しなどが通常よりも大きく表示されます(上がjumbotron、下がwell。内部余白も異なる)https://webst8.com/blog/wp-content/uploads/2017/09/jumbotron-well-deferences.mp4■使い方の詳細は、下記の公式サイトをご参照ください。Thumbnailsサムネイル(縮小表示)に最適なコンポーネントです。ウィンドウ幅やグリッド・システムに応じて、画像をレスポンシブに大きさが変化させることができます。src="https://webst8.com/blog/wp-content/uploads/2018/03/webst8-banar-seo.png"></a></div></div></div>thumbnailの作り方class属性にthumbnailを指定した要素で、img要素を括るだけで作成できます。■使い方の詳細は、下記の公式サイトをご参照ください。Alertsアラート・メッセージに最適なコンポーネントになります。Webサイトからサイト訪問者に対してフィードバックメッセージを送るために使われます。お問い合わせや予約などのフォームに利用することが多い傾向にあります。WEBST8の会員システム登録に成功しました。WEBST8から新着のお知らせが来ています。お客様の会員有効期間はあと一ヶ月になります。有効期限が切れました。現在会員システムをご利用できません。WEBST8の会員システム登録に成功しました。WEBST8から新着のお知らせが来ています。お客様の会員有効期間はあと一ヶ月になります。有効期限が切れました。現在会員システムをご利用できません。alert-dangerを指定するアラート内のリンクを埋め込む場合、アラート内のa要素のclass属性にalert-linkを指定すると、アラートとリンクの色を揃えることができます。WEBST8の会員システム登録に成功しました。WEBST8から新着のお知らせが来ています。お客様の会員有効期間はあと一ヶ月になります。有効期限が切れました。現在会員システムをご利用できません。WEBST8の会員システム登録に成功しました。WEBST8から新着のお知らせが来ています。お客様の会員有効期間はあと一ヶ月になります。有効期限が切れました。現在会員システムをご利用できません。embedは、レスポンシブな埋め込みを簡単に実装できるコンポーネントです。横幅に応じてビデオまたはスライドショーのサイズを決定します。embedの作り方class属性にembed-responsiveを指定したdiv要素を用意する。4:3のアスペクト比の場合、1のdiv要素のclass属性にembed-responsive-4by3を追加する(16:9のアスペクト比の場合、embed-responsive-16by9)。■使い方の詳細は、下記の公式サイトをご参照ください。BootstrapJavascriptを利用したBootStrapコンポーネントブートストラップのコンポーネントには、12種類以上のカスタムjQueryプラグインが搭載されています。前述のタブメニューの切り替えやモーダルウインドウ、カルーセルなど便利な使い方ができます。Modalモーダルウィンドウとは、先ほどの例の様に、親ウインドウの上に表示される子ウィンドウのことです。モーダルウィンドウ内で表示された操作を完了するかキャンセルをしなければ、ウィンドウが閉じられないのがモーダルウィンドウの特徴です。ScrollspyScrollSpyプラグインは、スクロール位置に基づいてナビゲーションのアクティブなメニューを自動的に更新するためのjavascriptです。ドロップダウンサブアイテムも同様にハイライトされます。Tabタブメニューとコンテンツを連動することで、ページを変遷することなく表示コンテンツを切り替えるJavaScriptです。例のように、コンテンツをタブで分けて見せる場合に利用できます。Tooltipツールチップとは、対象の要素にカーソルを合わせたときに小さな領域を表示するJavascriptです。カーソルを対象の要素から外すと表示が消えます。Popoverポップオーバーとは、対象の要素をクリックしたときに小さな領域を表示するJavascriptです。対象の要素をもう一度クリックすると表示が消えます。Alertアラートメッセージは、任意のメッセージに閉じる機能を追加するJavaScriptです。警告画面を表示しておいて、確認ボタンを押したら消える、といった使い方ができます。buttonBootStrapが用意しているボタン用のJavascriptでは、クリックするとボタンの状態を変化させることができます。本例では、クリックすると「処理中・・」とテキストが変化して、処理中の間はボタンを押せなくなります。Carouselカルーセルとは、回転木馬という意味の英単語で、複数の横に並んだ写真などの項目をマウスやタッチ操作で左右にスライドして項目を入れ替えることができます。スライドショーやスライダーとも呼ばれます。Collapseコラップス(collapse)は、コンテンツを開閉できるJavaScriptです。スマートフォンのハンバーガーメニューや、よくある質問などで利用することができます。Javascriptまとめ今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)の使い方やよく使うクラスについて下記の内容で解説しました。ここでは紹介していませんが、各コンポーネントのオプションの使い方など、他にもたくさんの便利な使い方があります。詳細は下記の公式サイトに記載されているので、一通り慣れてきたらぜひ他の使い方も色々調べてみてください。CSSドキュメント今回は、以上になります。最後までご覧いただきありがとうございました。合わせて読みたいBootstrap4.3の使い方についてはこちらをご参照ください。