Webデザイン勉強90日目の成長報告！
こちらのWebサイトは移転しました。
[ピュアチャ〜ジ]
はいどうも！
本日も作業を行いました。
①Bootstrapのブログを2本読む＆コードを実際に書いてみる
1.http://websae.net/twitter-bootstrap-grid-system-21060224/
2.https://www.marorika.com/entry/bootstrap-beginner
②レスポンシブデザインの英語YouTubeで学習して後半の部分で分からなくなる
https://www.youtube.com/watch?v=no-Ntkc836w
③わからない部分の知識が不足しているので、ドットインストールでBootstrapで学習
こんな感じです。
以下に学習内容を記載します！
【記述したコード】
mt-5 = margin-top
ml-sm-5 = smallサイズのディスプレイのmargin-leftを5em（3rem=親要素の3倍）
mb-md-5 = midiumサイズのディスプレイのmargin-bottomを5em
pt = padding-top
lg = large
pl = padding-left
xl = xlarge
【表示例】
【記述したコードの意味】
xsサイズのディスプレイの場合、①〜③は12カラムを使って表示する
mediunサイズのディスプレイの場合、①〜②は6カラム、③は12カラムを使って表示する
xlargeサイズのディスプレイの場合、①〜③は各4カラムを使って表示する
xsサイズ
mediumサイズ
xlargeサイズ
【記述したコード】
font-weight-normal = 文字の太さ＝普通
display-4 = ディスプレイに対する文字の大きさ（h1より少し大きい）
text-center = 文字を中央揃え
bg = 背景
【表示例】
【記述したコード】
w = width(50だと50%)
h= height(1000だと100%)
【表示例】
【記述したコード】
pt-3 = padding-topが1rem（親要素の1倍）
my-0 = y方向のmarginが0
mx-auto = x方向のmarginはauto
※marginにのみautoの利用が可能
【表示例】
以上です。
【本日の感想】
Bootstrapを取り入れることで記述が早くなった気がしました。
そして、class属性になんでも記述していい感じがしたのと、コードもすっきりする印象を受けました。すっきりするので早くなる秘訣なのではないかと思います。
明日は、冒頭の③の続きをやろうと思います。
今日は、ここまで！
