駆け出しエンジニアなっちゃんの学習録

駆け出しエンジニアになって２週目。
実務に関わらせていただけてありがたい…！

そして少しずつ調べ方や質問の仕方に慣れてきた気もします。

そんな中、木曜日から携わらせていただいた、1つのタスクがとりあえず今日で終了しました。

ここまでで、課題が少しずつ明らかになってきたので、
次のタスクにも必要な知識も含めて

しっかり勉強していきます！

・JavaScript（TypeScriptでコンパイルする）を含めたAPIの流れ
・Bootstrap5の使い方に慣れる
・PHPは引き続きスキルアップ

この3本だてで行きます！

---

順番が前後しますが、
まずは明日から仕事でメインで使うBootstrapから。

こちらを参考に進めさせていただきます。

そもそもBootstrapとはなんなのか。
簡単にいうとCSSのフレームワークです。

ボタンやテーブルのテンプレートが用意されている
便利ものです。

Bootstrapを使う時は次の2つのうちのいずれか。

・作成中のファイルのHTMLに読み込む記述をする（CDNを使った方法）
・ダウンロードする

ここでは簡単に読み込む記述をする方法で行くことにしました。
（やり方は上記リンク参照）

<viewport>
WEBページを作る時にも学んだ、レスポンシブに必要な知識。
デバイスの横幅に合わせてくれるものです。

<グリットシステム>
デバイスを12分割して管理するもの。

<ブレークポイント>
デバイスによってレイアウトが変わるので、その基準となるところ。
これがあるからどんな画面でもページが綺麗に見える。

<コンテンツを入れる箱に、決められたCSSクラスがある>
→下図のような構成になっている
→中に入るコンテンツは中央に位置する
→containerの横幅はmax1320px

Figmaにて作成

・row:行という意味のあるクラス。横並びにしたい時に使う。
・col:カラム。12分割した列。
→「col-ブレークポイント-カラム数」と書く。
→ブレークポイントはデバイスによって下記の5つ。
→”sm->md->lg->xl->xxl”

<メディアクエリ>
デバイスの幅によって表示を変える記述をすること。
→@media screen and (min-width:1024px)のように書く。

一方で、どんなデバイスでも横幅100％で表示してくれるものも。
→下のように書けばOK！

<div class="container-fluid"></div>

ここまでを実際に自分で実装してみたら…
本当に便利！

やっぱり自分で手を動かすとよくわかりますね！

面白い😆

今日はここまで。

全部で14レッスンあるから、毎日コツコツやろっと。

また明日！！