Bootstrapを使用した画面設計 〜Bootstrapの基本(グリッドシステム・ブレークポイント)〜
•
0 likes•13 views
2023/06/23の勉強会で発表されたものです。
More Related Content
Similar to Bootstrapを使用した画面設計 〜Bootstrapの基本(グリッドシステム・ブレークポイント)〜
Similar to Bootstrapを使用した画面設計 〜Bootstrapの基本(グリッドシステム・ブレークポイント)〜 (20)
More from iPride Co., Ltd.
More from iPride Co., Ltd. (20)
Recently uploaded
Recently uploaded (10)
Bootstrapを使用した画面設計 〜Bootstrapの基本(グリッドシステム・ブレークポイント)〜
- 2. 目次 • まえがき • Bootstrapとは • Bootstrapでできる画面設計 • まとめ
- 4. Bootstrapとは • WebサイトやWebアプリケーションにおいて、画面設計で使用されるCSS/ JavaScriptなどがテンプレートとして用意されているツール。 • 自分で制作したHTMLにBootstrapのリンクを記述するか、Bootstrapファイ ルをダウンロードして使用することができる。 → CDN : 自分で制作したHTMLにBootstrapのリンクを記述する方法。リンクを記述するだけなので手軽。 → ダウンロード : CDNで読み込むファイルと同じもの。 ダウンロードしてくる手間があるくらいで、導入作業自体はCDNと同様、簡単にできる。
- 5. Bootstrapとは • 今回はCDNでCSSのテンプレートを導入する。 →自分が作成したHTMLの<head>内に、以下のリンクを記述するだけ。 ”Bootstrap”で検索し、公式HPからリンクのコピー可能 <!DOCTYPE HTML> <html> <head> <title>home page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Bootstrap CSS --> <link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel="stylesheet" integrity="sha384-EVSTQN3/ azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body>
- 6. Bootstrapとは • 導入したら、HTMLの各タグにクラスを加える。 → 例）<button>タグ <button type=“submit" class="btn btn-primary">変更を保存</button> 「変更を保存」ボタン → 例）<input>タグ <input type="text" th: fi eld="*{name}" class="form-control" placeholder="イベント名を入力してください。"/> 入力欄 事前に指定した幅一杯に入力欄を広げる
- 7. Bootstrapとは • Bootstrapには多様な機能がある。 • 今回の発表では、Bootstrapの基本として以下のもの説明する。 ・ グリッドシステム ・ ブレークポイント
- 8. Bootstrapでできる画面設計 グリッドシステム • グリッドシステム → デバイスの画面を縦12分割し、コンテンツの配置を管理する仕組みのこと。 どんなデバイスにおいても12分割。（PC, スマホ, タブレット etc） 例）PC 例）タブレット
- 9. Bootstrapでできる画面設計 グリッドシステム グリッドシステムにおいて重要なクラス ・container（コンテナ） ：要素を中央に配置し、 コンテンツの横幅を調整する。 ・row ：横並びにしたいコンテンツをrowクラスで囲む。 ・col（カラム） ：コンテンツの幅を12分割分のいくつで決める。 例）左の図 12分の6 → col-md-6 例）PC コンテンツ コンテンツ container row → “md”に関して 後のページで説明
- 10. Bootstrapでできる画面設計 グリッドシステム <div class="container"> <div class="row"> <div class="col-md-6">コンテンツ</div> <div class="col-md-6">コンテンツ</div> </div> </div> コンテンツ コンテンツ → 左の図をHTMLで書くと <div class="container"> <div class="row"> <div class="col-md-4">コンテンツ</div> <div class="col-md-4">コンテンツ</div> <div class="col-md-4">コンテンツ</div> </div> <div class="row"> <div class=“col-md-9">コンテンツ</div> </div> </div> → 左の図をHTMLで書くと コンテンツ コンテンツ コンテンツ コンテンツ
- 11. Bootstrapでできる画面設計 ブレークポイント • ブレークポイント → 画面の横幅に応じて、レイアウトを切り替えるポイント。 → いわゆるレスポンシブデザインのこと。 画像出典：SKILLHUB 図解たっぷりbootstrap5入門より 「2. Bootstrap5のグリッドを理解する」 https://skillhub.jp/courses/230/lessons/1638（閲覧 2023.6.22） $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px );
- 12. Bootstrapでできる画面設計 ブレークポイント コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ <div class="container"> <div class="row"> <div class="col-md-3">コンテンツ</div> <div class="col-md-3">コンテンツ</div> <div class="col-md-3">コンテンツ</div> <div class=“col-md-3">コンテンツ</div> </div> </div> → 左の図をHTMLで書くと 0px 768px 1400px ~ col-md-3 ・md : ブレークポイントは768px ブレークポイント ・768pxより大きい画面幅の場合、 コンテンツを12分の3の割合で横並びに表示
- 13. Bootstrapでできる画面設計 ブレークポイント ・992pxより大きい画面幅の場合、 コンテンツを12分の3の割合で横並びに表示 ＊ ブレークポイントを複数指定することもできる。 コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ 0px 768px 1400px ~ コンテンツ コンテンツ コンテンツ コンテンツ 992px ・768pxより大きい画面幅の場合、 コンテンツを12分の6の割合で 2列2行の横並びに表示
- 14. Bootstrapでできる画面設計 ブレークポイント <div class="container"> <div class="row"> <div class="col-md-6 col-lg-3">コンテンツ</div> <div class="col-md-6 col-lg-3">コンテンツ</div> <div class="col-md-6 col-lg-3">コンテンツ</div> <div class=“col-md-6 col-lg-3“>コンテンツ</div> </div> </div> ＊ ブレークポイントを複数指定することもできる。 → 前のページの図をHTMLで書くと ・992pxより大きい画面幅の場合、 コンテンツを12分の3の割合で 横並びに表示 → col-lg-3 ・768pxより大きい画面幅の場合、 コンテンツを12分の6の割合で 2列2行の横並びに表示 → col-md-6
- 16. 参考にしたWebサイト ・Bootstrap JP https://getbootstrap.jp/docs/5.0/getting-started/introduction/（閲覧 2023.6.22） ・SKILLHUB 図解たっぷりbootstrap5入門より 「2. Bootstrap5のグリッドを理解する」 https://skillhub.jp/courses/230/lessons/1638（閲覧 2023.6.22）