こんにちは、マサ( @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」の２種類があったのですが、それぞれ
- fab＝Brands
- fas＝Solid
を意味しており、「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;
の各数値の意味がイマイチ分からなかったので調べてみました。
- １番目：水平方向の距離
- ２番目：垂直方向の距離
- ３番目：影のぼかし半径
- ４番目：影の色
ちなみに以下のページで、実際の影のイメージをいろいろ試すことができますよ。
「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テンプレートを使ってみよう＋自分のポートフォリオサイトを作ろう①』課題＆実践レポート
コメントを残す
コメントを投稿するにはログインしてください。