bootstrap copyright footer

Bootstrap Copyright Footer: Bootstrapサイトのフッターに著作権情報を追加する方法

このガイドでは、Bootstrapフレームワークを使用して、シンプルかつプロフェッショナルなWebサイトのフッターを作成し、著作権表示を追加する方法を学びます。

1. Bootstrap Footer の基礎

Bootstrap とは

Bootstrapは、HTML、CSS、JavaScriptを使用してレスポンシブなWebサイトを構築するための、無料でオープンソースのフロントエンドフレームワークです。開発時間を短縮し、一貫性のあるデザインを作成するのに役立つ、事前に構築されたコンポーネントとユーティリティクラスを提供します。

Footer の役割と重要性

フッターはWebページの一番下に表示されるセクションで、通常は著作権情報、連絡先、サイトマップなどの情報が含まれています。フッターは、ユーザーにサイトに関する重要な情報を提供し、サイトの信頼性を高めるために重要です。

簡単な Bootstrap Footer のコード例


<footer class="footer mt-auto py-3 bg-light">
  <div class="container">
    <span class="text-muted">&copy; 2023 あなたの会社名</span>
  </div>
</footer>

2. Copyright Footer のカスタマイズ

Bootstrap クラスを使用した外観の調整

Bootstrapは、フッターの外観をカスタマイズするためのさまざまなクラスを提供しています。

クラス	説明
`bg-light`, `bg-dark`, `bg-primary`など	背景色を変更します。
`text-white`, `text-dark`, `text-primary`など	テキストの色を変更します。
`text-center`, `text-right`	テキストの配置を変更します。
`py-3`, `py-5`など	上下の余白を変更します。

会社名、著作権年、著作権記号の追加

フッターに会社名、著作権年、著作権記号を追加するには、上記のコード例を次のように変更します。


<footer class="footer mt-auto py-3 bg-light">
  <div class="container text-center">
    <span class="text-muted">&copy; 2023 あなたの会社名. All rights reserved.</span>
  </div>
</footer>

他のページへのリンクの追加

フッターに「会社概要」や「プライバシーポリシー」などのページへのリンクを追加するには、次のようにします。


<footer class="footer mt-auto py-3 bg-light">
  <div class="container text-center">
    <span class="text-muted">&copy; 2023 あなたの会社名. All rights reserved. | <a href="/about">会社概要</a> | <a href="/privacy">プライバシーポリシー</a></span>
  </div>
</footer>

3. レスポンシブな Copyright Footer

レスポンシブデザインの概念

レスポンシブデザインとは、Webサイトがさまざまな画面サイズのデバイス（デスクトップ、タブレット、スマートフォンなど）で最適に表示されるように設計することです。

さまざまな画面サイズでの Footer の表示を確保する

Bootstrapは、デフォルトでレスポンシブなグリッドシステムを提供しているため、フッターはさまざまな画面サイズで自動的に調整されます。

Bootstrap グリッドシステムを使用した複数列の Footer レイアウト

フッターを複数列に分割するには、Bootstrapのグリッドシステムを使用します。


<footer class="footer mt-auto py-3 bg-light">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h5>会社概要</h5>
        <p>会社概要のテキスト</p>
      </div>
      <div class="col-md-4">
        <h5>リンク</h5>
        <ul class="list-unstyled">
          <li><a href="/about">会社概要</a></li>
          <li><a href="/privacy">プライバシーポリシー</a></li>
        </ul>
      </div>
      <div class="col-md-4">
        <h5>お問い合わせ</h5>
        <p>お問い合わせ情報</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 text-center">
        <span class="text-muted">&copy; 2023 あなたの会社名. All rights reserved.</span>
      </div>
    </div>
  </div>
</footer>

4. 高度な Copyright Footer デザイン

より複雑な Footer デザイン

フッターにソーシャルメディアアイコン、購読フォーム、背景画像などを追加して、より複雑なデザインを作成できます。

複雑なフッターデザインのコード例

以下は、Bootstrapを使用して作成した複雑なフッターのHTMLコード例です。この例では、複数のカラムに分かれたリンク、連絡先情報、ソーシャルメディアアイコンを含むフッターを示しています。

<footer class="bg-dark text-white pt-4">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h5>会社情報</h5>
                <p>私たちはお客様に最高のサービスを提供することに尽力しています。</p>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-white">会社概要</a></li>
                    <li><a href="#" class="text-white">お問い合わせ</a></li>
                    <li><a href="#" class="text-white">プライバシーポリシー</a></li>
                </ul>
            </div>
            <div class="col-md-4">
                <h5>サービス</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-white">製品</a></li>
                    <li><a href="#" class="text-white">サポート</a></li>
                    <li><a href="#" class="text-white">ブログ</a></li>
                </ul>
            </div>
            <div class="col-md-4">
                <h5>フォローする</h5>
                <ul class="list-unstyled d-flex">
                    <li class="me-3"><a href="#" class="text-white"><i class="fab fa-facebook-f"></i></a></li>
                    <li class="me-3"><a href="#" class="text-white"><i class="fab fa-twitter"></i></a></li>
                    <li><a href="#" class="text-white"><i class="fab fa-instagram"></i></a></li>
                </ul>
            </div>
        </div>
        <div class="text-center pt-4">
            <p>&copy; 2024 会社名. 全著作権所有.</p>
        </div>
    </div>
