Bootstrapの基礎〜LP制作編YouTubeチュートリアル動画1本目の解説【30DAYSトライアル1st】

Bootstrapの基礎〜LP制作編YouTubeチュートリアル動画1本目の解説【30DAYSトライアル1st】 プログラミング
スポンサーリンク

プログラミング学習「30DAYSトライアル1st【Bootstrapの基礎〜LP制作編】」で紹介されていた、BootstrapのYouTubeチュートリアル動画1本目をやってみました。

デイトラ

英語の動画ですが、言葉がよく分からなくても動画を見ながらコーディングはできます。ただ、完成したものの、いくつか分からないところがあったので調べてみました。

Bootstrapを使ってLPを作る際には、よく使う独自のclassも多いかと思いますので、以下にまとめておきます。

スポンサーリンク

Navigation

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

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

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

Welcome Section

<div class="container-fluid padding">
	<div class="row welcome text-center">

.padding .welcomeはstyle.cssで指定。

Three Column Section

Three Column Section

<hr class="my-4">

my-4

すべてのビューポートサイズで、上下のマージンを1.5rem。縦方向(y)のマージン(m)。

Two Column Section

Two Column Section

<img src="img/desk.png" class="img-fluid" alt="">

img-fluid

imgタグに対して .img-fluid を指定すると、ウィンドウの広さに応じて自動的に横幅が調整されるレスポンシブ画像とすることができます。

Fixed background

Fixed background

<figure>
	<div class="fixed-wrap">
		<div id="fixed">

figure

図表

 

fixed-wrapとfixedはcssで独自定義されている。
Emoji SectionとMeet the teamのセクションはとくに不明点なし。

Cards

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は以下のように記述します。

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!!

今回、大変参考にさせていただいたサイトはこちら!
一部引用させていただきましたので、感謝を込めてご紹介します。

とほほのBootstrap 4入門 - サマリ - とほほのWWW入門
Bootstrap4移行ガイド
Bootstrap4の使い方をBootstrap3からの変更箇所を交えて解説
はじめに
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。
WEBクリエイターの部屋
WEB制作の基礎から応用まで様々な話題
HTMLコーディングの代行・外注はクロノドライブ
コーディングの代行・外注ならクロノドライブへ。コーディングに関するあらゆるニーズに”最高品質”のコーディングサービスでお応えします。
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
HTMLクイックリファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表
WEB作成ノート
WEB作成ノートではHTML+CSSを使ってこれからホームページを作成しようとする初心者の方へ役立つ情報を提供していきます。

 
以上、TONELIKOでした。

コメント

タイトルとURLをコピーしました