DAY14.『Bootstrapを使ってビジネスLP制作②』ポイントまとめ&感想【#30DAYSトライアル】

#30DAYSトライアル

こんにちは、マサ( @Masayuki_Hirai )です。

1月7日から参加しているショーへ―さん主催の『#30DAYSトライアル』

DAY14の課題に少し手間取ったのですが、無事にクリアできました。

この記事では、個人的に気になった部分をまとめていきますね。

 DAY14. 課題の概要

DAY14の課題は、DAY13に続いてYouTube動画を参考にしたビジネスLPの制作です。

『Bootstrapを使ってビジネスLP制作②』課題の詳細|Googleドキュメント

今回もこちらのDrew先生の講座を参考にしてLPを作ってゆきましょう。↓

Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3|YouTube

ちなみに前回は英語がまったく聞き取れなくて苦戦したのですが、最初1.5倍速で観たあと標準速度で観るとかなり聞き取れるようになりました ♪

それでは個人的に気になったクラス名やプロパティを以下でご紹介しますね。

 DAY14. ポイントまとめ

「sticky-top」で上部にバーを固定

navタグのクラス名に加えられた「sticky-top」のおかげで、ページを下へスクロールしてもナビゲーションバーを上部に固定できるようになりました。

僕は以前からどのような仕組みなのか気になっていたので、今回方法を学ぶことができて嬉しかったです。

「fab」と「fas」の違いは?

今回使ったアイコンのクラス名は「fab」「fas」の2種類があったのですが、それぞれ

  • fabBrands
  • fasSolid

を意味しており、「fab」は企業やサービスのロゴ、「fas」は一般的なロゴという使い分けのようです。

参考記事Font Awesome 5の使い方|niwaka-web

「container-fluid」でなめらかな変化

今回すべてのセクションで使われたクラス「container-fluid」は、画面の大きさを変えた際、なめらかなサイズチェンジをおこなってくれるものでした。

レスポンシブ対応が当たり前になっている現代では、必須のクラスですね。

「hr」=水平線

各部分で使われた<hr>は「Horizontal Rule」の略で「水平線」を作るためのタグでした。

具体的には<hr class=”my-4″>のように、上下にmarginをとって使われていましたね。

 transform: translateY( -50%)

「.carousel-caption」で用いられた「transform: translateY(-50%)」は、Y方向に-50%、つまり上方向に50%分移動するという意味でした。

一般的には

.element {

position: relative;

top: 50%;

transform: translateY(-50%);

}

という形で使われることが多いそうです。

参考記事[CSS]たった3行のスタイルシートで高さ不明の要素に対して天地中央に配置するテクニック|コリス

 text-transform: uppercase;

text-taransform: uppercase;」は該当のテキストをすべて大文字にしてくれるプロパティ。

こんなものがあると知らなかったので、僕は普通にテキストをすべて大文字で打っていました…(笑)

 text-shadow の数値の意味

「text-shadow」は文字に影をつけるプロパティなのですが、

text-shadow: 1px 1px 10px #000;

の各数値の意味がイマイチ分からなかったので調べてみました。

  • 1番目:水平方向の距離
  • 2番目:垂直方向の距離
  • 3番目:影のぼかし半径
  • 4番目:影の色

ちなみに以下のページで、実際の影のイメージをいろいろ試すことができますよ。

CSS3 text-shadowジェネレーター

「rem」と「em」の使い分け

CSSで頻出する単位「em」と「rem」の定義は以下のとおり。

em:その要素の font-size の計算値を表す

rem:ルート要素(<html>など)の font-size を表す

ただその使い分けがよく分からなかったので、ショーへ―さんに質問してみました。

html {

font-size: 15px;

}

p {

font-size: 1.2rem;

}

strong {

font-size: 1.4rem;

}

というCSSがあった場合、もしemを用いるとstrongのfont-sizeは「15px × 1.2 × 1.4」とかなり大きくなってしまいます。

しかしremであれば親要素のフォントサイズが影響しないので、strongのfont-sizeは「15px × 1.4」と意図通りの大きさになるそうですよ。

参考記事CSSの基本単位としてremを使うと超絶便利|Qiita

 DAY14. 感想

今回は英語の動画を用いた課題ということで最初は苦労したんですが、最終的には楽しみながらビジネスLPを完成させることができました。

一つ一つの要素をきちんと組み立てればLPも簡単に作れると理解できたので、引き続き「#30DAYSトライアル」を頑張ってゆきます♪

最後まで読んでくださり本当にありがとうございました。Ciao!

関連記事DAY.18『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』課題&実践レポート

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です