cssとbootstrapで画面の大きさを変更したときにデザインを変えたい

Question

実現したいこと

画面を小さくしたときに左右にスペースをなくしたい。また画面をだんだん大きくしていってもスタイルを綺麗に整えながら、全画面サイズの時には左右のスペースを空けたい。

発生している問題・分からないこと

cakephpでフォーム画面を作成中、画面が小さいときにもmx-autoが適用されてしまう

エラーメッセージ

エラーメッセージはありません

該当のソースコード

@charset "utf-8";

/* h1 {
    margin: 0;
    padding: 20px 0;
    color: #00539f;
    text-shadow: 3px 3px 1px black;
  } */

.hissu{
    background-color: rgba(235, 4, 4, 0.813);
    color: white;
    font-size: 0.6em;
    padding: 0.2em 0.4em;
    line-height: 1;
    margin-right: 0.5em;
}

.col-color{
  background-color: rgb(244, 245, 245);
}



@media (min-width: 768.98px) {
  .col-color{
      background-color: transparent;
  }

  .border-top{
    border-top: 2px solid #000;
    padding-top: 10px;
  }

  .container.mx-auto {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .row.col-md-8.mx-auto {
      margin-right: 0 !important;
      margin-left: 0 !important;
      width: 100% !important;
  }

}

<?php  $this->start('css') ?>
<?=  $this->Html->css('login') ?>
<?php  $this->end(); ?>
<div class="container ">
    <div class="row col-md-8 mx-auto">
            <div>
                <h1>名簿メンバー登録</h1>
            </div>
                <p>必要な項目を入力し、「登録確認」ボタンを押してください。</p>

                <ul >
                    <li>登録作業だけではログインできません。登録完了後に送られるメールに記載される<strong class="c-red">「アカウント有効化」のURLをクリック</strong>することでログインできるようになります。</li>
                    <li>HTMLタグは一切使用できません。</li>
                </ul>
            <?= $this->Form->create($member, [
                'inputDefaults' => [
                    'label' => false,
                    'div' => false,
                    'required' => false,
                ],
            ]) ?>
        <div class="row mt-3 border-top">
                <div class="col-md-5 d-flex align-items-center col-color ">
                    <span class="hissu">必須</span>
                    <h5 class="mt-2">ご希望のユーザーID</h5>
                </div>
                <div class= "col-md-7">
                    <?= $this->Form->control('account',[
                    'type' => 'text',
                    'placeholder' => '例）gaoka',
                    'id' => 'account',
                    'label' => false,
                    'class'=>'form-control form-control-lg mt-2'
                    ])?>
                </div>
            <div class="col-12">
                <div>※半角英数(一部記号可)</div>
            </div>
        </div>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

@media (max-width: 767.98px) {
.container.mx-auto,
.row.mx-auto {
margin-right: 0 !important;
margin-left: 0 !important;
}
}

/* 大きい画面幅で mx-auto を適用する /
@media (min-width: 768px) {
.container.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.row.col-md-8.mx-auto {
width: auto !important; / 幅を自動に設定 */
margin-right: auto !important;
margin-left: auto !important;
}
}

このコードを追加しても、小さい画面のとき左右のスペースができます、なくしたい、、

補足

特になし

Answer 1

.container-mdとかではダメですか？

レスポンシブコンテナは、指定したブレークポイントに到達するまで 100% の幅を持つクラスを指定することができます。その後はより高いブレークポイントごとにmax-widthが適用されます。
Containers (コンテナ) · Bootstrap v5.0

Comments

[Lhankor_Mhy]

余計なアドバイスだと思いますが、ご容赦ください。
Bootstrap は、クラス指定でコストをかけず短時間でページのデザインをするためのライブラリなので、CSSを直接指定していろいろデザインをいじるつもりであるならば、使わない方がいいかもしれません。
もし、Bootstrap のテーマを変更したいということであるなら、SCSS を変更してビルドし直した方がいいです。

Answer 2

画面サイズに応じてレイアウトを調整するためには、CSSメディアクエリを適切に使用することが重要です。以下に示すコードは、小さい画面サイズでは左右のスペースをなくし、大きい画面サイズでは左右にスペースを設ける方法の一例です。

CSSの調整

@charset "utf-8";

/* 任意の他のスタイル */

.hissu {
    background-color: rgba(235, 4, 4, 0.813);
    color: white;
    font-size: 0.6em;
    padding: 0.2em 0.4em;
    line-height: 1;
    margin-right: 0.5em;
}

.col-color {
    background-color: rgb(244, 245, 245);
}

/* 小さい画面サイズ用 */
@media (max-width: 767.98px) {
    .container,
    .row.mx-auto {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
    }
}

/* 大きい画面サイズ用 */
@media (min-width: 768px) {
    .container.mx-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .row.col-md-8.mx-auto {
        width: auto !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .col-color {
        background-color: transparent;
    }
    .border-top {
        border-top: 2px solid #000;
        padding-top: 10px;
    }
}

HTMLの調整

CakePHPのフォーム部分には変更を加える必要はありませんが、クラス名を明確にすることでCSSの適用が正しく行われるようにします。

<?php $this->start('css') ?>
<?= $this->Html->css('login') ?>
<?php $this->end(); ?>
<div class="container mx-auto">
    <div class="row col-md-8 mx-auto">
        <div>
            <h1>名簿メンバー登録</h1>
        </div>
        <p>必要な項目を入力し、「登録確認」ボタンを押してください。</p>

        <ul>
            <li>登録作業だけではログインできません。登録完了後に送られるメールに記載される<strong class="c-red">「アカウント有効化」のURLをクリック</strong>することでログインできるようになります。</li>
            <li>HTMLタグは一切使用できません。</li>
        </ul>
        <?= $this->Form->create($member, [
            'inputDefaults' => [
                'label' => false,
                'div' => false,
                'required' => false,
            ],
        ]) ?>
        <div class="row mt-3 border-top">
            <div class="col-md-5 d-flex align-items-center col-color">
                <span class="hissu">必須</span>
                <h5 class="mt-2">ご希望のユーザーID</h5>
            </div>
            <div class="col-md-7">
                <?= $this->Form->control('account', [
                    'type' => 'text',
                    'placeholder' => '例）gaoka',
                    'id' => 'account',
                    'label' => false,
                    'class' => 'form-control form-control-lg mt-2'
                ]) ?>
            </div>
            <div class="col-12">
                <div>※半角英数(一部記号可)</div>
            </div>
        </div>
    </div>
</div>

このコードを使用することで、画面が小さいときには左右のスペースがなくなり、大きい画面のときには左右にスペースができるようになります。必要に応じて、クラス名やCSSスタイルを微調整してください。

Comments

[Uhoho]

chat gptの回答読まずにコピペしただけなんだよな。