KAT 初期トレ 5回目
こんにちは！たつきです！
今日は初期トレの5回目の振り返りについて書いていこうと思います！今回は内容が盛りだくさんだったので早速書いていこうと思います。
今回の内容
今回勉強したことを大まかに紹介します。
グリッドレイアウトからviewportまでは主にデザイン的な部分となっております。
また今回は課題として実技があったのですが、そこで結構てこずったり、疑問点もあったのでそこをメインに書いていこうと思います。
rgbaとは？
まずはグリッドレイアウトを設定するコードをCSSで書いてみました。そこでrgbaというコードがあり、これについて調べることにしました。rgbとあるので赤、緑、青による色の表現だろうと思っていましたが、調べてみるとこれらに加えてアルファと呼ばれる透過度の情報を加えたものだとありました。この組み合わせによって色とともに半透明の表現が可能となります。このコードを使えばマウスがボタンに乗ったときに半透明にするという表現もできるようです。これで表現の幅が広がりますね！
グリッドレイアウトは多くのサイトで使われている！
また、グリッドレイアウトを意識してサイトを見てみるといろいろなところで使われていますね。今までには気づきませんでしたが、グリッドレイアウトの中でもたくさんの見せ方があるのだなと思います。ちなみに、列を指定した、1fr 1fr 1frのfrは分数になっているそうです。1fr 1fr 2frとなると、1/4 ,1/4,2/4という表現になるみたいです！
frとautoの違いについて
ここでfrとautoの違いについて疑問に思ったので調べてみました。それは、frは害枠の大きさに対してサイズが変わるようです。対して、autoは同じ列や行にfrがある場合、グリッド内のコンテンツに合わせてサイズが調整されるようになっています。例えば、グリッド内の文字の大きさが変わるとそれによってautoの大きさも変わります。他にも、frがない場合（pxの指定）は、frと同じ働きをします。
うまく表示されないときの対処法
今回、コードを書くにあたり、グリッドレイアウトがページに反映されずそこで時間がかかってしまいました。なんとか解決できたので一応メモとして残しておこうと思います。コードを見返しても、間違えているところはなかったのでなんでだろうと思い、調べてみるとキャッシュに前のCSSが保存されていたみたいでした。そこで、ページのリロードを右クリックで「キャッシュの消去とハードの再読み込み」を選択してみるとグリッドレイアウトを表示することができました。どこか違うとうまく表示されないのでその解決法はいろいろ経験として覚えておきたいなと思います。
まとめ
今回は内容のほかにも疑問点やてこずったところをメインに書いてきました。この内容はウェブサイトの主となる内容だったので、新たな視点をもってウェブサイトを見ていこうと思います。
