余白とかもいい感じにして、左に寄り過ぎてる

2024年6月8日

余白や左寄せの調整を行うには、BootstrapのクラスやカスタムCSSを使用してスタイルを調整することができます。以下は、余白と左寄せを調整する例です。

html
{% extends 'tools/base.html' %}
{% load django_bootstrap5 %}

{% block content %}
  <!-- tools/upload.html -->
  <div class="container mt-4">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <h2 class="h2 mb-4">サーバーへファイルをバックアップ</h2>
        <form action="" method="post" enctype="multipart/form-data">
          {% csrf_token %}
          <div class="mb-3">
            <label for="files" class="form-label">ファイルを選択してください</label>
            <input type="file" class="form-control" id="files" name="files" multiple>
          </div>
          <button type="submit" class="btn btn-primary">Upload</button>
        </form>
      </div>
    </div>
  </div>
{% endblock %}

この例では、container クラスで全体のコンテンツを中央に寄せ、mt-4 クラスで上側の余白を追加しています。また、row justify-content-center クラスで行を中央寄せし、col-md-6 クラスで中央寄せされた行のコンテンツを横幅半分にしています。これにより、フォームが左寄せされすぎず、適切な余白が生まれます。

このコードを基に、デザインに合わせて必要な微調整を行ってください。必要に応じて、Bootstrapのグリッドシステムや他のクラスを使用して、デザインの要件に合わせたスタイリングを追加できます。