ピュアチャ〜ジ

広告代理店のディレクターを辞め、マレーシアに飛び立ちました。ふわふわ生活して、やっぱり収入を上げて豊かに人生にしたい!と思いプログラミング学習を始めました!フリーランスまでの道のりを描くブログです

Webデザイン勉強92日目の成長報告!

こちらのWebサイトは移転しました。


[ピュアチャ〜ジ]

はいどうも!

 

今日の進捗報告を行います!

 

コード→表示例 の順番で画像を貼り付けています!

 

f:id:terushi-diary:20191118001522p:plain

画面サイズ=sm(スマホ

 

画面上部=アラート

二段目=ハンバーガーメニュー

f:id:terushi-diary:20191118001532p:plain

ハンバーガーメニューを開いた時

f:id:terushi-diary:20191118001541p:plain

画面サイズが大きい時

f:id:terushi-diary:20191118001550p:plain

f:id:terushi-diary:20191118001558p:plain

How to use のタイトルに対して、iOSAndroidのタブ、説明文を表示させています

f:id:terushi-diary:20191118001609p:plain

説明文にツールチップ(文字の下の吹き出し部分)を表示させています

f:id:terushi-diary:20191118001617p:plain

ツールチップを表示させる場合はJavaScriptも記述する必要があるようです

(まだ学習していない領域)

f:id:terushi-diary:20191118001722p:plain

 

今日はこんな感じでした。

 

今日はあまり構造やタグの意味の理解ができませんでした。

なぜかというと、動画内では各classの意味を深く解説しておらず「こう表示したい場合にはここに、この文字のタグを打ち込みます。」という説明で終始したからです。

 

Bootstrapの概念的に、部品を組み合わせていくという感覚に近いと思うので全部のタグを理解して記憶する意味はないし、現実的ではないのかもしれないです。

とはいっても、ある程度理解をしていた方がいいと思っています。

 

今日はBootstrapの公式ページを見ずに、動画で教えられたまま打ち込んだのであまり理解が深まらなかったと思うので、明日は今日やったところを公式ページ・動画・コードを見つつ復習をするところから始めようと思います。

 

今日は、ここまで。