30DAYSトライアル

【デイトラ1st：動画2本目】迷走ポイントをまとめてみた。

  /
30DAYSトライアル1stのYouTube動画2本目にチャレンジしてみたけど、まだまだわからないところがたくさんあるなぁ…。

というわけで、デイトラ1stのLP動画2本目で、特に迷ったところをメモ。

解決できてないところは追々。

全体的に

.container > .row > .col

LP動画1本目では、忠実に .container > .row > .col でコーディングされていたけど、2本目だと.container が全く出てこない。

デイトラ本家でも紹介されてましたが、そういうことらしいです。

これに関しては、いまいちピンと来ていない（というか、ネット上だと圧倒的に .row > .col 前提の記事が多くて、.colのみバージョンの理屈がわかっていない）ので、違いを検証してみる予定。

.col-12

これも1本目では、「.col-(サイズ)-xx」という使い方をされていたのに、真ん中の(サイズ)の部分が無くなって、「.col-12」となっていてキョトン。

(サイズ)を指定しないってことは、全画面サイズ共通ってことだよね？もはや「.col-12」を書かなくてもいいのでは？

と思い、.col-12 を削除してみるとレイアウトが変わってしまった…。

そこで、デベロッパーツールで見てみると、.col-12 にスタイルが設定されているのがわかった。

…でも、スタイルが記述されているファイルが見当たらない…。
（ダウンロードしたファイルの中には無いような…？？）

該当ファイルの拡張子が .scss（現時点で未学習）だし、デイトラのこの先で「SCSS」を学ぶみたいなので、今は「.col-12にはスタイルが設定されている。だから、あるのとないのとではレイアウトが変わる」ということがわかっただけよしとする。

Nav Section

scrollspy

「できるだけ自力で！」と意気込んで、チートシートからコピペしつつ動作を解析しようとしたのだけど、何と何が紐づいているのかわからず撃沈。

色んなサイトをさまよった結果、こちらの記事が直感的にわかりやすかった。

Bootstrap4 Scrollspyの使い方とカスタマイズサンプル

.offset:before

scrollspyのアクティブになる位置を調整してそう…なんだけど…。

  • display:block; → ブロック要素に
  • content: “”; → ブロック要素に空要素を指定？高さを持たせるため…？
  • height: 4rem; → 高さ
  • margin-top: -4rem; → heightの分を戻してる…？？（なぜ…）

疑似要素もまだまだなので、全体的に理解が深まったら改める。

.active

scrollspyとの絡みで、アクティブなメニューの文字色を変更する…というスタイル設定の場面で、「.nav-link.active」という指定が登場。

「:active」じゃなくて「.active」なところに注目。

.active ということはクラス名。だけど「active」というクラス名は指定していないはず…。

これもさまよった挙げ句、東京フリーランスのslack過去ログにたどりついて一時的に解決。（理解はしていない）

過去ログによると、この処理はJavaScriptの処理で「クリックされた要素にactiveクラスを付与する」というもので、デイトラ2ndで学習する内容…とのことなので、いったんスルー。

Features Section

.jumbotron

これ、1本目の動画からずっとなんだけど、あえて .jumbotron を使う理由がわからない…。

Resources Section

.fixed

背景画像を位置固定するところのスタイルで、.fixed というクラス名が使われているのだけど、cssに書いたスタイルだけで背景固定できるとはとても思えず。

試しに「.fixed」を違うクラス名に変更すると同じスタイルが適用されないので、Bootstrap固有のクラス名なのかと思い、ググってみる。

しかし、まったくと言っていいほどヒットしなくて迷子。さまよった末、デイトラ先輩のこちらの記事に救われた…。（灯台もとぐらし 笑）

【まとめ②】30DAYSトライアル【Bootstrapの基礎〜LP制作編】

Contact Section

footer

このセクションは、思いもよらぬ力技感がすごかった…。

まず、コピーライトの部分のテキストがタグで囲まれてない…。

「タグで囲まれてないテキストって何扱いなの？」って思ったけど、.justify-content-center で、.col-md-5、hr、コピーライト の3つが横並びになってたので、ちゃんと子要素として扱われているということだと理解。（でも、自分でコーディングする時はpタグで囲むと思う。）

で、この不自然な横並び状態から hr を width:100% にすることで縦並びを実現してました。ナニソレ驚愕。

まとめ

Bootstrapのスタイルだけじゃなく、動画の作者の方がオリジナルで設定しているスタイルもかなりたくさんありそう。

ダウンロードしたファイルを使わず、白紙の状態から書き始めたら、新たな疑問が生まれるに違いない…。

RELATED POST