「第一弾」YoutubeでbootstrapのビジネスLP作成【30DAYSトライアルより】

東京フリーランスの「2. 30DAYSトライアル【Bootstrapの基礎〜LP制作編】」にて、一つ目のビジネスLPができたので、そこから学んだことをまとめてみました。

DAY13~17. YouTubeからビジネスLPを作る【第一弾】

 

この部分では、課題の動画を見ながら作っていきました。

YouTubeってすごい!

英語ができれば多くのものを無料で学べる!

 

Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3

上記のものを見ながら、できました。

 

 

この続きの部分では、僕自身が「?????」となったところをメモしてみました。

 

container-fluid

 

画面サイズに合わせてなめらかにリサイズするために使う。

 

text-transform: uppercase;

テキストにおける英数字の「大文字、小文字」の表示を指定するプロパティ。

  • none(初期値) → 変換しない。
  • capitalize → 各単語の先頭文字のみ大文字に変換。
  • uppercase → すべての文字を大文字変換。
  • lowercase → すべての文字を小文字変換。

 

remとemの違い

 

サイズ指定の種類は大きく分けて2つある。

  1. 絶対値基準(pxのみ)→指定した値が反映
  2. 相対値基準(「%」「em」「rem」)→他要素を基準にサイズ指定

rem

「root em」の略

html要素のfont-sizeを基準にする。

htmlが32pxという指定で、他の部分が2remなら「64px」となる。

em

「%」と同じ使い方

%の「100%」はemの「1em」と同じ

250%は2.5em

 

border-radius

要素の四隅の角を丸めるためのCSSプロパティー。

左上、右上、右下、左下の順で、左上を基準に時計回りで短縮形が書ける。

 

max-width: 100%;

 

わかりやすかった記事はこれ!

サルワカさんのサイトは素晴らしいとしか言えない…

 

どんなディスプレイ(親要素)からも画像がはみ出ないように制限できる。

最大の幅を指定できるので、どんなデバイスでも綺麗に表示できる。

 

まとめ

 

プログラミング学習は短時間にたくさんやるのがいいですね。

ブログのように毎日コツコツ少しずつだと、途中で「僕は何をやっていたのだったかな」学んできたことを忘れる…

 

学びが大きかったので、この勢いで30DAYSトライアル1stのYouTube、ビジネスLP二つ目をやっていきます!


MENTA

コメント