【DAY15.】「Bootstrapを使ってビジネスLP制作③」をやってみた（30DAYSトライアル）
むぎです。
■30DAYSトライアル DAY15.をやります！
DAY15. 『Bootstrapを使ってビジネスLP制作③』
— ショーヘー@Webエンジニア (@showheyohtaki) 2019年1月21日
今日でデイトラ開始からちょうど半分‼️
DAY15は、これまでの総集編としてHTML5/CSS3/Bootstrap4でのサイト制作です。Bootstrap編ももう少しで終わり🤗🎊
課題詳細👉https://t.co/cFJYpAh3yF#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/6n0oLJGG9s
■課題：【Youtubeで学ぶ】Bootstrapを使ってビジネスLP制作③
DAY13.とDAY14.と同じ方が作者の動画です。
動画はこちら
ここでショーへ―さんが大事なコトが書かれている…！
「見本を確認するシーンで一度止め、自分ならどういうブロック分けをするか・クラスを付けるか頭の中で設計してから再生する、という方法で進めてみてください👍‼️
ただ説明を見ながらその通りにコーディングするだけでは、いざ自分で作る段階になって「どうだったっけ？」状態になります」
ああ…本当にその通りです。自分で作るならどうするか、を念頭に置きながらコーディングしていかないと、いつまでたってもできるようにならなさそう…。
時間が少しくらいかかってしまっても仕方ないので、「自分でやるなら！？」をしっかり意識して頑張ります！
ちなみにこの動画も商用利用OK（画像除く）とのことです。
■動画のSTARTER FILESをダウンロードする
動画の下にある「➢ STARTER FILES:」というリンクに、必要な画像や、HTML、CSSの最初のコーディングが書いてあります。
私はこれを知らずに動画を見ながら一文字一句写経してしまったのですが、最初のコードはありものを使った方が早く進められるかもしれません。
■レイアウトを作成していく
まずHTML、CSS、javascript、Bootstrap、fontawesomeのSource Filesを整えていきます。
ここまでは画面に何も表示されないけど、何のソースを読み込んで作成するかを表すファイル。
（これ、自分で新しいサイト制作を始める時はこのまま使っていいのだろうか…？）
こちらHTMLファイル
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nuno - Responsive Bootstrap Theme</title>
</head>
<body>
<!--- Script Source Files -->
<script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<!--- End of Script Source Files -->
</body>
</html>
こちらはCSSファイル
CSSはレスポンシブに関するサイズのメモのみになっていますね。
/*============ BOOTSTRAP BREAK POINTS:
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap
Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
=============*/
■レイアウト作成
実際自分がサイト作成するときにどのように作成していくのか…？
ということを念頭に置きながら進めていきましょう！ハイ！頑張ります先生！
ここ以下は本当に自分向けのメモです…。▼▼▼
□ナビゲーションバーを固定する
Bodyタグの中にscrollを入れ込む
□セクション分けする
<!-- Start Home Section -->
<!-- End Home Section -->
このようなsectionを
Home,Features,Resouces,Clients,Contactの5つ分作成する。
それぞれにStartとEndのSectionを作成する。
id属性を与える。
また、Home以外はoffsetというクラスにする。
※ここで classと idの違いがわけわからなくなってしまいました。
こちらの記事を参考にしました。
□Navigationを作成する（HTML）
・Home Sectionの中にNavigationを作成する
・ハンバーガーメニューを作成する
spanタグにクラスを与えて（navbar-toggler－icon)作成する
・Navigationの項目をliタグで作成
※つまづいたこと
・コードのダッシュが一つ抜けただけで全然先にすすめなかった
・bootstrapのcssファイルがきちんと読み込めていなくて一からやりなおし。
うまく反映されないときはBootstrapが読み込めていないことがあるのだな。
□Start Landing Page Sectionを作成する
□Landing Pageのテキストを作成する
□ボタンを作成する
□Late fontをダウンロードする
グーグル検索してページを開き、「@inport」をコピーしてcssシートのテキストエディタへ貼り付ける
<style>タグはいらない
□CSSでフォントを設定する
「Specify in CSS」のコードをコピーしてcssへペースト（bodyタグに）
□CSSでNavigationを整える
高さ、大きさ、カラーなどを指定する
□div id="course"をコーディングする（HTML）
ここ少し意味が分からなかったのですが、おそらく、おそらくですが…
Navigationが固定されているので、スクロールした時きれいに見えるように余白をそろえるということかな？と思いました…。
h1はパラグラフテキストを入力する
□ボタンを作成する
～ここ以降力尽きてメモ消失～
■ググったよメモ
「emとrem」
remとかemとかなんかサイズの単位だっけ…？と思いつつぼんやり使っていました…。
ブラウザによってfont-sizeがばらばらになってしまうため、親要素に対してサイズを決める単位なのですね。
remかemかはっきり使い分けていない場合もあるのですねぇ…。
https://qiita.com/butchi_y/items/453654828d9d6c9f94b0
https://yu8mada.com/2018/08/09/the-difference-between-em-and-rem-in-css/
■コードメモ
scrollspy…ナビゲーションで今どのページがビューポートでアクティブ化を示す。
uppercase…大文字
!important…優先順位の変更
z-index…重なりの順序を指定。加須が大きいほど手前に来る
■DAY15.デイトラ15日目の作業報告
作業時間：7時間（1週間くらいかかってしまった…）
累計作業時間：47時間
ほんと、時間がかかります…。先が見えない…涙
ちなみにここまでできましたぞ…！
（font-awesomeが表示されてないんです…！涙）
余りに目が疲れるのでソフトコンタクトレンズをやめました…
正確には、コーディングの日はメガネに変更。
ブルーライトカットの軽いメガネも新調しました。
目は大事…！
目が疲れると資料句が悪くなるし、まぶたが一気に痩せてしまいます…！
オンラインコミュニティでみんながブルーライトカットメガネと、あずきのホットマスクをおすすめしてくれて、教えてくれて助かりました…！
電動のホットアイマッサージャーもあるらしくて気になりすぎます…！
