デイトラweb制作初級編 DAY13
nakano
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分程度で完成）。
ブログを書いている時に、カスタマイズを忘れていたことに気付いたので、
あとで色々とサイトをいじってみたいと思います！
