カテゴリー
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

スマートフォン最適化

CSSスプライト
高解像度画面向け対応
ホーム画面ショートカットアイコン
スタンドアローンモード
a要素での電話発信
async属性/defer属性

参考:

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

カテゴリー
HTML/CSS

レスポンシブWebデザインと関連技術

レスポンシブWebデザインとは
レスポンシブWebデザインのメリットとデメリット
レスポンシブWebデザインに必要な技術
メディアクエリ(Media Queries)
Fluid Grid(可変グリッド)
Fluid Image(可変イメージ)
ビューポート
リセットCSS

参考:

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

カテゴリー
HTML/CSS

その他のCSS

CSS リファレンス

直線状のグラデーション
放射状のグラデーション
リスト関連のプロパティ
テーブル関連のプロパティ
内容を追加するプロパティ

参考:

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

カテゴリー
HTML/CSS

アニメーション

CSS リファレンス

animation

回転・拡大縮小・移動など
transformプロパティ
transform-originプロパティ
CSS3のトランジションとは
transition-propertyプロパティ
transition-durationプロパティ
transition-timing-functionプロパティ
transition-delayプロパティ
transitionプロパティ
CSS3のアニメーションとは
@keyframes
animation-nameプロパティ
animation-durationプロパティ
animation-timing-functionプロパティ
animation-delayプロパティ
animation-iteration-countプロパティ
animation-directionプロパティ
animation-play-stateプロパティ
animation-fill-modeプロパティ
animationプロパティ

参考:

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

カテゴリー
HTML/CSS

マルチカラムとフレキシブルボックス

CSS リファレンス

マルチカラムレイアウト
column-countプロパティ
column-widthプロパティ
columnsプロパティ
column-gapプロパティ
column-ruleプロパティ
column-spanプロパティ
フレキシブルボックスレイアウト

参考:

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

カテゴリー
HTML/CSS

ボックス

CSS リファレンス

margin関連プロパティ
padding関連プロパティ
border関連プロパティ
幅と高さを設定するプロパティ
border-radiusプロパティ
box-shadowプロパティ
floatプロパティ
clearプロパティ
displayプロパティ
visibilityプロパティ
overflowプロパティ
clipプロパティ

参考:

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

カテゴリー
HTML/CSS

フォント

CSS リファレンス

Webフォント
font-familyプロパティ
font-sizeプロパティ
font-weightプロパティ
font-styleプロパティ
font-variantプロパティ
fontプロパティ

参考:

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

カテゴリー
HTML/CSS

テキスト

CSS リファレンス

text-shadowプロパティ
text-decoration関連のプロパティ
word-breakプロパティ
hyphensプロパティ
white-spaceプロパティ
text-alignプロパティ
vertical-alignプロパティ
line-heightプロパティ
text-indentプロパティ
letter-spacingプロパティ
word-spacingプロパティ
text-transformプロパティ
directionプロパティ
unicode-bidiプロパティ

参考:

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

カテゴリー
HTML/CSS

背景

CSS リファレンス

background

backgraound-colorプロパティ
backgraound-imageプロパティ
backgraound-clipプロパティ
backgraound-repeatプロパティ
backgraound-sizeプロパティ
backgraound-originプロパティ
backgraound-positionプロパティ
backgraound-attachmentプロパティ
backgraoundプロパティ

参考:

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