All About オールアバウト
デジタル
  • パソコン・周辺機器
  • カメラ・AV機器
  • 携帯電話・スマートフォン
  • IT・インターネット
  1. All About
  2. デジタル
  3. IT・インターネット
  4. ホームページ作成
  5. ホームページ作成テクニック、小技
  6. Bootstrap4のグリッドでスマホ対応の段組を簡単に作成
この写真の記事へ

Bootstrap4のグリッドでスマホ対応の段組を簡単に作成(画像)(8ページ目)

更新日:2018年03月13日
西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

Bootstrap4での段組作成サンプルページ1

Bootstrap4での段組作成サンプルページ1

この写真の記事へ
1段目「col-md-7」→2段目「col-md-3」→3段目「col-md-2」で3段組
col-xs-12→col-xs-12→col-xs-12
最新バージョンのCSSファイルをCDNサーバから読み込む記述を、そのままコピー&ペーストする
12分割されたグリッドを4個ずつ(=3分の1ずつ)使えば、均等幅な3段組になる
Bootstrap3での段組作成サンプルページ1
12分割されたグリッドを4個ずつ(=3分の1ずつ)使えば、均等幅な3段組になる
閲覧者の端末(画面サイズ)別に使用グリッド数を指定する形でレスポンシブにできる
Bootstrap4での段組作成サンプルページ1
Bootstrap4で外側を囲むコンテナのclass名2種類の違い
段組を構成する段の中に、さらに小さな段組を含めることも可能
Bootstrapでの段組レイアウト作成サンプルページ2

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる

人気記事ランキング

  • 1
    【HTML+CSS】ウインドウ幅に合わせて画像サイズを変化させる方法
    【HTML+CSS】ウインドウ幅に合わせて画像サイズを変化させる方法
    2021/12/22
  • 2
    短縮URLの作り方おすすめ3選!Googleの"goo.gl"は終了
    短縮URLの作り方おすすめ3選!Googleの"goo.gl"は終了
    2022/09/01
  • 3
    タブ機能の作り方!ページ移動せずに内容を切り替える
    タブ機能の作り方!ページ移動せずに内容を切り替える
    2022/12/26
  • 4
    移転先へ自動移動(転送/リダイレクト)させる方法
    移転先へ自動移動(転送/リダイレクト)させる方法
    2018/09/04
  • 5
    CSSのletter-spacingでHTMLの文字間隔を調整する方法
    CSSのletter-spacingでHTMLの文字間隔を調整する方法
    2018/12/17
ランキングをもっと見る

ホームページ作成

  • ホームページ作成の基本
  • ホームページ作成ソフトの選び方
  • HTML5とは
  • CSS3とは
  • HTML・スタイルシート(CSS)の基礎
他のテーマも見る

カテゴリー一覧

  • 住宅・不動産
  • マネー
  • 健康・医療
  • ビューティ
  • デジタル
  • 暮らし
  • 恋愛・結婚
  • ビジネス・学習
  • メンズスタイル
  • 旅行
  • 趣味
  • ファッション
  • グルメ
  • 車・バイク

ガイド関連

  • 専門家サーチ(ガイドを探す)
  • All Aboutガイド募集
  • ガイドへの仕事・取材依頼
  • 国民の決断

All Aboutサービス・メディア

  • All About ニュース
  • Best One
  • All About Japan
All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
  • 会社概要
  • 採用情報
  • 投資家情報
  • 広告掲載
  • 利用規約
  • プライバシーポリシー
  • All Aboutについて
  • 著作権・商標・免責
  • 当サイトの情報についての注意
  • サイトマップ
  • ヘルプ
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます