今週は勉強のやり方を少し変えて、既存の画面を再現して、どの程度理解できたか確認してみた。参考にした画面は、業務に絡むものなので、ここに載せられないが、理解できたところと課題を載せておく。

環境には、vue-cli3とbootstrap4とfont awesomeが入っている。もともと勉強用に作ったプロジェクトで、vue-cli3とbootstrap4で作っていたものにfont awesomeを追加した。

以下理解できたところと課題。

理解できた点

• 親要素と子要素の重要性

　HTMLを書く際、ただ要素を上から並べるのではなく、親要素と子要素を意識して並べていくことが重要である。

• HTMLとCSSの繋がりが少しわかった

いままではHTMLとCSSの繋がりをあまり理解できていなかった。HTMLからCSSを利用するには、HTMLの要素に直接書くこと、HTMLの要素にidとclassを設定し、Styleタグ内に書くこと、CSSを外部ファイルにかいて、Linkタブで参照することがあることが分かった。いままでHTMLやCSSのコードはなぜ長くなるのかが疑問であったが、画面内の要素は思ったよりも多く、そのためHTMLやCSSが長くなってしまうのだということがわかった。

• CSSを使用する際、classの指定が必要

• 1要素にclassを複数設定できる

• bootstrapのクラスについて(1部のみ)

cssで要素の大きさ等を指定できるが、bootstrapでは、bootstrapで定義されている特定のclassを要素に設定すると、大きさ等の指定ができる。classを使わずにCSSでも指定ができる。 (例 : w-25 -> width: 25%)

Bootstrap4に用意されているクラス

• bootstrapのグリッドシステムは便利

要素の幅を12分割して、その中に子要素を並べて配置することができる。レスポンシブにも対応できる。

Bootstrapのグリッドシステムについてまとめてみた

課題

• CSSについてまだわからないところが多い

要素を画面内に配置する際、どうやればいいのかが分からなかった。かなりネット上の知見に助けられた。HTMLの勉強で参考にしているサイトが、CSSについても書いてあるため、HTMLの勉強の次にCSSについても勉強をして、知識を増やしていく予定である。

参考にするサイト

• Bootstrap、Vueについて(上記と同様)

これに関しては例題をこなしていくしかないと思う。