夫のポートフォリオサイトのコーディング中、夫から指令が下り、CSSグリッドレイアウトを使用して制作することになりました。

ドットインストールでまだ習っていない範囲だったため、レファレンスをひきながら挑戦しようと思いましたが、基礎を大事にしたくて、ドットインストールで見つけたCSSグリッドレイアウト入門（全10回）を受講して臨むことに。

というわけで学習日誌にうつります。第1回の視聴時間は2分55秒でした。

#01 CSSグリッドレイアウトを使おう

まずCSSグリッドレイアウトに対応しているブラウザの注意点についての話がありました。古いブラウザでは対応していないので、すべてのブラウザで対応しているわけではないとのこと。

では、どのブラウザの、どのバージョンなら対応しているのか？ それを調べられるサイトが存在するんです。その名も「can i use .com」！

これはうひょー！と仰天するくらいの超便利サイトですよ、そこのあなた！検索ボックスに調べたい技術名を入力すると、対応状況をブラウザ別、バージョン別に表示してくれるのです。

上はCSSグリッドレイアウトを調べた結果です。サイトは英語表記だけど、ブラウザは世界共通だし、なんにも困りません。

さて第1回の残りの時間は、CSSグリッドレイアウトのためのHTMLとCSSファイルの準備だけでした。

今回重要だったのは、上の赤線部分。<meta>タグのname="viewport"とは、表示領域の設定のこと。そして続くコードで、幅はデバイスの幅に合わせること、初期のズーム倍率は等倍にすることを指定しました。

今日のレッスンは準備段階にとどまりましたが、レスポンシブデザインへの第一歩を踏み出しました！

早速、制作中の夫のポートフォリオサイトのHTMLファイルにも同じコードを追記しておきました。うん、順調！