こんにちは！Kohei（@koheinishino_）です！
2019年7月現在、東京フリーランスのショーへーさん（@showheyohtaki）が主催している「30DAYSトライアル」に取り組んでおります。
この記事では、『初心者からコーディングの副業で月5万円を稼ぐ』というテーマのセカンドステップで私がつまづいた点についてまとめていきます。
2. 30DAYSトライアル【Bootstrapの基礎〜LP制作編】
今回は、2本目のチュートリアル動画のLPをコーディングしました。
Home Section
data-spy
スクロールしたときに画面に表示されているセクションと、画面上部のNavigationのリンクの表示を対応させたいときに使用する属性です。
今回は、Navigationのリストに「id=”navbarResponsive”」を記述し、bodyのdata-targetでそれを指定していました。
data-spyで検索すると、Scrollspy(補足説明として記載されているページが多いようです。
その中でも以下のページが参考になりました。
Scrollspy（スクロールスパイ）の使い方_Bootstrap 4｜レンタルサーバーのCPIスタッフブログ
Navigationを使用しているページでは、使用したほうがよさそうですね！
Features Section
shrink-数値
FontAwesomeの「data-fa-transform」という、独自データ属性の要素です。
アイコンを縮小する際に使用しました。
以下の記事が参考になりました。
Font Awesome 5の使い方【SVG with JavaScript編】 – niwaka-web
今回はshrinkしか使用しませんでしたが、growという要素も指定ができ、以下の関係となっています。
grow-数値（拡大） ⇔ shrink-数値（縮小）
アイコンの領域は変えずにアイコン画像自体を拡大縮小する、という点がポイントですね。
領域を変更せずにアイコンを拡大縮小する場合に使用すると思われますが、経験不足なものであまり使い所が思いつきませんでした…（汗）
これに限らずですが、初学者のうちは完璧に理解しようとせず、広く浅く学んでいき後から補填していきましょう！
up-数値
こちらも前述の「up−数値」と同様に、FontAwesomeの「data-fa-transform」という、独自データ属性の要素です。
アイコンを上方向に移動するために使用しました。
同様の記事ですが、下記にページが参考になりました。
Font Awesome 5の使い方【SVG with JavaScript編】 – niwaka-web
upを含め、以下の4つの属性があります。
up-数値（上）、down-（下）、left-数値（左）、right-数値（右）
こちらもアイコンの領域は変えずにアイコン画像自体を移動する、という点がポイントですね。
領域を変更せずにアイコンを移動する場合に使用するという程度のインプットで先へ進みましょう！
Resources Section
fixed-xxx
検索してもヒットしなかったので焦りましたが、これはfixed.cssに定義されているclassですね。
私はこのcssファイルの存在に気づくのに時間がかかりました…（汗）
fixed.cssには、「.fixed-background」、「.fixed-wrap」、「.fixed」というclassが定義されています。
内容を見てみると、何やら細かい位置調整をしているようですが、このチュートリアルのLP限定の話がほとんどなので私はスルーしました（笑）
しかし、このセクションで「背景画像をどのように固定しているんだろう？」ということが気になって調べたので、以下に載せます。
background-attachment : fixed
Resource Sectionでは、背景画像は固定されているため動かないようになっています。
固定するやり方が分からなかったので調べてみると「background-attachment : fixed」というプロパティが出てきました。
このプロパティは実際に今回のLPにはどこにも記述されていませんが、今後使用することもあるかもしれないということでメモ程度に記載します。
以下のサイトが参考になりました。
超簡単！スクロールしても背景画像を固定させるCSSテクニック _ TAKAFUMI MEGUMI
繰り返しになりますが、これも丸暗記ではなく次使う機会があったときに「何か前やったな〜」程度に思い出せればオッケーです。
Clients Section
blockquote
このタグは引用部分を明示するために使用します。
詳細は下記サイト。
文章をどこかの文献から引用する場合はこのタグを使用して、HTMLに記述したほうが良さそうですね。
ちなみに、citeタグは引用元を表示するのに使っています。
その他
疑似要素
今回は「.offset : before」というかたちで記述がありました。
: beforeという疑似要素の説明は、下記サイトが参考になりました。
そもそも疑似要素とは、「HTMLに書くほどでもない要素もどきを作成したいときに使用する」ものです。
offsetクラスはHomeセクション以外のすべてのセクションのdivに記述されており、中身を見てみると位置調整のためであることが見受けられます。
したがって、divの直前に挿入する内容（位置調整のための空文字）を記載しているということですね。
WEB制作でよく使われる疑似要素は、ほかにどんなものがあるか調べてみても良いかもしれません。
まとめ
30DAYSトライアルの2本目のYouTubeチュートリアル動画についてまとめました。
まだ実際に1からLPをつくっていないので、使い所が理解できず、どの内容も「へ〜そうなんだ」くらいのテンションで調べてますw
自分の成果物ではないものに立ち止まっていても時間がもったいないので、理解できなくて悩んでいる方がいましたら、気にせずさっさと先へ進めてしまいましょう！
コメント