プログラミング学習38日目
DAY17ということで、今日はこれまでの学習の振り返りを行います。躓いたところやわからなかった点などを整理します。
主に、こちらの2つの動画の写経について整理します。
（2つのサイトの写経に取り組み始めたのが4日前ってことにびっくり。なんか一週間くらいやってたイメージだったけど…）
学習対象
折り畳みができるNavbar
折りたたみができるNavbarが最初にでてきて、クラス名の多さにびっくり。最初は何が何だかよくわからなかったけども、Bootstrapのdocをみてなるほどねと思いました。要するに公式みたいなもんで、折りたたみしたければこの構成を使えってことを知りました。（Bootstrapはフレームワークなので、当然っちゃ当然ですが、その感覚がまだなかった）
カルーセル
いきなり画像が横にスライドする高度なコードが。いきなりレベルアップ感がしますね。
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">これも、docに標準で載っている公文。youtube見ながら一生懸命写していましたが、あとでdocを見たら書いてあって、「うそやん」と思った記憶があります。
Jumbotron
メッセージを表示させるために使うクラス、Jumbotron。
これって商用でLPやHPを作るときにどのくらいの頻度で使うのだろう？なんか使わなそうな感じがする…
containerとcontainer-fluidの違い
container-fluidがやたらとあって、単なるcontainerの記述だと思ったのですが、どうやら余白の有無に関係するそうです。
3カラム構成の黄金パターン
2つの動画もこのパターンが多用されていた。確かに3カラム構成で「写真やアイコン」と「説明分」みたいな構成↓がよく見かけるので、覚えておこう
<div class="row text-center padding">
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fa-code"></i>
<h3>HTML5</h3>
<p>Buit with the lates version of html </p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<i class="fas fa-bold"></i>
<h3>BOOTSTRAP</h3>
<p>Buit with the lates version of html </p>
</div>
<div class="col-xs-12 col-md-4">
<i class="fas fa-css3"></i>
<h3>CSS3</h3>
<p>Buit with the lates version of html </p>
</div>
</div>カード
カード表現もありました。こちらもdocそのまま。写経中は気づかない！
remの活用
今回のfont-sizeはremを利用していました。pxとrem(絶対値と相対値）はどっちが主流なんだろう？という疑問にはこちら↓。要するにレスポンシブ対応が必要ならrem一択ということで。
position
この記事が気に入ったらサポートをしてみませんか？