画像のサイズの調整と要素を真ん中に移動させる方法を知りたい

実現したいこと

あるサイトを参考にして、模写しているのですが
どうしても自力で解決できないため
解決法をご存知でしたら、ご教示いただきたいです。

1つめ

■実現したいイメージ

■質問者の環境での表示

やりたいこととしては
・各コースの間に空白を入れる
・各コースのサイズを小さくする
です。

2つめ

■実現したいイメージ

■質問者の環境での表示

やりたいこととしては
・メールアドレスの入力欄を画面の真ん中に移動させる
・「無料ではじめる」のボタンを入力欄を画面の真ん中に移動させる
です。

質問者のHTML

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel ="stylesheet" href ="https://unpkg.com/ress/dist/ress.min.css">
    <link rel ="stylesheet" href ="style.css" type ="text/css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>タイトル</title>
    <script src="https://kit.fontawesome.com/4d24fcb10e.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <!-ヘッダー->
    <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#"><h3>30DAYSトライアル</h3></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse  justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
          <a class="nav-link" href="#">Home</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>
  </nav>
  </header>
    
    <!-メイン->
    <div class="top-img">
        <div class="top-text">
            <h1>1日1題30日で<br>プロのエンジニアになろう！</h1>
            <p>毎日設定された課題をこなすだけ！<br>未経験から30日のプログラミングスキルが身につきます</p>
        </div>
    </div>
    
    <!-デイトラとは->
    <div class="about">
        <h2>デイトラとは</h2>
        <div class="img-container">
        <img class="mr-3" src="img/about.png">
        <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。<br>
        毎日設定された課題をこなしていくだけで、未<br>経験から30日でプログラミングスキルが身につきます。<br>
        1日1題30日でプロのwebエンジニアを目指しましょう！</p>
        </div>
    </div>
    
    <!-コース一覧->
    <div class="list">
        <h2>コース一覧</h2>
        
        <div class="card-group">
            <div class="card">
                <img src="img/web_first.png" height="400" class="card-img-top" alt="初級コース">
            <div class="card-body">
             <p class="card-text">HTML／CSS／Bootstrap</p>
            </div>
          </div>
          
    <div class="card">
        <img src="img/web_second.png" class="card-img-top" alt="中級コース">
        <div class="card-body">
        <p class="card-text">HTML／CSS／JavaScript／jQuery</p>
    </div>
  </div>
  
  <div class="card">
    <img src="img/web_third.png" class="card-img-top" alt="上級コース">
    <div class="card-body">
      <p class="card-text">PHP／WordPress</p>
    </div>
  </div>
</div>
    </div>
    
    <!-お問い合わせ->
    <div class="contact">
        <h2>お問い合わせ</h2>
        
    <form>
    <div class="form-group">
        <label for="exampleInputEmail1">さあ今日から30日間を始めよう！</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="メールアドレス">
    </div>
        <button type="submit" class="btn btn-primary">無料ではじめる</button>
    </form>
    </div>
    
    <!-フッター->
    <footer>
        <hr>
        <p>&copy;2020 東京フリーランス ALL Rights Reserved.</p>
    </footer>
    
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

質問者のCSS

/*デフォルトでできる余白を消すCSS*/
*{
    margin:0;
    padding:0;
}

/*ヘッダー*/
header{
    height:50px;
}

header nav a h3{
    padding-left: 300px;
}

header nav a{
    font-size: 20px;
    font-weight:bold;
}

.navbar-nav li{
    padding-right: 50px
}

/*メイン*/
.top-img{
    background-image: url(img/main-vsual-nontitle.png);
    background-size: cover;
}

.top-text{
    text-align: center;
    padding: 200px 200px;
    font-weight:bold;
}

.top-text h1{
    font-size: 70px;
    margin-bottom: 50px;
}

.top-text p{
    font-size: 25px;
}

/*デイトラとは*/
.about h2{
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    font-weight:bold;
}

.about p{
    font-weight:bold;
    font-size: 20px;
}

.img-container{
  display:flex;/* flexbox */
  justify-content:center; /* 水平方向 */
}

.mr-3{
    height: 450px;
    padding-right: 50px;
}

/*コース一覧*/
.list h2{
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    font-weight:bold;
}




/*お問い合わせ*/
.contact h2{
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    font-weight:bold;
    text-align: center;
}


.form-group{
    text-align: center;
}

input[type="email"]{
    width:500px;
    height:50px;
    border-radius:30px;
}

button[type="submit"]{
    background-color: red;
    width: 300px;
    height: 50px;
}

行動規範の内容に同意します

回答2件

Bootstrap を使ってますね。ならば、まずは、へたに独自のCSSを設定する前に、Bootstrap でできないか調べましょう。

Bootstrapの設定だけでは、どうしてもうまくいかないときは、独自のCSSを設定することになります。そその場合は、BootstrapのCSS設定とバッティングしないように注意して設定する必要があります。そのためには、BootstrapのCSS設定を理解しておく必要があります。
その理解なしにCSSを設定すると収拾がつかなくなりがちです。

逆に、その部分はBootstrapを使わずに（Bootstrapのクラスを設定せずに）、すべて自前のCSSで設定したほうがいい場合もあります。

コードをみると、一部分だけ Bootstrap を使っているようです。中途半端に Bootstrap を使うのではなく、全体をBootstrapメインで設計するか、Bootstrapは使わずにすべて独自にCSS設定するか、まずは決めたほうがいいと思います。

それを決めてもらわないと回答者としては、具体的な回答は難しいです。

とりあえず、Bootstrap を使いこなすにグリッドシステムを理解する必要があります。これでレイアウトを決めることになりますので。その辺を調べて、Bootstrapでいくのか、独自でいくか、決めてください。

Grid system - Bootstrap 4.2 - 日本語リファレンス

投稿2021/03/28 05:29

hatena19

総合スコア33782

BAKU20

2021/03/28 12:01

ご回答ありがとうございます！ CSSとBootstrapに関する知識が浅く申し訳ございません。自分としては、Bootstrapメインで設計したいと考えております。今回は、Bootstrapを使っている1つめ「コース一覧」だけでも参考サイトの通りの表示にできればと思いますのでご教示いただいたグリッドシステムを使って、試してみようと思います。 ※2つめ「お問い合わせ」については、Bootstrapで調べなおしてみます。

行動規範の内容に同意します