【告知】ノマドエンジニア養成ブートキャンプ

【DAY15.】30DAYSトライアル15日目をわかりやすく解説

植物を手に持つ

おはこんばにちは、ミヤビです。

 

さて今回は、『Bootstrapを使ってビジネスLP制作③』です。

 

59分のトコまで進めていきましょう。

 

 

✔︎本記事の内容

  • DAY15.『Bootstrapを使ってビジネスLP制作③』の解説

 

✔︎30DAYSトライアル1stの最終目標

  • 月5万を稼ぐスキルを目指す
  • 未経験からWEB系エンジニアの転職を目指す
  • 未経験からWEB系ノマドエンジニアを目指す

 

30DAYSトライアルの折り返し地点に来ました。

 

総集編ということで、HTML/CSS、Bootstrapのサイト制作を頑張っていきましょう。

Bootstrapを使ってビジネスLP制作③

前回に続き、こちらの動画でも学習していきましょう。

scroll spyとは

スクロールスパイとは、ページ画面をスクロールした際に、ナビゲーションメニューを自動的に更新してくれる機能のことです。

 

<body data-spy="scroll" data-target="#連動するnavメニュー名">

 

bodyに対して、data-spy=”scroll”とdata-target=”id名”を入れてあげるだけ。

 

ナビゲーションメニューは、固定しておきたいので、navタグにfixed-topを設定し固定しましょう。

 

<body data-spy="scroll" data-target="#navbarResponsive">


<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a href="#" class="navbar-brand"><img src="img/xxx.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>


<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="#menu1" class="nav-link">メニュー1</a></li>
<li class="nav-item"><a href="#menu2" class="nav-link">メニュー2</a></li>
<li class="nav-item"><a href="#menu3" class="nav-link">メニュー3</a></li>
</ul>
</div>
</nav>

 

data-fa-transform

FontAwesomeにdata-fa-transform属性を与えると、拡大・縮小、上下左右への移動、角度・反転などさまざまな機能を与えることができます。

 

  • 拡大 grow-
  • 縮小 shrink-
  • 移動 up- down- right- left-
  • 角度 rotate-
  • 反転 flip-v(垂直反転) flip-h(水平反転)

 

ハイフンの後ろには、数字を入れます。

 

あと応用的に、、、

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

 

をhead内に加えることで、FontAwesomeにアニメーションもつけられます。

 

<i class="fas fa-play-circle fa-4x faa-spin animated" data-fa-transform="shrink-4 up-5" ></i>
<i class="fas fa-sliders-h fa-4x faa-float animated" data-fa-transform="shrink-4 up-5"></i>
<i class="fab fa-wpforms fa-4x faa-flash animated-hover" data-fa-transform="shrink-4 up-5"></i>

 

さらに、iクラスにanimated-hoverを加えると、hover時にアニメーションを発動させることもできます。

 

下記を参考にすると大変勉強になりますよ。

 

参考››【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

 

というわけで、今回はここまで。

 

引き続き、DAY16.も頑張っていきましょう。

 

各人物の紹介 【DAY16.】30DAYSトライアル16日目をわかりやすく解説

 

【無料あり】おすすめするプログラミングスクール3社【ニーズ別に紹介】