HTML/CSS

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

こんにちは!Kohei(@koheinishino_)です!

2019年7月現在、東京フリーランスのショーへーさん(@showheyohtaki)が主催している「30DAYSトライアル」に取り組んでおります。

この記事では、『初心者からコーディングの副業で月5万円を稼ぐ』というテーマのセカンドステップで私がつまづいた点についてまとめていきます。

2. 30DAYSトライアル【Bootstrapの基礎〜LP制作編】

今回は、1本目のチュートリアル動画のLPをコーディングしました。

Navigation

sticky-top

要素の位置を指定するためのclassで、要素をスクロール時にブラウザの上部に固定します。

詳細は下記サイトへ。

位置ユーティリティ~Bootstrap4移行ガイド

動画の通りにコーディングすると、おそらくJumbotronを過ぎたところでNavigationが隠れると思うのですが、私はこの記事を書くまでその理由がずっとわかりませんでした。

sticky-topを使用する際は、画面上部に固定させたい要素(Navigation)にsticky-topを定義し、固定表示し続ける他の要素(ImageSlider・Jumbotron)と一緒に親要素にまとめる必要があります。

以下の記事が参考になったので見てみてください。

position_ sticky;の仕組みや実際の使い方をやさしく解説 _ コリス

つまり、私はNavigation・ImageSlider・Jumbotronを同じdivに配置していることに気づいていなかったわけですw

定義したclassやプロパティがどの範囲まで効果が及ぶのかにも留意しながらコーディングしていく必要がありますね。

ImageSlider

Carousel

知らない言葉だったので、今後「カルーセルって何だっけ?」とならないために疑問ではないけど一応メモ。

主に画像やその他の要素をスライドショーのように表示するためのclassです。

詳細は下記サイトへ。

カルーセル~Bootstrap4移行ガイド

カルーセルとは、「回転木馬、回転棚」を意味するそうです。

ディズニーランドのアトラクションで「キャッスルカルーセル」というメリーゴーランドがあるので、私はそれに紐づけて覚えましたw

余談ですが、知らない単語は画像検索して画像と言葉を紐付けるとスッと頭に入るのでおすすめです。

Jumbotron

jumbotron

こちらも知らない言葉だったのでメモ。

WEBサイトのトップの見出しデザインで、サイトの主要メッセージ等を表示するためのclassです。

詳細は下記サイトへ。

ジャンボトロン~Bootstrap4移行ガイド

ジャンボトロンとは、元々ソニーによって開発・製造された大型映像表示装置のブランド名だそうで、そこから「大型ディスプレイを示す一般名詞」として使用されているそうです。

会社のブランドが一般名詞になるくらい浸透するってすごいことですよね。

ちなみに画像検索すると、SONYのバカでかいディスプレイの画像がたくさん出てきますw

ジャンボトロンと聞いたら、「目立たせたいメッセージとかを表示するんだなー」と思うことにしましょう。

Cards

card

Cardは主に、画像、タイトル、本文テキスト、ボタン等があるコンテンツを複数作成する場合に便利なclassです。イメージしづらいと思うので、公式のページを見ていただいたほうが早いかと…(汗)

詳細は下記サイトへ。

カード~Bootstrap4移行ガイド

チュートリアルの動画では、チームのメンバー紹介として使用していました。

ポートフォリオのスキルや成果物を並べるときに活用できそうですね。

その他

my-数値

「my = margin + y方向」の略で、数値を指定します。

詳細は下記サイトへ。

空白ユーティリティ~Bootstrap4移行ガイド

フレームワークの中で定義されているclassは、自分で色々作っていく中で「(これ書くの面倒ッ!定義されてねーのかな?)」といった感じで気づいて調べていくほうが早そうですね。

transform:translate()

transformはCSSのプロパティの1つで、要素の変形をさせたいとき(移動、回転、縮小、傾斜)に使用します。

translate()はその中の移動に該当し、要素の表示位置を移動させることができます。

詳細は下記サイトへ。

transform_translate()-CSS3リファレンス

チュートリアルの動画では、carousel-caption(ImageSliderの文字の部分)というclassに定義されていました。

ここでやりたかったことは、「文字の要素を画像の上下中央に配置したい」ということだと考えられます。

「transform:translate(-50%);」だけ見てもイマイチよくわかりませんでしたが、以下の記事が参考になりました。

CSSで中央寄せする9つの方法(縦・横にセンタリング)

完全に理解できないうちは、「(上下中央配置をしたいときはこう定義するんだー。)」とぼんやり覚えとくだけで充分だと思います。

text-transform:uppercase

text-transformはCSSのプロパティの1つで、大文字・小文字・全角文字への変換を指定する際に使用します。

uppercaseは適用したすべての文字を大文字にすることができます。

詳細は下記サイトへ。

text-transform-CSSリファレンス

特に英単語について、大文字・小文字・半角・全角をCSSでまとめて指定しておけば、後から変更するときも楽ですよね。

まとめ

30DAYSトライアルの1本目のYouTubeチュートリアル動画についてまとめました。

私の記事では、「これを定義すると何が実現できるか」という点にフォーカスしています。

シンプルに「Aを定義するとBが実現できる」のAとBだけ抑えておけば、記憶に定着しやすいからです。

リファレンスサイトに詳細説明は載っていますが、簡潔にはまとめられていません。

一度見たものを断片的に記憶して、いつでも引き出せる状態(検索できる状態)にしておくことが重要だと思います。

1つのことを100%覚えるのではなく、5つのことを20%ずつ覚えていつでも引き出せるようにしておきましょう!


ABOUT ME
Kohei Nishino
派遣のWeb系エンジニア、ブロガーです。新卒未経験で開発エンジニアとして大手SIerに入社し1年10ヶ月で退職→派遣エンジニアとして半年間インフラ構築→派遣で開発案件探し中。現在はDevOps系の技術を勉強しており、主にRails、AWS、Docker等の学習内容を発信しています。