</footer>

コードの説明

bg-dark: フッターの背景色を暗くします。
text-white: テキストを白色にします。
container: Bootstrapのコンテナクラスで、レスポンシブデザインを実現します。
row: カラムの行を作成します。
col-md-4: 中程度のデバイス（md）で4分の1の幅を持つカラムを作成します。

ベストプラクティス

レスポンシブデザイン: Bootstrapのグリッドシステムを活用して、異なるデバイスサイズに対応するフッターを設計します。
アクセシビリティ: フッター内のリンクには適切なARIAラベルを追加し、視覚障害者にも配慮します。
一貫したスタイル: フッターのデザインはサイト全体のスタイルと一貫性を持たせるようにします。色、フォント、アイコンのスタイルを統一します。
簡潔な情報: フッターは重要な情報を簡潔に提供します。リンクは適切に分類し、ユーザーが必要な情報をすぐに見つけられるようにします。
ソーシャルメディアの統合: フッターにソーシャルメディアのアイコンを追加することで、ユーザーが他のプラットフォームでのフォローを促進します。

このようなコード例とベストプラクティスを参考にして、魅力的で使いやすいフッターをデザインしてください。Bootstrapの詳細なドキュメントはBootstrapの公式サイトで確認できます。

5. Bootstrap Copyright Footer の例

さまざまなスタイルと機能の Copyright Footer の例

インスピレーションを得るために、さまざまなスタイルと機能の Copyright Footer の例を以下に示します。

1. シンプルでクリーンなスタイル

<footer class="bg-light text-center py-3">
    <div class="container">
        <p class="mb-0">&copy; 2024 会社名. All Rights Reserved.</p>
    </div>
</footer>

特徴

背景色: ライトグレーの背景がクリーンな印象を与えます。
中央揃え: テキストが中央に配置され、シンプルなデザインです。

2. 多カラムレイアウトのフッター

<footer class="bg-dark text-white pt-4">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h5>会社情報</h5>
                <p>私たちのミッションはお客様の期待を超えることです。</p>
            </div>
            <div class="col-md-4">
                <h5>リンク</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-white">プライバシーポリシー</a></li>
                    <li><a href="#" class="text-white">利用規約</a></li>
                </ul>
            </div>
            <div class="col-md-4">
                <h5>フォローする</h5>
                <ul class="list-inline">
                    <li class="list-inline-item"><a href="#" class="text-white">Facebook</a></li>
                    <li class="list-inline-item"><a href="#" class="text-white">Twitter</a></li>
                </ul>
            </div>
        </div>
        <div class="text-center pt-3">
            <p>&copy; 2024 会社名. 全著作権所有.</p>
        </div>
    </div>
</footer>

特徴

多カラム: 情報を3つのカラムに分けて整理しています。
リンクのリスト: リンクが明確に分類されており、ユーザーが探している情報に簡単にアクセスできます。

3. ソーシャルメディア統合のフッター

<footer class="bg-dark text-white py-4">
    <div class="container text-center">
        <h5>フォローしてね</h5>
        <ul class="list-inline">
            <li class="list-inline-item"><a href="#" class="text-white"><i class="fab fa-facebook-f"></i></a></li>
            <li class="list-inline-item"><a href="#" class="text-white"><i class="fab fa-twitter"></i></a></li>
            <li class="list-inline-item"><a href="#" class="text-white"><i class="fab fa-instagram"></i></a></li>
        </ul>
        <p class="mt-3">&copy; 2024 会社名. All Rights Reserved.</p>
    </div>
</footer>

特徴

ソーシャルメディアアイコン: ソーシャルメディアのリンクをアイコンで表示し、視覚的に魅力的です。
テキストの配置: すべてのテキストが中央に配置されています。

4. 動的な著作権表示

<footer class="bg-light text-center py-4">
    <div class="container">
        <p id="copyright"></p>
    </div>
    <script>
        const year = new Date().getFullYear();
        document.getElementById("copyright").innerHTML = `&copy; ${year} 会社名. All Rights Reserved.`;
    </script>
</footer>

特徴

動的な年表示: JavaScriptを使用して、現在の年を自動的に表示します。
シンプルなデザイン: シンプルでありながら、動的な要素が加わっています。

5. グラデーション背景のフッター

<footer class="text-white py-5" style="background: linear-gradient(to right, #6a11cb, #2575fc);">
    <div class="container text-center">
        <h5>お問い合わせ</h5>
        <p>Email: [email protected]</p>
        <p>&copy; 2024 会社名. All Rights Reserved.</p>
    </div>
</footer>

特徴

グラデーション背景: 背景にグラデーションを使用して、視覚的なインパクトを与えています。
コンタクト情報: お問い合わせ情報が明示されており、ユーザーが簡単に連絡できるようになっています。