デイトラweb制作初級編 DAY13

Bootstrapでコーディング(一人で)

一人でコーディングしたサイト ↓

反省点

①トップ画像部分

<section class="top py-5 text-white">
    <div class="container py-5">
      <h1 class="text-center display-3 font-weight-bold">Bootstrap</h1>
      <p class="text-center lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s
        most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system,
        extensive prebuilt components, and powerful JavaScript plugins.</p>
    </div>
  </section>
<section class="top py-5 ">
    <div class="container">
      <h1 class="text-center text-white font-weight-bold">Bootstrap</h1>
      <p class="text-center text-white">Documentation and examples for Bootstrap’s powerful, responsive navigation
        header, the navbar. Includes support for branding, navigation, and more, including support for our collapse
        plugin.</p>
    </div>
  </section>

反省点

・画像の幅を見本のサイズまで大きくできなかった

→ 「section」タグに「py-5」classを追加


・「Bootstrap」の文字サイズを見本のサイズまで大きくできなかった

→ 「h1」タグに「display-3」classを追加

②Plans部分

<div class="card-body">
    <h3 class="card-title text-center">Beginner</h3>
    <ul class="list-group">
        <li class="list-group-item display-4 text-center list-group-item-primary">$25</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
</div>
<div class="card-body">
    <h3 class="card-title text-center">Beginner</h3>
    <ul class="list-group">
        <h1 class="list-group-item active text-center py-4">25$</h1>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
</div>

反省点

・背景色を変更できなかった

→ 「h1」タグの「list-group-item」classを「list-group-item-primary」classに変更


・「25$」「40$」「70$」の文字サイズを見本のサイズまで大きくできなかった

→ 「h1」タグを「li」タグに変更し、「display-4」classを追加

まとめ

今回はBootstrapを使って一人でサイトを作りました。

Day8の時にも一人でサイトを作りましたが、

ほとんどがコピペだったこともあってその時よりも進みは速かったです(50分程度で完成)。

ブログを書いている時に、カスタマイズを忘れていたことに気付いたので、

あとで色々とサイトをいじってみたいと思います!

コメントを残す

メールアドレスが公開されることはありません。