エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

DAY16.『Bootstrapを使ってビジネスLP制作④』 #30DAYSトライアル

DAY16.『Bootstrapを使ってビジネスLP制作④』 #30DAYSトライアルです。

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

www.engineer-step.com

 

DAY16.『Bootstrapを使ってビジネスLP制作④』

DAY16. 『Bootstrapを使ってビジネスLP制作④』ということで、Youtubeを見ながら頑張っています。

  

学習メモ

今日も学習メモです。

わからない所を中心に調べました

 

justify-contentプロパティとは

justify-contentプロパティとはコンテナ内の横方向(主軸方向)の揃え位置を指定するやり方です。

下記サイトのDemoを見るとわかりやすいかと思います。

justify-content | MDN

 

「justify-content:center;」で左右中央揃えになります。

 

「:before」は疑似要素

「:before」は疑似要素です

要素の直前に内容を挿入する時に使います。

:before擬似要素-スタイルシートリファレンス

 

ちなみにhoverも擬似要素ですね。

» 参考:30日トライアルのDAY3

 

今回のYoutube動画の中では、offsetクラスを用意して、そのクラスに対して疑似要素を指定していました。

オフセットという言葉はプログラミングをしているとよく出てくる言葉なので雰囲気だけ掴んでおくと良いです。

» 参考:https://wa3.i-3-i.info/word11923.html

 

©でコピーライト表記をする

「©」という特殊文字を入力すると、コピーライト表記ができます。

コピーライト分は必須ではないようですが、慣習的に載せた方が良さそうです。

コピーライトのマークの他には、発行年と、サイトの名前を載せておくのが大事なようですね。

 

SVGについて調べてみた

「svg.svg-inline--fa」という書き方があったので

  1. FontawesomeとSVGの関係
  2. SVGとは
  3. FontAwesomeでSVGを使う方法
  4. アイコンのデザインを変更する方法

を調べてみました。

 

Font Awesome5を使う方法は2種類ある

そもそもFont Awesome5の使う方法は2種類あります

  1. SVG with JavaScript(JavaScriptとSVGで描画)
  2. Web Fonts with CSS(CSSとWebフォントで描画)

 

で、推奨しているのは1つ目のJSとSVGの方らしいです。

 

SVGとはなにか?

SVGとはスケーラブル・ベクター・グラフィックス(Scalable Vector Graphics)の略です。

GIFやJPEGと同じ「画像フォーマット」です。

ベクターデータという形式でして、拡大縮小しても画質が損なわれないのが特徴

 

FontAwesomeをSVGで使う方法

FontAwesomeをSVGで使う方法としては、以下のようにScriptファイルを読み込みます。

 

見て分かるようにJavaScriptファイルを読み込んでいますね。

 

あとは、使いたいアイコンのソースコードを書けばOKです。

※例) <i class="fab fa-facebook"></i>

 

ChetSheatはこちら↓

Cheatsheet | Font Awesome

 

「svg-inline--fa」という書き方をするのは、JavaScriptによってSVGタグになるから

SVGを使ったアイコンのデザインを変える時には、CSSファイルにて「svg-inline--fa」を指定します。

その理由について調べてみました。

 

編集画面でソースコードを書いたときは、<i class="fab fa-facebook">でした。

しかしこれを、Webブラウザで読み込むと、JavaScriptの動作によって、インラインSVGに切り替わるようです。 

<svg class="svg-inline--fa fa-facebook-square fa-w-14" aria-hidden="true" data-prefix="fab" ...(略)

 

このSVGタグに対して、CSSでスタイルを変更する必要があります。

 

このSVGタグのクラス名を見ると「svg-inline--fa」とありますね。

なので、これに対してスタイルを指定します。

※指定方法は他と同様ですね

 

ちょっと便利なショートカットキー

ちょっと便利なショートカットキーを過去にも何度か紹介してきたのですが、今回も1つ。

 

「最後の編集位置に移動」というキーを使うのオススメです。

これを使うと、何かをコピペした後に、元の場所に戻るのが簡単になります。

※編集画面の下の方で作業していて、編集画面上の方のパーツを持ってきたい時に、戻る時に便利です

 

Windowsの場合は「Ctrl + K Ctrl + Q」です。

 

以上、DAY16.『Bootstrapを使ってビジネス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