カテゴリー
HTML/CSS

Bootstrapのブレークポイント

確認環境:

Bootstrap v4.6

Bootstrapとは

レスポンシブ対応のCSSのフレームワーク

モバイルファーストをコンセプトとしている

レスポンシブWebデザインとは

PCとかスマホとか画面サイズの違うデバイスでアクセスされたときでも対応できるようデザインしたサイト

Bootstrapのブレークポイント

ブレークポイントクラス識別子サイズ
X-Smallなし<576px
小さいsm≧576px
md≧768px
lg≧992px
特大xl≧1200px
特大特大xxl≧1400px

Bootstrapで2カラムサイトを作る

まず、以下の公式ページの通り、Bootstrapを使えるようにします。

Bootstrap イントロダクション

その後、以下のようにHTMLを記載します。

<div class="container">
    <div class="row">
        <section class="side col-md-4">
            <h2>サイドコンテンツ</h2> 
            <p>サイドコンテンツの内容</p>
            <h2>サイドリスト</h2>
            <ul>
                <li>メニュー</li>
                <li>メニュー</li>
                <li>メニュー</li>
                <li>メニュー</li>
            </ul>
        </section>
        <section class="main col-md-8">
            <h1>メインコンテンツ</h1>
            <div class="archive">
                <div>
                    <img src="no-image.gif" alt="no-img">
                    <p>見出しや文章</p>
                </div>
                <div>
                    <img src="no-image.gif" alt="no-img">
                    <p>見出しや文章</p>
                </div>
                <div>
                    <img src="no-image.gif" alt="no-img">
                    <p>見出しや文章</p>
                </div>
                <div>
                    <img src="no-image.gif" alt="no-img">
                    <p>見出しや文章</p>
                </div>
            </div>
        </section>
    </div>
</div>

こんな感じに2カラムで表示されます。

この例では、「col-md-8」でブレークポイントを設定しているので、

画面の幅が768pxより小さい場合以下のようにブレークされて表示されます。

まとめ

Bootstrapを使えば、2カラムサイトが簡単に作れます。

Bootstrapを使わないと、cssのdisplayとか、potisionプロパティとかいろいろ設定をしないといけないので手間がかかります。

参考サイト

Bootstrap Document(公式サイト)

Bootstrap Breakpoint

Bootstrap イントロダクション

カテゴリー
HTML/CSS

自動入力詳細トークン

参考:

HTML5 プロフェッショナル認定試験 レベル1 対策テキスト&問題集 v2.0対応版

カテゴリー
HTML/CSS

input要素のtype属性の値による指定可能な属性一覧

参考:

HTML5 プロフェッショナル認定試験 レベル1 対策テキスト&問題集 v2.0対応版

カテゴリー
HTML/CSS

HTML5.1の全属性一覧

参考:

HTML5 プロフェッショナル認定試験 レベル1 対策テキスト&問題集 v2.0対応版

カテゴリー
HTML/CSS

HTML5.1の要素の配置ルール

参考:

HTML5 プロフェッショナル認定試験 レベル1 対策テキスト&問題集 v2.0対応版

カテゴリー
HTML/CSS

Web関連技術の概要

文書の構造
データの操作
通信
Webサイトへの不正な攻撃手法
ネットワーク上の脅威対策
Webサイトやアプリケーションの制作
画像について
Webサイトの集客・収益

参考:

HTML5 プロフェッショナル認定試験 レベル1 対策テキスト&問題集 v2.0対応版

カテゴリー
HTML/CSS

HTTP・HTTPSプロトコル

HTTPプロトコル
HTTPSプロトコル
HTTPのメッセージ機構
HTTPのリクエストメッセージ
HTTPのレスポンスメッセージ
HTTPのヘッダフィールド
HTTPでの認証
HTTP cookie(クッキー)

参考:

HTML5 プロフェッショナル認定試験 レベル1 対策テキスト&問題集 v2.0対応版

カテゴリー
HTML/CSS

通信系API

XMLHttpRequest
WebSocket API
Server-Sent Events
WebRTC

参考:

HTML5 プロフェッショナル認定試験 レベル1 対策テキスト&問題集 v2.0対応版

カテゴリー
HTML/CSS

オフラインストレージAPI

Web Storage
Indexed Database API
Application cache
Web Workers
Service Workers
Push API
fetch

参考:

HTML5 プロフェッショナル認定試験 レベル1 対策テキスト&問題集 v2.0対応版

カテゴリー
HTML/CSS

デバイスアクセスAPI

Geolocation API
DeviceOrientation Event
Touch Events
Pointer Events
DOM3 Events(UI Events)

参考:

HTML5 プロフェッショナル認定試験 レベル1 対策テキスト&問題集 v2.0対応版