デイトラ1期 DAY16『Bootstrapを使ってビジネスLP制作④』【30DAYSトライアル1st】

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

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

デイトラ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ファイルを読み込みます。

    <script src=”https://use.fontawesome.com/releases/v5.5.0/js/all.js”></script>

 

「.js」と書かれていますね。

これは「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制作④』というお話でした。