2023-07-11:レバテックフリーランス様のサイトで当サイトがご紹介されました
コーディングの勉強

【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】DAY15,DAY16『Bootstrapを使ってビジネスLP制作②』

  /

こんにちは。mito（@mito_works）です。

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。
30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

30DAYSトライアルの始め方

 

mito
mito
トライしていく中で調べて理解したことや大事だと思ったポイントを中心にまとめます。

2. 30DAYSトライアル【Bootstrapの基礎〜LP制作編】

DAY15.『BootstrapでビジネスLP制作』

DAY15、DAY16ではこちらのYoutube動画を使ってLPサイトを制作していきます。

https://twitter.com/showheyohtaki/status/1087273663152431104?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1087273663152431104&ref_url=https%3A%2F%2Fwww.engineer-step.com%2Fentry%2Fsite-seisaku-15

ボタン制御〜アクティブとホバー時の色指定〜

以下、上側でデフォルトの色指定を変更し、下側でアクティブの時、ホバー時の色を同時に指定しています。

.navbar-dark .navbar-nav .nav-link{
  color: white;
  padding-top: .8rem;
}

.navbar-dark .navbar-nav .nav-link.active, 
.navbar-dark .navbar-nav .nav-link:hover{
  color: #1ebba3;
}

Navbarの色指定などは以下に載っています。

BootstrapドキュメントNavbar

border-widthでボタンの太さを指定

左側が何も指定しなかった場合、右側がborder-width: medium;を指定した場合です。

.btn-lg{
  border-width: medium;
  border-radius: 0;
  padding: .6rem 1.3rem;
  font-size: 1.1rem;
}

 

Font Awesome5のアイコンの拡大・縮小と場所指定

ここで使われているアイコンは、Font Awesome5のものです。
Font Awesome5を使うには独自の仕様があります。

Font Awesome 5の使い方【SVG with JavaScript編】

<div class="row text-center">
		<div class="col-md-4">
			<div class="feature">
				<i class="fas fa-play-circle fa-4x" data-fa-transform="shrink-3 up-5"></i>
				<h3>CUSTOM ANIMATION</h3>
				<p>Animate.css and Waypoints.js allow for smooth animations scrolling down the site.</p>
			</div>
		</div>

		<div class="col-md-4">
			<div class="feature">
				<i class="fas fa-sliders-h fa-4x" data-fa-transform="shrink-4.5 up-4.5"></i>
				<h3>CONTENT SLIDER</h3>
				<p>Owl.Carousel.js makes navigating content sliders seamless with it's content carousel navigation.</p>
			</div>
		</div>
		
		<div class="col-md-4">
			<div class="feature">
				<i class="fab fa-wpforms fa-4x" data-fa-transform="shrink-4 up-5"></i>
				<h3>CONTACT FORM</h3>
				<p>The Bootstrap HTML form will send directly to your email address using PHPMailer.php.</p>
			</div>
		</div>
	</div><!-- End row -->

今回はshrinkを使い元の大きさから縮小。upを使い配置を上へ移動させています。

containerを使わず共通divで囲む

containerクラスを使わず、メインビジュアル以下全てoffsetというclassで囲んでいます。

そして、offsetには以下のような指定をしています。

.offset:before{
  display: block;
  content: "";
  height: 4rem;
  margin-top: -4rem;
}

こうすることで、コンテンツの区切りごとに高さ4remの空白ができます。

momo
momo
rem指定なので、レスポンシブ対応不要で便利だね。

列を水平方向に中央ぞろえ

justify-content-centerを使って、footerの列の中身を水平方向に中央ぞろえにします。
<div id="contact" class="offset">
<footer>
	<div class="row justify-content-center">
		<div class="col-md-5 text-center">
			<img src="img/nuno.png" alt="">
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis optio earum fugit harum consequuntur, nulla voluptatem totam numquam quod alias?</p>
			<strong>Contact Info</strong>
			<p>(888) 888-888<br> ito@gmail.com</p>
			<a href="" target="_blank"><i class="fab fa-facebook-square"></i></a>
			<a href="" target="_blank"><i class="fab fa-twitter-square"></i></a>
			<a href="" target="_blank"><i class="fab fa-instagram"></i></a>
		</div>

		<hr class="socket">
		&copy; Nuno Theme;
	</div>
</footer>
</div>

 

その他、便利だと思ったTips

英文を全て大文字に変えたい時の指定

cssに以下のように書くと英文（ローマ字）を全て大文字に変更してくれます。

text-transform: uppercase;

はみ出た要素の左右の表示方法を指定する

body要素のcssに以下のように記述すると、内容がボックスに収まらない場合、収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない、という意味になります。

overflow-x: hidden;

コーディング効率化のために</div>にコメントをつける

divの終わり</div>に例えば以下のようにコメントをつけていました。

<div class="Features">
<div class="Jumbotorn">
<div class="narrow">

</div><!--  End narrow  -->
</div><!--   End Jumbotorn  -->
</div><!-- End Features Section -->

 

mito
mito
中身のコードが長くなると閉じタグを見失いがちになるのでこの記述があるとエラーチェックのスピードが上がるなと思いました。

positionの理解

いつも、relativeだっけ？absoluteだっけ？とこんがらがっていたのでとても参考になりました。

まとめ

コーディングが終わった後に、手書きで要素をパーツ分けするとさらに構造の理解が深まりました。オススメの方法です！



 

30DAYSトライアル css html
ABOUT ME
mito
こんにちは！mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。
RELATED POST