プログラミング

Bootstrap 5で簡単なページ作成

最終更新： 17/03/2025
1分未満

Bootstrap 5は、Web開発を迅速に進めるために広く使用されているフレームワークで、レスポンシブデザインを簡単に実現できます。この記事では、Bootstrap 5を使って完全なページレイアウトを作成する方法について解説します。

Bootstrap 5とは

Bootstrapは、HTML、CSS、およびJavaScriptで作成されたオープンソースのフロントエンドフレームワークです。レスポンシブデザインを簡単に作成できるため、モバイルデバイスからデスクトップまで幅広いデバイスでの表示に対応したウェブサイトを作成することができます。Bootstrap 5はその最新バージョンで、いくつかの新しい機能や改善点が加わり、さらに強力なツールとなっています。

関連記事

Bootstrap 5の基本的な構造

Bootstrap 5では、主に「コンテナ」「グリッドシステム」「コンポーネント」などを使用して、ページレイアウトを作成します。まずはこれらの基本的な構造を理解しましょう。

1. コンテナ（Container）

コンテナは、ページ内のすべてのコンテンツをラップするための要素です。Bootstrap 5では、containerクラスとcontainer-fluidクラスがあります。

  • container: 幅が最大で1140pxに制限され、デバイスの幅に合わせてレスポンシブに変化します。
  • container-fluid: 幅が常に100%で、画面全体を占めます。
html
<div class="container">
  
div>

2. グリッドシステム（Grid System）

Bootstrap 5のグリッドシステムは、12列のレイアウトを使用します。このシステムを使うことで、簡単にページをセクションごとに分割できます。カラムの幅は、クラスを使って指定します。

例えば、2つのカラムを作成したい場合、次のように記述します：

html
<div class="row">
  <div class="col-md-6">
    
  div>
  <div class="col-md-6">
    
  div>
div>

ここで、col-md-6は、画面幅が中サイズ（md）以上の場合に、各カラムが6列（12列のうちの半分）を占めることを意味します。

3. コンポーネント（Components）

Bootstrap 5には、さまざまなコンポーネントが組み込まれています。これらを利用することで、ボタン、ナビゲーションバー、カードなど、一般的なUI要素を簡単に追加できます。

例えば、ナビゲーションバーを追加する場合は、次のように記述します：

html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ブランド名a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションバーを切り替え">
    <span class="navbar-toggler-icon">span>
  button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">ホームa>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#">特徴a>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#">料金a>
      li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効リンクa>
      li>
    ul>
  div>
nav>

完全なページレイアウトの作成

ここでは、Bootstrap 5を使ってシンプルでレスポンシブなページレイアウトを作成する方法を実際にコードで示します。

HTML構造

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 完全なページレイアウトtitle>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
head>
<body>

  
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">サイト名a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションバーを切り替え">
        <span class="navbar-toggler-icon">span>
      button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">ホームa>
          li>
          <li class="nav-item">
            <a class="nav-link" href="#">特徴a>
          li>
          <li class="nav-item">
            <a class="nav-link" href="#">料金a>
          li>
        ul>
      div>
    div>
  nav>

  
  <div class="container mt-4">
    <div class="row">
      <div class="col-md-8">
        <h1>ページの見出しh1>
        <p>ここにメインコンテンツを追加します。p>
      div>
      <div class="col-md-4">
        <h2>サイドバーh2>
        <p>サイドバーコンテンツがここに入ります。p>
      div>
    div>
  div>

  
  <footer class="bg-light text-center p-3 mt-4">
    <p>© 2025 サイト名p>
  footer>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">script>
body>
html>

説明

  1. ナビゲーションバー: 上部に表示されるナビゲーションバーで、レスポンシブ対応しています。小さな画面ではハンバーガーメニューが表示されます。
  2. メインコンテンツ: 2つのカラムを使用しています。大きな画面では、メインのコンテンツが8列、サイドバーが4列を占めます。
  3. フッター: ページ下部には簡単なフッターがあり、コピーライト情報が表示されます。

まとめ

Bootstrap 5を使用することで、レスポンシブなWebページを迅速に構築することができます。コンテナ、グリッドシステム、コンポーネントを活用して、直感的で整理されたページレイアウトを作成でき、モバイルやデスクトップ環境での表示にも対応できます。初心者でも簡単に使えるため、迅速なWeb開発を実現するために最適なツールと言えるでしょう。

最終更新： 17/03/2025
1分未満
Back to top button