エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

DAY13.『Bootstrapでレイアウトを作ろう後編+Bootstrapを使ってビジネスLP制作①』 #30DAYSトライアル

DAY13.『Bootstrapでレイアウトを作ろう後編+Bootstrapを使ってビジネスLP制作①』 #30DAYSトライアルです。 

» 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ

www.engineer-step.com

 

DAY13.『Bootstrapでレイアウトを作ろう後編+Bootstrapを使ってビジネスLP制作①』

DAY13. 『Bootstrapでレイアウトを作ろう後編+Bootstrapを使ってビジネスLP制作①』ということで、Youtubeを見ながらコーディングです。

今までの課題に比べてちょっと大変なので覚悟しましょう!

 

ドットインストールでBootstrap4を学習(レッスン#16~#22)

ドットインストールでBootstrap4を学習しました。 

範囲は「レッスン#16~#22」です。

  • タブメニューやハンバーガーメニューを作る
  • ツールチップを作る

など。

以下、私が気になったところを調べたので共有します。

 

ツールチップとは

ツールチップとは「カーソルをなにかの項目に合わせたときに、ポップアップする枠のこと」です。

WEBサイトに限らず、パソコンのソフトではよく使われる「考え方」です。

 

jQueryとはJavaScriptのライブラリの1つ

jQueryとはJavaScriptのライブラリの1つです。

謎のソースコードを書いたと思いますが、JavaScriptという別言語での記述でした。

※今回のサイト制作ではとりあえず覚えなくて良いと思います

 

勉強したい人はProgateのJavaScript→jQueryの順番に勉強すると良いです。

 

ハンバーガーメニュー

ハンバーガーメニューは、三本線のメニューアイコンのことです。

君たちはそんなにハンバーガーメニューが好きなのかね? - Qiita

 

個人的には、メニューボタンだと分かりづらいので、あまり好きではないです(せめてMENUって書いて方が親切かなと思います)

 

collapseとは

collapseとは「開閉するコンテンツを簡単に作れるパーツ」です。

例えばアコーディオンメニュー(押したら開かれるメニュー)を作るのに使われます。

 

  • コンテンツのclassにcollapseと付ける
  • ボタンにはdata-toggle, data-targetの2つが必要
  • ボタンではなくテキストリンクのときはdata-targetの代わりにhrefも使える

という感じ。

「そういうものあるんだあ」と思っておく程度で良さそうです。

※サンプルコード見てすぐ使えると思うので

 

WEB画面の閉じるボタンは「&times」という特殊文字を使っていた

WEB画面の閉じるボタン「×」の書き方が分かりました。

「&times」という特殊文字です。

文字コードの規格(よく使う文字の集まり)に入っていないものが特殊文字です。

特殊文字 - Wikipedia

 

英語の動画を見て学習する方法【良い方法はありません】

英語の動画を見て学習する方法ですが…

英語が苦手な人向けの良いやり方」は見つかりませんでした(何かあれば教えてください~)

www.youtube.com

 

●そこそこ英語ができる人↓

Youtube再生時の設定で「字幕」をONにして、英語を見て理解する

 

●まったく英語ができない人↓

とりあえず動画を見つつ、写経(丸写し)して、書かれている言葉の意味を調べる

 

のどちらかしかないと思います。

ちなみにエンジニア世界で使われる専門単語って限りがあります。

エンジニアになりたい人は英語のドキュメントを読んだりし続けると自然と英語力は上がります。

 

以上、DAY13.『Bootstrapでレイアウトを作ろう後編+Bootstrapを使ってビジネスLP制作①』というお話でした。

LPの写経大変ですが「自分のウェブサイトの元」と考えてがんばりましょう~

【関連記事】

  1. DAY11.『Bootstrapの基本を学ぼう』 #30DAYSトライアル
  2. DAY12.『Bootstrapでレイアウトを作ろう 前編』 #30DAYSトライアル
  3. DAY13.『Bootstrapでレイアウトを作ろう後編+Bootstrapを使ってビジネスLP制作①』 #30DAYSトライアル 
  4. DAY14.『Bootstrapを使ってビジネスLP制作②』 #30DAYSトライアル
  5. DAY15.『Bootstrapを使ってビジネスLP制作③』 #30DAYSトライアル
  6. DAY16.『Bootstrapを使ってビジネスLP制作④』 #30DAYSトライアル 
  7. DAY17.『HTML5/CSS3/Bootstrap4の復習』 #30DAYSトライアル

www.engineer-step.com