プログラミング学習「30DAYSトライアル1st【Bootstrapの基礎〜LP制作編】」で紹介されていた、BootstrapのYouTubeチュートリアル動画1本目をやってみました。
英語の動画ですが、言葉がよく分からなくても動画を見ながらコーディングはできます。ただ、完成したものの、いくつか分からないところがあったので調べてみました。
Bootstrapを使ってLPを作る際には、よく使う独自のclassも多いかと思いますので、以下にまとめておきます。
Navigation
まずは、index.htmlのNavigationセクションから。
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
navbar
ナビゲーションバー
navbar-expand-md
.navbar-expand-{breakpoint}で、画面がブレークポイントより狭いとナビゲーションアイコンとして、画面が広いときはナビゲーションバー上にメニューを展開して表示。
mdは、Medium ／ 画面幅 中 （768px以上 992px未満）なので、これより画面幅が小さいとアイコンになります。
navbar-light
背景が黒系の場合は .navbar-darkを、白系の場合は .nabvar-lightを指定します。これにより、テキストやアイコンの色が変わります。
bg-light
背景色の指定。.bg-* や background-color で背景色を指定します。bg-*には、primary、secondary、success、 danger、warning、info、light、dark が使えます。
sticky-top
スクロールした後, 要素をviewportの上部に配置。
<div class="container-fluid">
container-fluid
.container-fluid は流動的コンテナを生成します。ウィンドウの横幅に応じてスムーズに横幅が変動します。
参考 Bootstrap でのコンテナの利用 (continer と container-fluid の違い)
<a class="navbar-brand" href="#"><img src="img/logo.png"></a>
navbar-brand
.navbar-brand は、会社、製品、またはプロジェクト名に使用。
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <span class="navbar-toggler-icon">
.navbar-toggler, data-toggle=”collapse”, data-target=”#…”, .navbar-toggler-icon, .navbar-collapse, .navbar-nav, .nav-item, .nav-link を用いてナビゲーションメニュー(別名ハンバーガーメニュー)を表示します。
navbar-toggler
ハンバーガーメニューにつけるクラス
data-toggle=”collapse”
折りたたまれた状態で表示され、data-toggle=”collapse” を指定した aタグ や buttonタグ によって開閉を切り替えます。
navbar-toggler-icon
ハンバーガーメニュー
<div class="collapse navbar-collapse" id="navbarResponsive">
collapse
崩壊させる、つぶす、折りたたむなどの意味を持ちます。
navbar-collapse
親要素のブレークポイントでナビゲーションバーのコンテンツをグループ化して非表示にします。
<ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a>
navbar-nav
全高およびの軽量なナビゲーション（ドロップダウンのサポートを含む）に使用。
ml-auto
左側のマージンをautoにします。
nav-item nav-link
ul,li, .nav, .nav-item, .nav-link でナビゲーション部品を構成します。
Image Slider
<div id="slides" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active">
カルーセル(carousel)は、回転木馬や回転棚を意味します。イメージなどのコンテンツを横方向にスライドさせながら順番に表示します。
carousel slide carousel-inner carousel-item
.carousel, .slide でカルーセル全体を、.carousel-inner でカルーセルの内部コンテンツセットを、.carousel-item で個々のコンテンツアイテムを示します。
data-ride=”carousel”
data-ride=”carousel” を指定すると画面を読み込んだ時点でスライドを開始します。デフォルトで 5秒毎にスライドします。マウスを乗せている時はスライドしません。
active
表示中のスライドを示します。
<ul class="carousel-indicators"> <li data-target="#slides" data-slide-to="0" class="active">
carousel-indicators
カルーセルの中央下部に、今どのコンテンツを表示しているかのインジケータを表示します。
data-slide-to=”0″
data-slide-to=”*” は 0 から順につけます。スライドの位置を 0 から始まる特定のインデックスにシフト。
<div class="carousel-caption">
.carousel-caption
各スライドのキャプションを表示します。
<h1 class="display-2">Bootstrap</h1>
display-2
通常のヘッダよりもさらに目立たせたいヘッダがあれば、.display-1～.display-4 を用いてさらに大きな見出しとします。
<button type="button" class="btn btn-outline-light btn-lg">VIEW DEMO</button>
btn
ボタンを示します。
btn-outline-light
.btn-* でボタンの種類を指定します。.btn-outline-* は、アウトラインボタンを表示します。
btn-lg
.btn-lg, .btn-sm でボタンの大きさを指定します。
Jumbotron
<div class="row jumbotron">
row
行
jumbotron
JumboTron はソニーが1985年に発売した大型表示装置で、転じて大型ディスプレイを示す一般名詞として用いられています。
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10
.col-{breakpoint}-{n} を用いて、画面サイズに応じてカラムの割合を変更することができます。
この場合、sm (Small:スマホサイズ)以下の時は一列、タブレットサイズ、デスクトップサイズの時は3/4を占め、大画面サイズでは5/6を占めます。
<p class="lead">
lead
本文にはpタグを用います。.lead は記事のリード(要旨)を示します。
Welcome Section
<div class="container-fluid padding"> <div class="row welcome text-center">
.padding .welcomeはstyle.cssで指定。
Three Column Section
<hr class="my-4">
my-4
すべてのビューポートサイズで、上下のマージンを1.5rem。縦方向(y)のマージン(m)。
Two Column Section
<img src="img/desk.png" class="img-fluid" alt="">
img-fluid
imgタグに対して .img-fluid を指定すると、ウィンドウの広さに応じて自動的に横幅が調整されるレスポンシブ画像とすることができます。
Fixed background
<figure> <div class="fixed-wrap"> <div id="fixed">
figure
図表
fixed-wrapとfixedはcssで独自定義されている。
Emoji SectionとMeet the teamのセクションはとくに不明点なし。
Cards
<div class="card"> <img src="img/team1.png" alt="" class="card-img-top"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">John is an Internet entrepreneur with almost 20 years of experience.</p>
card card-img-top card-body card-title card-text
.card は、フレキシブルで拡張可能なコンテンツコンテナであるカードを表示します。.card-img-*, .card-body, .card-title, .card-subtitle, .card-text, .card-link は、画像、本文、タイトル、サブタイトル、テキスト、リンクを表示します。
Two Column SectionとConnect、Footerセクションはとくに不明点なし。
index.htmlは以上。
style.css
ここからはスタイルシート（style.css）を解説します。
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-captionを縦方向に中央に配置したい場合、top: 50%;で上から50%の位置を指定します。これだけだと、.carousel-captionの右上部分がちょうど真ん中に配置されたことになります。
そこで、transformで縦方向に-50%を設定すると、.carousel-captionの大きさの-50%分移動してくれます。するとちょうど真ん中に配置されるわけです。
text-transform: uppercase;
text-transformとはテキストにおける英数字の大文字、小文字の表示を指定するプロパティです。
uppercaseで、すべての文字を大文字に変換します。
text-shadow: 1px 1px 10px #000;
text-shadowは以下のように記述します。
水平方向と垂直方向の値は正の数以外に負の数(マイナス)で設定することができます。正数の場合は水平方向は右に、垂直方向は下に影が付きます。逆に負の数の場合は水平方向は左に、垂直方向は上に影が付きます。
3つ目の値の影のぼかし半径と、4つ目の値の影の色は省略することができます。
transition: transform 0.5s ease;
変化するまでの時間などを指定できる、transitionプロパティ。
transformは、直訳すると変形という意味です。変形には移動、回転、伸縮、傾斜の4つがあります。
ease（初期値）：開始時と終了時は緩やかに変化します。
backface-visibility: visible;
backface-visibility プロパティは、要素がユーザーに対して裏側を向いたときに、裏面を可視にするかどうかを設定します。
参考 backface-visibility – CSS: カスケーディングスタイルシート | MDN
clip: rect(0, auto, auto, 0);
clipプロパティは、ボックスを切り抜き表示（クリッピング）する際に使用します。
一般的なブラウザでclipプロパティによる切り抜き表示を有効にするには、clipプロパティと同時にpositionプロパティでabsoluteかfixedを指定する必要があります。
rect（上,右,下,左）：ボックスの左上端を基準として、上右下左のそれぞれの距離を指定します。
background-image: url(‘img/mac.png’);
background-imageプロパティは、背景画像を指定する際に使用します。 BODYタグや TABLEタグだけではなく、 PタグやDIVタグ、SPANタグなどの要素にも背景画像を指定することができます。
背景画像はURLで指定します。 スタイルシート部分を外部ファイルにしている場合には、HTMLファイルから見た相対パスではなく、外部スタイルシートファイルからの相対パスで指定しなくてはならないので要注意。
URI（URL）で画像ファイルを指定します。
background-size: cover;
background-sizeプロパティは、背景画像のサイズを指定する際に使用します。
cover：縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小します。
background-position: center center;
background-positionで背景画像の位置の設定。center centerで垂直方向、水平方向ともに中央に配置。
transform: translateZ(0);
translateZ() CSS 関数は、3 次元空間の z 軸に沿って、すなわちビューアーに近づくまたは遠ざかって、要素を移動させます。
参考 translateZ() – CSS: カスケーディングスタイルシート | MDN
will-change: transform;
will-change プロパティは、どのような要素の変更が予測されているかブラウザーに助言します。ブラウザーは要素が実際に変更される前に、最適化をセットアップすることができます。
Special Thanks!!
今回、大変参考にさせていただいたサイトはこちら！
一部引用させていただきましたので、感謝を込めてご紹介します。
以上、TONELIKOでした。
コメント